javascript - FabricJs 和 Polygon 变换坐标

Question

我们是 Fabric.js 的新手。我们使用它在 Canvas 上绘制覆盖真实场景的多边形。我们需要移动、旋转和调整多边形的大小，然后获取顶点坐标。

转换后我们使用了API。

var originalPolyPoints = pol.get('points').map(function (p) 
{
    return {x: p.x , y: p.y };
});

这样，坐标始终是原始坐标，而不是更改后的坐标。我们怎样才能得到新的坐标？

尝试获取多边形的transformMatrix，但它为空。即使我们有了矩阵，我们如何应用它？

Answer 1

答案很简单，只需检查下面的代码:

 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) {
          return new fabric.Point(
            p.x - polygon.pathOffset.x,
            p.y - polygon.pathOffset.y
          );
        })
        .map(function (p) {
          return fabric.util.transformPoint(p, matrix);
        });
      console.log(transformedPoints);
    });

它对我有用，希望对你也有用:)。引用:https://stackoverflow.com/a/53710375/15481471