javascript - Fabric.js loadFromJSON 不适用于 rgba 填充

Question

我有一个简单的 Canvas ，我在上面添加形状(三 Angular 形、圆形、矩形)。我使用了支持 rgba 的光谱颜色选择器，并且根据所选颜色设置形状的填充。至此一切正常。现在我将 Canvas 导出为 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 值，因此当形状在 Canvas 上渲染时，填充为黑色。 Canvas 忽略 JSON 字符串中存在的 rgba 值。

但是，当我使用以下 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

好的。我已经知道为什么会这样了。问题是我如何设置形状对象的颜色。我正在使用光谱颜色选择器并使用以下代码来初始化光谱，并添加代码，当在光谱颜色选择器上选择颜色时，它也会针对 Canvas 上选定的形状对象进行更改。

$(".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 到 Fabric 形状对象，

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

由于 Fabric.js 无法识别 HSV，因此它会将形状对象渲染为黑色。为了解决这个问题，我必须更换，

    selectedObject.set('stroke', color);

与

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