javascriptfabricjsfabricjs2

How to identify the objects color on fabricjs


I have a canvas (with fabricjs working on) where I put rectangles of different colors but with the 50% opacity of the fill color by default.

At the end, I want to set the opacity of every rectangle selected to 100% with the respective color. I'm having difficulties identifying the color of every rectangle, so I can pass from "rgba(255,0,0,0.5)" to "rgba(255,0,0,1)", and from "rgba(0,255,0,0.5)" to "rgba(0,255,0,1)" (for example).

This is the code right now:

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();
  });
}

This only converts every selected object to a 'rgba(242,0,222,1)'.

And I wanted to be like:

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();
  });
}

So that way, with the if I can identify first the rectangle color and then set the rgba as I want.

Thanks:)


Solution

  • I didn't come up with the exact idea, but here is a solution:

    I have struggle trying to extract information from an object selected, but there is a thing you can do. You can export all the canvas into a JSON file:

      JSON.stringify(canvas);
    

    And then interpret that JSON file

        {
        "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"
        }]
    }
    

    And then all the information you'll need you can find it on that file.

    That's not what I was exactly expecting but it works, and I had to export it anyways so :)

    Hope it helped anyone!