fabric.js - 基于父级旋转“子”对象，不带分组

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();
}