How to Calculate SVG rectangle coordinates using two sets of x,y?

287 Views Asked by At

I have two sets of the coordinates. How to calculate the coordinates of the rectangle using these two points? I have these points x1,y1 and x2,y2. How to calculate the coordinates of the dotted rectangle? The angle of the line formed by the two points will keep on changing. Thus calculating the rectangle points can only use the two points of the line.

enter image description here

Update 1:

The rectangle width and length can be based on our choice. Just that the rectangle should be within the bounds of the end points of the line.

1

There are 1 best solutions below

0
On

Form the vector $(x_2-x_1,y_2-y_1)$ from point $1$ to point $2$ and the vector $(y_1-y_2,x_2-x_1)$ normal to it, and normalize that latter vector to obtain a unit vector $\vec u$ along the short side. Then if the short side has length $w$ (you didn’t specify that), the four corners are $(x_1,y_1)\pm\frac w2\vec u$ and $(x_2,y_2)\pm\frac w2\vec u$.