fabric.js - 부모가 아닌 부모를 기준으로 "Child"객체를 회전합니다. 그룹화

Question

fabric.js (1.7.11)를 사용하여 한 객체를 그룹화하지 않고 다른 객체의 회전을 따르려고합니다. 부모 객체에 대한 자식 객체의 위치. 그래서 나는 (1) "자식"객체의 회전 중심을 "부모"의 회전 중심으로 설정 한 다음 (2) 부모 객체가 회전 할 때 해당 회전 델타를 자식에 적용해야합니다 (이미 시작할 수도 있음). 회전 된 상태에서). 여기

는 의사 코드

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) 

} 

입니다 최종 결과는 자녀가 부모에게 "붙어"가 표시되도록입니다 (게임 보드에 접착 노트와 같은, 당신은 다음 게임 보드를 회전) 1 또는 2에 어떤 도움을 주시면 감사하겠습니다

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

: 여기

는 바이올린입니다. 개체에서 각도 델타를 얻는 방법 : 콜백 회전 및/또는 임의의 지점에서 개체를 피벗하는 방법. fabric.util.rotatePoint에 대한 참조와이를 사용하여 선을 회전하는 방법의 예를 보았지만 객체가 아니라 정신적 변형을 할 수 없었습니다.

Answer 1

당신이하려는 일이 뭔가요? 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(); 
}