变形后的点坐标？

Question

我有一个这样的图表：

点O位于矩形中并依赖于矩形边。

拖动B点（角落）后，矩形变形如下：

如何计算变形后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）;

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

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

Answer 2

我想重新计算O的新位置，你需要这样做：

1. 在移动B点之前，计算O每侧的哪个部分。即

   oPositionX = O.x /（B.x-A.x）; oPositionY = O.y /（B.y-C.y）;

2. 当您移动B时，您可以将O的新位置恢复为：

   O.x = oPositionX *（B.x-A.x）+ A.x; O.y = oPositionY *（B.y-C.y）+ C.y;

不确定算法，但我认为主要概念应该是这样的。