javascript – 如何使用transformMatrix转换点在fabricJS中工作？

我正试图在织物的角落放置点(通过fabric.Circle制作).Polygon.用户可以移动,缩放或旋转多边形.但是,在每次修改后,我想要使用多边形的新坐标来放置我的圆圈.

在深入研究这个主题的同时,我发现了转换矩阵的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?

解决方法:

不是一个几何问题.
几何部分由你解决.如果您从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>

标签：javascript,transform,fabricjs,transformation
来源： https://codeday.me/bug/20190925/1816189.html