我通过在画布上捕获鼠标点击然后将这些点传递给绘制多边形fabric.Polygon.所以,通过这种方式我绘制了多个多边形.
我需要知道的是,我想获得现在选择的多边形的鼠标坐标(画布上的像素点)？
我尝试过:
canvas.getActiveObject().get('points');
但这给了一些负面和一些积极的价值观.
那么,请你告诉我找出多边形点的方法吗？
我正试图fabric.Circle在一个角上放置点(通过)fabric.Polygon.用户可以移动,缩放或旋转多边形.但是,在每次修改后,我想要使用多边形的新坐标来放置我的圆圈.
在深入研究这个主题的过程中,我发现了转换矩阵的这个很好的解释.我认为这是我想达到的目标的完美解决方案.但正如你在小提琴中看到的那样,我的观点总是远离我的多边形.
由于我对几何变换等不太坚定,我希望有人能找到我的错误并告诉我我错过了什么:)谢谢.
var canvas = new fabric.Canvas("c", {selection: false});
var polygon = new fabric.Polygon([
new fabric.Point(200, 50),
new fabric.Point(250, 150),
new fabric.Point(150, 150)
]);
polygon.on("modified", function () {
var matrix = this.calcTransformMatrix();
var transformedPoints = this.get("points").map(function(p){
return fabric.util.transformPoint(p, matrix);
});
var circles = transformedPoints.map(function(p){
return new fabric.Circle({
left: p.x,
top: p.y,
radius: 3,
fill: "red",
originX: "center",
originY: "center",
hasControls: false,
hasBorders: false,
selectable: false
});
});
this.canvas.clear().add(this).add.apply(this.canvas, circles).setActiveObject(this).renderAll();
});
canvas.add(polygon).renderAll();canvas { …