我有一个像这样的图表:



点O位于矩形中,并取决于矩形边缘。

拖动点B(角)后,矩形变形如下:



变形后如何计算O点的坐标?

我使用JavaScript工作,所以如果可以的话,我需要一种算法。谢谢大家,抱歉英语不好!

最佳答案

首先,获取您的点在矩形中的相对位置:

posXRel =(O.x-A.x)/(B.x-A.x);

posYRel =(O.y-A.y)/(B.y-A.y);

在四边形A’B’C’D’的线上找到这些相对坐标的位置

在A’B’中:
posAB.x = A’.x + posXRel *(B’.x-A’.x);
posAB.y = A’.y + posXRel *(B’.y-A’.y);

在B’C’中:
posBC.x = B’.x + posYRel *(C’.x-B’.x);
posBC.y = B’.y + posYRel *(C’.y-B’.y);

在C’D’中:
posCD.x = C’.x + posXRel *(D’.x-C’.x);
posCD.y = C’.y + posXRel *(D’.y-C’.y);

在D’A:
posDA.x = D’.x + posYRel *(A’.x-D’.x);
posDA.y = D’.y + posYRel *(A’.y-D’.y);

现在我们想要获得从posAB到posCD的线与从posBC到posDA的线之间的交点:

为此,我们需要设置等式:
对于这两行,Y = aX + b并得到a和b。

对于从posAB到posCD的行:

a1 =(posAB.y-posCD.y)/(posAB.x-posCD.x);

b1 = posAB.y-a1 * posAB.x;

对于从posBC到posDA的行:

a2 =(posBC.y-posDA.y)/(posBC.x-posDA.x);

b2 = posBC.y-a2 * posBC.x;

最后,我们正在寻找方程的解:

a1 * O’.x + b1 = a2 * O’.x + b2;

因此,您的新坐标应为:

O’.x =(b2-b1)/(a1-a2);
O’.y = a1 * O’.x + b1;

你能告诉我它是否有效吗?

09-20 18:30