how to find a rectangles corner when scaling by new corners X and Y?

42 Views Asked by At

i have a JS app that render a rectangle with coordinate of (1,5), (3,3) (5,5),(7,3) as clockwise start from topleft . if i drag topright corner i will get new x,y that will be 4,2 so my new rect coodiates will be [1,5 ], [4,2,] [6,4][3,7]

tell me the logic to calculate this even drag is in any corner the. relate point need to be recalculated with keeping the shape as rectangle attaching a image to better understand in the image dotted line is new line after dragging TR BR and TL need to be calculated

image

JS code to find new coordinate from a new corner and old bbox data

1

There are 1 best solutions below

0
MBo On BEST ANSWER

At first get dimensions of the initial rectangle

w = tr.x - tl.x
h = bl.y - tl.y

Moving TR creates new vector, find it's normalized version

dx = new_tr.x - tl.x
dy = new_tr.y - tl.y
new_w = sqrt(dx*dx+dy*dy)
udx = dx/new_w  
udy = dy/new_w  

Now

new_bl.x = tl.x - h * udy  //check signs in these two formulas
new_bl.y = tl.y + h * udx

new_br.x = new_bl.x + dx
new_br.y = new_bl.y + dy