Fabricjs And Polygon Transformed Coordinates

We're new to Fabric.js. We're using it to draw polygons on our canvas in overlay on a real scene. We need to move, to rotate and resize the polygon and then get back the veterxes c

Solution 1:

I think maybe you need to call setCoords on the objects after you modify them. This is a purposeful abstraction leak for performance reasons, according to the documentation.

Solution 2:

The point is that all polygon's points have absolute coordinates to the canvas. In order to get actual points coordinates, you have to perform some transformation. It's required because there could be some movements and/or transformations applied to the polygon.

Check out the following answer: https://stackoverflow.com/a/53710375/4681279

Solution 3:

Answer is simple, just check code below:

var polygon = new fabric.Polygon(
      [
        { x: 0, y: 0 },
        { x: 0, y: 100 },
        { x: 100, y: 100 },
        { x: 100, y: 0 },
        { x: 100, y: 200 },
      ],
      {
        fill: "",

        stroke: "blue",
        strokeWidth: 2,
      }
    );
    polygon.on("modified", function () {
      var matrix = this.calcTransformMatrix();
      var transformedPoints = this.get("points")
        .map(function (p) {
          returnnew fabric.Point(
            p.x - polygon.pathOffset.x,
            p.y - polygon.pathOffset.y
          );
        })
        .map(function (p) {
          return fabric.util.transformPoint(p, matrix);
        });
      console.log(transformedPoints);
    });

It has worked for me, hope works for you also:) . Ref: https://stackoverflow.com/a/53710375/15481471