Question

使用fabric.js（1.7.11），我试图让一个对象跟随另一个对象的旋转而不对它们进行分组，同时保持子对象与父对象的相对位置。所以我认为我需要（1）将“子”对象的旋转中心设置为“父”的旋转中心，然后（2）当父对象旋转时，将该旋转增量应用于子项（可能已经开始）处于旋转状态）。最终的结果是孩子看起来“卡在”父母身上（就像游戏板上的粘滞便笺，然后你旋转游戏板）

这是伪代码

canvas.on('object:rotating', canvasEvent_ObjectRotating);

function canvasEvent_ObjectRotating(e)
{
    // set r2'2 center of rotation = r1's center of rotation

    // r2.angle += ( delta of rotation of r1 angle ) 

}

这是一个小提琴：

https://jsfiddle.net/emaybert/bkb5awj6/

对1或2的任何帮助将不胜感激。要么如何在对象中获得角度增量：旋转回调，和/或如何围绕任意点旋转对象。我已经看到了对fabric.util.rotatePoint的引用以及如何使用它来旋转线的示例，但不是对象，并且无法进行心理转换。

Answer 1

这是你想要做的事情吗？ https://jsfiddle.net/logie17/ofr8e6qd/1/

function canvasEvent_ObjectRotating(e)
{
  origX = r2.getCenterPoint().x;
  origY = r2.getCenterPoint().y;
  let topLeftPoint = new fabric.Point(origX, origY);

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

  r2.set({ left: newCoords.x, top: newCoords.y }).setCoords();
}

fabric.js - 根据父级没有分组旋转“子”对象

1 个答案: