json - FabricJS 文本颜色是对象

Question

我正在尝试在颜色选择器中加载文本颜色。但是，当我对从 JSON 加载的活动对象执行 get("fill") 时，它给了我一个对象。这是有问题的 JSON 行：

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

我应该如何将其变成颜色而不是对象？

添加jsfiddle：

只需点击文字！

score 6 · Accepted Answer

你是对的，问题是你正在通过加载一个包含错误属性值的json来恢复画布fill，明确地：

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

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

不幸的是，fabricjs 无法正确解释这一点，也无法将其转换回十六进制颜色（如果您需要深入研究这一点，请参阅TinyColor 的来源）

我创建了这个小提琴来展示如何重现类似的错误；假设我们有一个 TinyColor

var t = tinycolor("#ff0000");

如果我们使用这个 TinyColor 对象作为填充属性（ ie ）的值，我们会犯错误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 恢复画布，这也能正常工作。

编辑

最终建议是在 origini 处解决问题，但如果您必须处理有问题的 json 字符串，也可以通过这种方式拦截问题：

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

1 回答 1