Fabric.js: How to calculate the canvas-relative position of an object inside a rotated group

Question

No matter what angle you use to rotate the group containing the rectangle, the positioning of the rectangle inside its group is unchanged as expected.

This mean that the position of the rectangle after rotation in canvas-relative units must be calculated using the angle and the internal group parameters. But how?

When the group is not rotated, the position is calculated as nicely explained here: How to get the canvas-relative position of an object that is in a group? .

I have seen mentioned a few times that you can use a transformation matrix, but have yet to find a reference/example to explain that.

Any help, greatly appreciated.

Answer 1

To get the resolved position of a group selected objects you need to first get the transformMatrix from the object:

var matrix = fabricObject.calcTransformMatrix();

and then there is a fabric util to take that matrix and convert it in to the final values:

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

now finalValues will be an object that contains the resolved angle , scaleX , scaleY , skewX , skewY , translateX , translateY .

Note that translateX , translateY map to left and top on the normal fabricObject.