私はシェイプ(三角形、円形、長方形)を追加する簡単なキャンバスを持っています。私は、rgbaをサポートするスペクトルカラーピッカーを使用しており、選択された色ごとの形状の塗りつぶしを設定しています。この時点で、すべて正常に動作します。今、私はこのJSON出力は、後でデータベースに保存されますJSON、Fabric.js loadFromJSONがrgba fillと連携していません
var json = JSON.stringify(canvas);
console.log(json);
としてキャンバスを輸出していますが、テストの目的のために、私は、コンソールからJSONをコピーしていますし、続くとしてそれを使用して、
canvas.loadFromJSON('{"objects":[{"type":"circle","originX":"center","originY":"center","left":400,"top":200,"width":100,"height":100,"fill":{"_originalInput":{"h":"0%","s":"100%","v":"100%","a":0.13},"_r":255,"_g":0,"_b":0,"_a":0.13,"_roundA":0.13,"_format":"rgb","_ok":true,"_tc_id":3288},"stroke":{"_originalInput":{"h":"0%","s":"0%","v":"0%","a":1},"_r":0,"_g":0,"_b":0,"_a":1,"_roundA":1,"_format":"rgb","_ok":true,"_tc_id":3783},"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":0.4,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":50,"startAngle":0,"endAngle":6.283185307179586},{"type":"triangle","originX":"left","originY":"top","left":583,"top":89,"width":50,"height":50,"fill":{"_originalInput":{"h":"17.374213836477992%","s":"86.88524590163934%","v":"95.68627450980392%","a":0.34},"_r":235.01046366720004,"_g":243.98400000000004,"_b":32.01070080000003,"_a":0.34,"_roundA":0.34,"_format":"hex","_ok":true,"_tc_id":2503},"stroke":"rgb(0, 0, 0)","strokeWidth":6,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0},{"type":"rect","originX":"left","originY":"top","left":485,"top":196,"width":50,"height":50,"fill":"#1d128f","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":0.4,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0}],"background":""}');
canvas.renderAll();
私が直面している問題は、エクスポートされたJSONのrgba値がキャンバス上にレンダリングされるときに塗りつぶしが黒くなるためです。キャンバスはJSON文字列に存在するrgba値を無視しています。
ただし、次のJSON文字列(「緑色」と「赤色」の塗りつぶしを使用)を使用すると、緑色と赤色の図形が細かく描画されます。
canvas.loadFromJSON('{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0},{"type":"circle","left":100,"top":100,"width":100,"height":100,"fill":"red","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"radius":50}],"background":"rgba(0, 0, 0, 0)"}');
これはfabric.jsのバグですか、間違っていることがありますか?
と私は交換していたこの、
を解決するために呼び出すあなたが渡しているように見える 'オブジェクトをfill'。 [docs](http://fabricjs.com/docs/fabric.Object.html#fill)によると、色の文字列があると思います。あなたの実装をチェックしたいかもしれません。 – Ben
@Benこのコードで使用したJSONは、Fabric.js自体によって生成されました。したがって、別のソースからJSONをFabric.jsにロードしているわけではありません。したがって、Fabric.jsがこのJSONをエクスポートしていれば、それをロードすることもできます。 Fabric.jsがhsvとrgbaをサポートしていない場合は、JSONをエクスポートする際に、なぜこれらが含まれていますか? –
あなたは見たいものを持っていますか? – Ben