Search code examples
javascriptimagerotationcroptrigonometry

Quick and simple way to get min and max y for square within a rotated rectangle

So I'm trying to get the top left x,y values for the green box to crop an image that has been rotated into a square.

The green square can move left and right on the dotted line, so I'm able to get the x value, I'm just having a hard time getting the Y especially when the blue rectangle is a different aspect ratio.

So I know how much the blue rectangle has be rotated and with width and height, also the width and height of the bounding box and same for the green square.

So I need the min and max Y at a certain X value with a rotation between -10 - 10 degrees?

I'm using html and js right now.

the blue rectangle is a scrollable div that's rotated inside the square div so you can see a preview of the crop.

diagram: https://i.sstatic.net/FwXjZ.jpg

thanks

Solution

  • You can setup a line equation for the top and bottom side of the rotated rectangle: y1 = mx + b1, resp. y2 = mx + b2

    m is the slope, which is the tangent of the angle between the line and the x-axis. b is the intercept (the y-value at which the line intersects the y-axis; b = y(0)).

    Look at this site for more information.