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分組

回答

相關問題