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
JS code to find new coordinate from a new corner and old bbox data
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