Цвет текста FabricJS - объект

Question

Я пытаюсь загрузить цвет текста в подборщике цветов. Однако, когда я получаю («заполнять») в активном объекте, загруженном из JSON, он дает мне объект. Вот оскорбительная линия JSON:

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

Как я могу превратить это в цвет, а не объект Объект?

Добавление jsfiddle:

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

Просто нажмите на текст!

Answer 1

Вы правы, проблема заключается в том, что вы восстановление Canvans путем загрузки JSON, который содержит неверное значение для fill собственности, явно:

"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.

EDIT

В конечном счете указывают на то, чтобы решить эту проблему в origini, но, если вам приходится иметь дело со строкой багги JSon также можно перехватить эту проблему таким образом:

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

in this fork the fiddle post in the question