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

Question

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

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

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

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

Answer 2

我相信问题出在这里：

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];

你正在根据变换后的点 x 变换点 y。这应该有效：

translatedPoints[i] = new fabric.Point(
    matrix[0] * translatedPoints[i].x + matrix[2] * translatedPoints[i].y + matrix[4],
    matrix[1] * translatedPoints[i].x + matrix[3] * translatedPoints[i].y + matrix[5]
)

无论如何，我认为使用 fabric.js 自己的转换函数比尝试实现它更好。

translatedPoints[i] = fabric.util.transformPoint(
    translatedPoints[i],
    matrix
)

在这篇文章中有更多关于这些转换背后的逻辑的细节。 披露：我是这篇文章的作者。