javascript - 变形后的点坐标？

Question

我有一个这样的图表:

点 O 位于矩形内并依赖于矩形边缘。

拖动B点( Angular 点)后，矩形变形如下:

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

我使用 JavaScript 工作，所以如果可以的话，我想要一个算法。谢谢大家，对英语不好的地方表示歉意!

Answer 1

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

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);

公元前: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;

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