json - FabricJS テキストの色はオブジェクトです

Question

カラーピッカーでテキストの色を読み込もうとしています。ただし、JSON から読み込んだアクティブオブジェクトに対して get("fill") を実行すると、オブジェクトが返されます。問題のある JSON 行は次のとおりです。

"fill":{"ok":true,"format":"hex6","_tc_id":258,"alpha":1}

それをオブジェクトオブジェクトではなく色に変えるにはどうすればよいですか?

jsfiddle の追加:

文字をクリックするだけ！

score 6 · Accepted Answer

fillそうです、問題は、明示的にプロパティの間違った値を含むjsonをロードしてcanvansを復元していることです:

 "fill":{"ok":true,"format":"hex6","_tc_id":258,"alpha":1}

残念ながら、これは fabricjs では正しく解釈できず、16 進数の色に戻すことはできません (この点を詳しく調べる必要がある場合は、TinyColor のソースを参照してください)。

このフィドルを作成して、同様の間違いを再現する方法を示します。TinyColor があるとします。

var t = tinycolor("#ff0000");

この TinyColor オブジェクトを fill プロパティ (つまり ) の値として使用すると、間違いfill: tを犯します。たとえば、次のようになります。

canvas.add(new fabric.Rect({ width: 50, height: 50, fill: t, top: 100, left: 100 }));

キャンバスをシリアル化することで、以下を含む JSON を取得します。

"fill":{"ok":true,"format":"hex","_tc_id":0,"alpha":1},

しかし、これは機能せず、実際fillは色 ( red ) ではなく黒 (デフォルト) として視覚化されます。

正しいアプローチは、次を使用することfill: t.toHexString()です。

canvas.add(new fabric.Rect({ width: 50, height: 50, fill: t.toHexString(),  top: 150, left: 150 }))

これは正常に機能します (四角形は赤です)。さらに、キャンバスをシリアル化することで、以下を含む JSON を取得します。

"fill":"#ff0000"

したがって、JSON から canvans を復元する場合でも、これは正常に機能します。

編集

最終的には、元の場所で問題を修正することをお勧めしますが、バグのある json 文字列に対処する必要がある場合は、次の方法で問題を傍受することもできます。

if (typeof hex == "object" && hex.hasOwnProperty("_tc_id")) {
   alert("no color available; return a default such as fill:'none'");
}

1 に答える 1