FabricJs 和多边形变换坐标答案

【问题标题】：FabricJs and Polygon transformed coordinatesFabricJs 和多边形变换坐标
【发布时间】：2016-10-09 21:25:57
【问题描述】：

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

转换后我们使用 API。

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

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

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

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

我想你可能需要在修改对象后调用setCoords。根据documentation，这是出于性能原因的有目的的抽象泄漏。

【讨论】：

【解决方案2】：

关键是所有多边形的点都具有画布的绝对坐标。为了获得实际的点坐标，您必须执行一些转换。这是必需的，因为可能会对多边形应用一些移动和/或变换。

查看以下答案：https://stackoverflow.com/a/53710375/4681279

【讨论】：

【解决方案3】：

答案很简单，看看下面的代码：

 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

【讨论】：