Sunil Mathew Sunil Mathew - 1 year ago 453
Javascript Question

Get position of object in a group in fabricjs relative to canvas after rotation of group via controls

I've figured out from SO post How to get the canvas-relative position of an object that is in a group? how to get the co-ordinates. And I managed to do some experimentation to get the co-ordinates when the group is scaled.

x = object.left * + +( *;

y = * + + ( *;

How to get x & y when the group is also rotated. I've come across the fabric.util.rotatePoint, but don't really know how to use it. I wish there was a function which would return the co-ordinates of a object relative to canvas taking account of where the originX, originY, scaling, rotation etc. Please do help. Thanks for reading.

Answer Source

I solved the problem by keeping track of scaling and using the transformation matrix.

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

The 5th and 6th values of the matrix is translation by definition but it also takes into account of the rotation, scaling for objects within the group. My intention to find the location of the object was to draw a line between two objects. I wanted to do it after the user resizes the canvas too.