在fabric.js 中围绕另一个对象旋转另一个独立对象

debugcn 发表于 Dev

洛根

请参阅以下小提琴：https : //jsfiddle.net/logie17/r5zptv4o/

我想要做的是在旋转对象 B 时围绕对象 B 旋转对象 A。我的旋转功能如下所示：

function rotate() {
  let obj = boundingBox;
  obj.setCoords();
  let angle = fabric.util.degreesToRadians(obj.getAngle());
  let center = obj.getCenterPoint();
  let origin = new fabric.Point(center.x, center.y);
  let newCoords = fabric.util.rotatePoint(movingBox.getCenterPoint(),origin,angle);
  movingBox.set({ left: newCoords.x, top: newCoords.y }).setCoords();
}

但是正如您从小提琴中看到的那样，对象 A 旋转得非常快。我想保持旋转速度与旋转对象 B 相同。任何帮助将不胜感激。

洛根

我能够解决这个问题，我需要保存 objectA 坐标的状态和角度变化的增量。这是一个工作示例的演示：https : //jsfiddle.net/logie17/r5zptv4o/10/

canvas.on("object:rotating", function(options){
  rotate();
});

let previousAngle = null;
let origX = movingBox.getCenterPoint().x;
let origY = movingBox.getCenterPoint().y;
let line;

function rotate() {
  let obj = boundingBox;

  origX = movingBox.getCenterPoint().x;
  origY = movingBox.getCenterPoint().y;
  let topLeftPoint = new fabric.Point(origX, origY);

  if (!previousAngle) {
    previousAngle = boundingBox.getAngle();
  }
  let angle = fabric.util.degreesToRadians(boundingBox.getAngle() - previousAngle);
  previousAngle = boundingBox.getAngle();
  let center = obj.getCenterPoint();
  let origin = new fabric.Point(obj.left, obj.top);
  let newCoords = fabric.util.rotatePoint(topLeftPoint,origin,angle);

  if (line) {
    canvas.remove(line);
  }
  line = new fabric.Line([ newCoords.x, newCoords.y, origin.x, origin.y ], {
    fill: 'black',
    stroke: 'black',
    strokeWidth: 5,
    selectable: false
  });
  canvas.add(line);
  movingBox.set({ left: newCoords.x, top: newCoords.y }).setCoords();
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。