旋转围绕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(); 
}