fabric.js - Rotation de l'objet "Child" basé sur Parent sans groupement

Question

En utilisant fabric.js (1.7.11), j'essaye d'avoir un objet qui suit la rotation d'un autre sans les grouper, et tout en maintenant le relatif position de l'objet enfant au parent. Donc je crois que je dois (1) définir le centre de rotation de l'objet "enfant" sur celui du "parent", puis (2) lorsque l'objet parent est en rotation, appliquer ce delta de rotation à l'enfant (qui peut déjà commencer dans un état de rotation). Le résultat final est telle que l'enfant semble « bloqué » au parent (comme une note collante sur un plateau de jeu, et vous tournez alors le plateau de jeu)

Voici le pseudo-code

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) 

} 

Voici un violon:

https://jsfiddle.net/emaybert/bkb5awj6/

Toute aide avec 1 ou 2 serait appréciée. Soit comment obtenir l'angle delta dans l'objet: callback tournant, et/ou comment faire pivoter un objet autour d'un point arbitraire. J'ai vu la référence à fabric.util.rotatePoint et un exemple de la façon de faire pivoter une ligne en l'utilisant, mais pas un objet, et ne pouvait pas faire cette transformation mentale.

Answer 1

Est-ce quelque chose que vous essayez de faire? 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(); 
}