Find the coordinates of the corners of a rotated object in fabricjs

Question

Suppose I have an image in a fabricjs canvas. I can easily calculate the coordinates of the corners based on the image's top & left values, and its size.

How can I do so when the image is rotated by any degree?

Example:

EDIT: Preferably without the use of trigonometry, if there is a simpler method implemented in fabricjs itself or somewhere else.

Answer 1

Yes, of course.

We store those coordinates in object's oCoords

oCoords.tl.x, oCoords.tl.y // top left corner 
oCoords.tr.x, oCoords.tr.y // top right corner
oCoords.bl.x, oCoords.bl.y // bottom left corner
oCoords.br.x, oCoords.br.y // bottom right corner

That's what gets set when you call setCoords method.

But you probably don't want to mess with those.

Since version ~1.0.4, we have getBoundingRect method on all objects, which returns { left: ..., top: ..., width: ..., height: ... }. We already had getBoundingRectWidth and getBoundingRectHeight before (now deprecated) but getBoundingRect is certainly more useful; it allows to read left/top values as well.

You can see it in action at http://fabricjs.com/bounding-rectangle (try rotating objects)

More:
http://fabricjs.com/docs/fabric.Group.html#oCoords
http://fabricjs.com/docs/fabric.Group.html#calcCoords