Fabric.js: как рассчитать относительное положение холста объекта во вращающейся группе

Question

Независимо от того, какой угол вы используете для поворота группы, содержащей прямоугольник, расположение прямоугольника внутри его группы не изменяется, как ожидалось.

Это означает, что положение прямоугольника после поворота в единицах, относящихся к холсту, должно быть рассчитано с использованием параметров угла и внутренней группы. Но как?

Когда группа не повернута, позиция вычисляется как хорошо объясненная здесь: How to get the canvas-relative position of an object that is in a group?.

Я уже упоминал несколько раз, что вы можете использовать матрицу преобразования, но еще не нашли ссылку/пример, чтобы объяснить это.

Любая помощь, очень ценится.

Answer 1

Чтобы получить разрешенное положение группы выбранных объектов, которые необходимо сначала получить transformMatrix от объекта:

var matrix = fabricObject.calcTransformMatrix();

, а затем есть ткань Util взять эту матрицу и преобразовать его к конечные значения:

var finalValues = fabric.util.qrDecompose(matrix);

Теперь finalValues будет объект, который содержит разрешенный angle, scaleX, scaleY, skewX, skewY, translateX, translateY.

Отметьте, что translateX, translateY map to left и top на обычной тканиОбъект.