javascript - 在fabricJS 中使用transformMatrix 变换点是如何工作的？

Question

我正在尝试将点(通过fabric.Circle创建)放置在fabric.Polygon的 Angular 上。用户可以移动、缩放或旋转多边形。但是，每次修改后我都希望获得多边形的新坐标来将我的圆放置在那里。

在深入研究这个主题时，我发现 this对变换矩阵的很好的解释。我认为这是实现我想要实现的目标的完美解决方案。但正如您在 fiddle 中看到的那样，我的点总是远离我的多边形。

由于我对几何变换等不坚定。我希望有人能找到我的错误并告诉我我错过了什么:)谢谢。

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

要计算 Canvas 位置，您必须在转换之前添加该偏移量。

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>