[Math] Get vertex points of transformed rectangle knowing bounding box and transform matrices

coordinate systemsmatricestransformation

(I'm not a mathematician so talk down to me).

I have a rectangle that has been transformed by a series of matrix transforms.
I can recover the transform matrices and get the x,y coordinates of each point of the rectangle's bounding box. (Bounding box: another rectangle that has a constant rotation but scales to fit it's contents. Red rectangle in image below).

Is it possible to get the vertex coordinates of the corners of the transformed rectangle (blue) in image below, knowing only the coordinates of the red rectangle and the transformation matrices that caused the blue transform? Transform is scale,rotation,translation, and skew/shear.

enter image description here

Application: Web browsers allow complex transforms, but give limited information about the results of that transformation. The current method I use to get the vertices requires operations that force a screen redraw, which is not good for performance. If I can figure it out using only the information above it would be better.

EDIT:

I think I can get really close if I can figure out the local height and width of the transformed rectangle.

I started here: Calculate rotated rectangle size from known bounding box
But there are inaccuracies in this approach.
I can decompose the rotation, skew, and scale of the transformed rectangle, and I know the bounding box.

So I should be able to get the local height and width, I just don't know how yet…

Best Answer

I would start by running the source bounding box through the transformation. The vertices of the rectangle’s image must lie on the intersections of the image of the source bounding box with the destination bounding box. This might give you too many points, but it should give you a good starting point.

Related Question