FabricJS文本颜色是对象

Question

我试图在颜色选择器中加载文本颜色.但是,当我在从JSON加载的activeobject上获得("填充")时,它给了我一个对象.这是令人讨厌的JSON行:

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

我怎么能把它变成一种颜色而不是一个对象？

添加jsfiddle:

只需点击文字!

Answer 1

你是对的,问题是你是通过显式加载包含fill属性错误值的json来恢复canvans :

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

可能这个对象来自TinyColor的序列化

不幸的是,这不能被fabricjs正确解释,也无法转换回十六进制颜色(如果需要深入研究这一点,请参阅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可视化为黑色(默认)而不是我们的颜色(红色).

正确的方法是使用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'");
}