如何识别fabricjs上的对象颜色答案

【问题标题】：How to identify the objects color on fabricjs如何识别fabricjs上的对象颜色
【发布时间】：2022-10-08 18:25:35
【问题描述】：

我有一个画布（使用fabricjs），我在其中放置了不同颜色的矩形，但默认情况下填充颜色的不透明度为50％。

最后，我想用各自的颜色将每个矩形的不透明度设置为 100%。我很难识别每个矩形的颜色，所以我可以从"rgba(255,0,0,0.5)" 传递到"rgba(255,0,0,1)"，从"rgba(0,255,0,0.5)" 传递到"rgba(0,255,0,1)"（例如）。

这是现在的代码：

function fillColor() {
  var objs = canvas.getActiveObjects();
  if (!objs) return;

  objs.forEach(function (obj) {
    if (obj instanceof fabric.Path) {
      obj.setStroke('rgba(242,0,222,1)');
    } else {
      obj.set("fill", 'rgba(242,0,222,1)');
    }
    canvas.renderAll();
  });
}

这只会将每个选定对象转换为'rgba(242,0,222,1)'。

我想成为：

function fillColorOb() {
  var objs = canvas.getActiveObjects();
  if (!objs) return;

  objs.forEach(function (obj) {
    if (obj instanceof fabric.Path) {
      obj.setStroke('rgba(242,0,222,1)');
    } else {
      //if (obj.color == 'rgba(242,0,222,0.5)') {
        //obj.set("fill", 'rgba(242,0,222,1)');
      //}
      //if (obj.color == 'rgba(242,0,0,0.5)') {
        //obj.set("fill", 'rgba(242,0,0,1)');
      //}
    }
    canvas.renderAll();
  });
}

这样，使用if 我可以首先识别矩形颜色，然后根据需要设置 rgba。

谢谢：）

【问题讨论】：

标签： javascript fabricjs fabricjs2

【解决方案1】：

我没有想出确切的想法，但这里有一个解决方案：

我一直在努力尝试从所选对象中提取信息，但是您可以做一件事。您可以将所有画布导出到 JSON 文件中：

  JSON.stringify(canvas);

然后解释那个 JSON 文件

    {
    "version": "5.2.4",
    "objects": [{
        "type": "rect",
        "version": "5.2.4",
        "originX": "left",
        "originY": "top",
        "left": 318,
        "top": 13,
        "width": 100,
        "height": 100,
        "fill": "rgba(242,0,222,0.5)",
        "stroke": "rgba(242,0,222,1)",
        "strokeWidth": 2,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "rx": 10,
        "ry": 10,
        "name": "ly1"
    }, {
        "type": "circle",
        "version": "5.2.4",
        "originX": "left",
        "originY": "top",
        "left": 114,
        "top": 119,
        "width": 253.49,
        "height": 253.49,
        "fill": "rgba(0,255,132,0.5)",
        "stroke": "rgba(0,255,132,1)",
        "strokeWidth": 2,
        "strokeDashArray": null,
        "strokeLineCap": "butt",
        "strokeDashOffset": 0,
        "strokeLineJoin": "miter",
        "strokeUniform": false,
        "strokeMiterLimit": 4,
        "scaleX": 1,
        "scaleY": 1,
        "angle": 0,
        "flipX": false,
        "flipY": false,
        "opacity": 1,
        "shadow": null,
        "visible": true,
        "backgroundColor": "",
        "fillRule": "nonzero",
        "paintFirst": "fill",
        "globalCompositeOperation": "source-over",
        "skewX": 0,
        "skewY": 0,
        "radius": 126.74605507255723,
        "startAngle": 0,
        "endAngle": 360,
        "name": "ly4"
    }]
}

然后您需要的所有信息都可以在该文件中找到。

这不是我所期望的，但它有效，而且我已经导出了它，所以赢了 :)

希望它对任何人都有帮助！

【讨论】：