在修改对象后如何获得点坐标?

时间:2016-07-25 12:06:08

标签: javascript canvas html5-canvas fabricjs

我希望在修改对象后得到新的点坐标,但是当我在修改后获得点坐标时,它们与我绘制多边形的点坐标相同。 有人可以告诉我为什么会这样吗?以下是我的代码,

<div class="language">
<h2>Select Language:</h2>
<ul>
<li class="en" data-language="en">English</li>
<li class="de" data-language="de">Deutsch</li>
<li class="es" data-language="es">Español</li>
<li class="fr" data-language="fr">Français</li>
</ul>
</div>

1 个答案:

答案 0 :(得分:2)

下面是我用来获取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);
            });