修改对象后如何获取点坐标？答案

【问题标题】：How do i get point coordinates after object modified?修改对象后如何获取点坐标？
【发布时间】：2016-11-28 18:30:01
【问题描述】：

我想在修改对象后获得新的点坐标，但是当我在修改后获得点坐标时，它们与我绘制多边形的点坐标相同。谁能告诉我为什么会这样？下面是我的代码，

<!--fabricjs -->
canvas.on('object:modified', function(e){

 var obj=e.target;
 console.log("new point coordinates "+obj.points);
});

【问题讨论】：

您找到解决方案了吗？我也有同样的问题。
@Fidel90 是的，我知道了，但禁用了 ROTATE 选项。用 pathOffset 减去每个点，然后将每个点与变换矩阵相乘。这在没有 ROTATE 的情况下有效。
这是一个使用 ROTATE 转换的示例：stackoverflow.com/a/53710375/4681279

标签： javascript canvas html5-canvas fabricjs

【解决方案1】：

下面是我用来在禁用 ROTATE 的情况下获取更新点的代码。但是，如果我在启用旋转选项的情况下使用下面的代码获取更新的点，并且在旋转对象后，我会得到错误的点集，所以现在我禁用了旋转选项。如果有人能说出如何修改下面的代码以启用旋转选项并获得正确的点集，那将是非常有帮助的。

<!-- fabric js -->
        canvas.on('object:modified', function(e) {
                var newCoordinates = "";
                var matrix = [];
                var polygon = canvas.getItemById(e.target.id);
                matrix = polygon.calcTransformMatrix();
                var translatedPoints = polygon.get('points').map(function(p) {
                    return {
                        x: p.x - polygon.pathOffset.x,
                        y: p.y - polygon.pathOffset.y
                    };
                });
                for (var i = 0; i < translatedPoints.length; i++) {
                    translatedPoints[i].x = matrix[0] * translatedPoints[i].x + matrix[2] * translatedPoints[i].y + matrix[4];
                    translatedPoints[i].y = matrix[1] * translatedPoints[i].x + matrix[3] * translatedPoints[i].y + matrix[5];
                }
                var newUpdatedPoints = JSON.stringify(translatedPoints);
            });

【讨论】：