旋轉圍繞fabric.js另一個對象的另一個獨立的對象

Question

請參閱下面的小提琴：https://jsfiddle.net/logie17/r5zptv4o/

我試圖做旋轉物體B.當是旋轉對象的對象B在我的旋轉功能看起來像這樣：

function rotate() { 
    let obj = boundingBox; 
    obj.setCoords(); 
    let angle = fabric.util.degreesToRadians(obj.getAngle()); 
    let center = obj.getCenterPoint(); 
    let origin = new fabric.Point(center.x, center.y); 
    let newCoords = fabric.util.rotatePoint(movingBox.getCenterPoint(),origin,angle); 
    movingBox.set({ left: newCoords.x, top: newCoords.y }).setCoords(); 
} 

但是正如你從小提琴中看到的那樣，物體A旋轉很快。我想保持旋轉的速度與旋轉對象B相同。任何幫助將不勝感激。

Answer 1

我能解決這個問題，我需要保存objectA的座標狀態和角度變化的增量。這裏是一個工作示例的演示：https://jsfiddle.net/logie17/r5zptv4o/10/

canvas.on("object:rotating", function(options){ 
    rotate(); 
}); 

let previousAngle = null; 
let origX = movingBox.getCenterPoint().x; 
let origY = movingBox.getCenterPoint().y; 
let line; 

function rotate() { 
    let obj = boundingBox; 

    origX = movingBox.getCenterPoint().x; 
    origY = movingBox.getCenterPoint().y; 
    let topLeftPoint = new fabric.Point(origX, origY); 

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

    if (line) { 
    canvas.remove(line); 
    } 
    line = new fabric.Line([ newCoords.x, newCoords.y, origin.x, origin.y ], { 
    fill: 'black', 
    stroke: 'black', 
    strokeWidth: 5, 
    selectable: false 
    }); 
    canvas.add(line); 
    movingBox.set({ left: newCoords.x, top: newCoords.y }).setCoords(); 
}