我正在尝试在颜色选择器中加载文本颜色。但是，当我在从JSON加载的activeobject上获得（“填充”）时，它给了我一个对象。这是令人讨厌的JSON行：
"fill":{"ok":true,"format":"hex6","_tc_id":258,"alpha":1}
我应该如何将其转换为颜色而不是对象？
添加jsfiddle：
只需点击文字！
答案 0 :(得分：6)
你是对的，问题是你是通过加载一个包含fill属性的错误值的json来明确地恢复canvans：
"fill":{"ok":true,"format":"hex6","_tc_id":258,"alpha":1}
可能这个对象来自TinyColor
的序列化不幸的是，fabricjs无法正确解释它，也无法将其转换回十六进制颜色（如果需要深入研究这一点，请参阅sources of TinyColor）
我创建了这个fiddle来展示如何重现类似的错误;假设我们有一个TinyColor
var t = tinycolor("#ff0000");
如果我们使用此TinyColor对象作为填充属性的值（即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'");
}