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

Posted 2023-03-25

【中文标题】fabric.js - 基于父级旋转“子”对象，不带分组

【英文标题】：fabric.js - Rotate "Child" Object based on Parent w/o Grouping

【发布时间】：2018-03-17 04:49:07

【问题描述】：

使用 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 的引用以及如何使用它来旋转线条而不是对象的示例，并且无法进行这种心理转变。

【参考方案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();

【讨论】：

谢谢洛根。这太棒了，而且 90% 都在寻找我想要的东西。最终的解决方案是让蓝色方块与外部方块“一起”旋转（就像现在一样），但不让它本身旋转。

因此请注意，当它从蓝色方块的角开始接触外部红色方块时。在旋转期间，此配置应保持不变。无论红色方块如何旋转，蓝色方块上的那个点始终与红色方块上的同一点接触。

我能想到的最好的类比是想象一个游戏板放在地板上。然后在游戏板上贴一张便签。然后旋转板子。 （便签跟随板子旋转但不独立旋转）