fabric.js - 基于父母旋转“孩子”对象W/O分组

使用fabric.js（1.7.11），我试图让一个对象跟随另一个对象的旋转而不分组它们，同时保持相对子对象与父对象的位置。所以我相信我需要（1）将“子”对象的旋转中心设置为“父”的旋转中心，然后（2）在父对象正在旋转时，将该旋转增量应用于子对象（可能已经开始处于旋转状态）。最终的结果是这样的，孩子出现“卡壳”父（如在游戏板上粘音符，然后旋转游戏板）fabric.js - 基于父母旋转“孩子”对象W/O分组

这里是伪代码

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的引用，以及如何使用它旋转一条线的例子，但不是一个对象，并且不能进行心智转换。

来源

2017-10-05 emaybert

这是你想要做的事吗？ 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(); 
}

来源

2017-11-11 19:59:14 Logan

感谢洛根。这真是太棒了，90％的地方就是我一直在寻找的东西。最终的解决方案是让蓝色正方形与外部正方形一起旋转（就像现在一样），但不能让它自己旋转。 – emaybert

所以请注意，当它从蓝色方块的角落开始触及外红场时。在旋转过程中，此配置应保持不变。无论红色方块如何旋转，蓝色方块上的那个点总是触摸红色方块上的相同点。 – emaybert

我能想到的最好的比喻是照片放在地板上的游戏板。然后将粘滞便笺附加到游戏板上。然后旋转电路板。（粘滞音符跟随板的旋转但不独立旋转） – emaybert

fabric.js - 基于父母旋转“孩子”对象W/O分组

回答

相关问题