Fabric.js loadFromJSON не работает с rgba fill

Question

У меня есть простой холст, на котором я добавляю фигуры (треугольник, круг, прямоугольник). Я использовал набор выбора цвета спектра, который поддерживает rgba, и я устанавливаю заполнение фигур в соответствии с выбранным цветом. К этому моменту все работает нормально. Теперь я экспорт холст как JSON,

var json = JSON.stringify(canvas); 
console.log(json); 

Этот вывод JSON будет сохранен в базе данных позже, но для целей тестирования я копирование на JSON из консоли и использовать его как следовать,

canvas.loadFromJSON('{"objects":[{"type":"circle","originX":"center","originY":"center","left":400,"top":200,"width":100,"height":100,"fill":{"_originalInput":{"h":"0%","s":"100%","v":"100%","a":0.13},"_r":255,"_g":0,"_b":0,"_a":0.13,"_roundA":0.13,"_format":"rgb","_ok":true,"_tc_id":3288},"stroke":{"_originalInput":{"h":"0%","s":"0%","v":"0%","a":1},"_r":0,"_g":0,"_b":0,"_a":1,"_roundA":1,"_format":"rgb","_ok":true,"_tc_id":3783},"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":0.4,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":50,"startAngle":0,"endAngle":6.283185307179586},{"type":"triangle","originX":"left","originY":"top","left":583,"top":89,"width":50,"height":50,"fill":{"_originalInput":{"h":"17.374213836477992%","s":"86.88524590163934%","v":"95.68627450980392%","a":0.34},"_r":235.01046366720004,"_g":243.98400000000004,"_b":32.01070080000003,"_a":0.34,"_roundA":0.34,"_format":"hex","_ok":true,"_tc_id":2503},"stroke":"rgb(0, 0, 0)","strokeWidth":6,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0},{"type":"rect","originX":"left","originY":"top","left":485,"top":196,"width":50,"height":50,"fill":"#1d128f","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":0.4,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"rx":0,"ry":0}],"background":""}'); 
canvas.renderAll(); 

Проблема, с которой я сталкиваюсь, заключается в том, что, поскольку экспортируемый JSON имеет значения rgba, поэтому, когда фигуры отображаются на холсте, заливка является черной. Холст игнорирует значение rgba, присутствующее в строке JSON.

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

canvas.loadFromJSON('{"objects":[{"type":"rect","left":50,"top":50,"width":20,"height":20,"fill":"green","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"rx":0,"ry":0},{"type":"circle","left":100,"top":100,"width":100,"height":100,"fill":"red","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":false,"transparentCorners":true,"perPixelTargetFind":false,"radius":50}],"background":"rgba(0, 0, 0, 0)"}'); 

Это ошибка в fabric.js или есть что-то, что я делаю неправильно?

Answer 1

OK. Я узнал, почему это происходит. Проблема заключается в том, как я устанавливаю цвет для объектов формы. Я использую Spectrum color picker и используя следующий код для инициализации Spectrum, а также добавляя код, который, когда цвет выбран в colorpicker спектра, затем также изменяется для выбранного объекта формы на холсте.

$(".spectrumColor").spectrum({ 
     showAlpha: true, 
     showButtons: false, 
     showPalette: true, 
     palette: defaultPallete, 
     allowEmpty: true, 
     showInput: true, 
     move: function (color) { 

      var selectedObject = canvas.getActiveObject(); 
      if (selectedObject != null) { 
       if ($(this).attr('id') == "FillColor") { 
        selectedObject.set('fill', color); 
        canvas.renderAll(); 
       } 
       else if ($(this).attr('id') == "StrokeColor") { 
        selectedObject.set('stroke', color); 
        canvas.renderAll(); 
       } 
      } 
     } 
    }); 

Здесь проблема с этой линией,

selectedObject.set('stroke', color); 

Я прошел весь объект цвет из спектра объекта формы ткани. Когда я проверяю значение цвета в консоли, тогда это простая строка rgb «rgb (255, 0, 0)», но когда полный объект присваивается объекту формы Fabric, он добавляет hsv (оттенок, насыщенность и легкость) строка вместе с RGB на ткани объекта формы, как это,

fill":{"_originalInput":{"h":"0%","s":"100%","v":"100%","a":0.13},"_r":255,"_g":0,"_b":0,"_a":0.13 

Как ВПГ не распознается Fabric.js поэтому он делает объекты формы в черном цвете. Чтобы решить эту проблему, я должен был заменить,

selectedObject.set('stroke', color); 

с

selectedObject.set('stroke', color.toRgbString());