FabricJS文本顏色是對象

Question

我想在顏色選擇器中加載文本顏色。然而，當我從JSON加載的activeobject上得到（「填充」）時，它給了我一個對象。這裏是違規的JSON行：

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

我該如何將它變成一個顏色，而不是一個對象對象？

添加的jsfiddle：

http://jsfiddle.net/Qb4Xe/5/

只需點擊文字！

Answer 1

你是對的，問題是，你是通過加載一個包含了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，這也能正常工作。

編輯

最終的建議是在origini來解決這個問題，但，如果你要處理一個有錯誤的JSON字符串也可以這樣攔截問題：

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

like in this fork the fiddle post in the question