transformJatrix中的变换点如何在fabricJS中起作用？

Question

我试图在fabric.Polygon的角上放置点（通过fabric.Circle制作）。多边形可以由用户移动，缩放或旋转。但是，每次修改后，我都希望将多边形的新坐标放置在那里。

在深入研究这个主题的过程中，我发现了this对变换矩阵的很好的解释。我认为这是我想达到的完美解决方案。但正如你在小提琴中看到的，我的点总是离开我的多边形。

因为我不坚定几何转换等我希望有人可以找到我的错误，并告诉我我失踪了:)谢谢。

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 { 
 
    border: 1px solid; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script> 
 
<p> 
 
Move, scale and rotate the polygon. The three red dots should match with the corners of the polygon after each modification. 
 
</p> 
 
<canvas id="c" width="600" height="400"></canvas>

---

相关的SO问题：

• How to get polygon points in Fabric.js
• Truly rotate center of equilateral triangle in Fabric.js
• How do I transform a particular point which has been modified and update the points array of polygon?
• FabricJs and Polygon transformed coordinates
• How to multiply each point with object's transform matrix?
• How do i get point coordinates after object modified?

Answer 1

不是一个真正的几何问题。 几何部分由您解决。如果你想看看内部多边形类从fabricjs你会注意到多边形作为calcDimension功能，每一个点得到偏移： http://fabricjs.com/docs/fabric.Polygon.html

要计算你需要添加转化之前偏移回帆布位置。

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 new fabric.Point(p.x - polygon.minX -polygon.width/2, p.y - polygon.minY - polygon.height/2); 
 
    }) 
 
    .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 { 
 
    border: 1px solid; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script> 
 
<p> 
 
Move, scale and rotate the polygon. The three red dots should match with the corners of the polygon after each modification. 
 
</p> 
 
<canvas id="c" width="600" height="400"></canvas>