相关疑难解决方法(0)

如何围绕fabric.js中的一个指定点旋转？

有谁知道如何围绕fabric.js中的一个指定点旋转？例如,

var line1 = new fabric.Line([70, 20, 70, 100], {
    stroke: "#000000",
    strokeWidth: 6
});

Run Code Online (Sandbox Code Playgroud)

我想根据它的终点(70,100)旋转它,但不是它的中心.

javascript canvas fabricjs

htm*_*ter

2013 09-16

8
推荐指数

2
解决办法

5250
查看次数

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

我正试图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();

Run Code Online (Sandbox Code Playgroud)