컨트롤을 통해 그룹을 회전 한 후 캔버스를 기준으로 한 fabricjs 그룹의 오브젝트 위치를 얻습니다.

Question

좌표를 얻는 방법은 How to get the canvas-relative position of an object that is in a group?에서 알 수 있습니다. 그룹을 확장 할 때 좌표를 얻으려면 몇 가지 실험을했습니다.

x = object.left * object.group.scaleX + object.group.left + (object.group.width/2) * object.group.scaleX;

y = object.top * object.group.scaleY + object.group.top + (object.group.height/2) * object.group.scaleY;

그룹도 회전 할 때 x &을 얻는 방법. fabric.util.rotatePoint를 보았지만 실제로 사용하는 방법을 모른다. 원점 X, 원점, 크기 조절, 회전 등을 고려하여 캔버스를 기준으로 객체의 좌표를 반환하는 함수가 있었으면 좋겠다. 읽어 주셔서 감사합니다.

Answer 1

스케일링을 추적하고 변환 행렬을 사용하여 문제를 해결했습니다.

var matrix = object.calcTransformMatrix(); 
x = matrix[4] // translation in X 
y = matrix[5] // translation in Y 

제 5 및 6 행렬의 값은 정의에 의해 번역이지만도 그룹 내의 객체에 대해 스케일링, 회전 고려한다. 객체의 위치를 ​​찾는 나의 의도는 두 객체 사이에 선을 그리는 것이 었습니다. 사용자가 캔버스 크기를 조정 한 후에도이 작업을 수행하려고했습니다.