如何确定多边形上某点的相对位置？

Question

我要从道歉开始，我正在努力表达这个问题，所以我将从我想要实现的目标开始。

我在拉斐尔使用Javascript。

所以，我试图存储一个点相对于多边形四角的位置。多边形的相对角可以看作在它们之间具有轴，该轴总是与另一个轴成直角。多边形可以在任一轴上旋转，生长/收缩，但轴将保持直角。我希望该点在移动/拉伸时保持在多边形上的相同位置。用户点击多边形上的某个点放置该点。

我希望能够获取鼠标点击的X / Y坐标，并将其转换为多边形内部轴的某个相对百分比或某些内容，这可能并不总是与浏览器的X / Y轴平行。我该怎么做？

这张图片可能有助于澄清我想表达的想法。

绿点是我想要存储多边形内相对位置的点。我有红色和蓝色角点的X / Y坐标。

Answer 1

考虑将两个红点连接到X轴的线，以及将蓝点连接到Y轴的线;然后你可以将多边形中的任何一点表示为“沿着X这个远，沿着Y”。这让你有两个问题需要解决：

1. 鉴于这五点，绿点的“红蓝”坐标是什么？
2. 给出四点和RB值，绿点在哪里？

您可以通过沿红轴将点投影到蓝轴上来实现此目的，反之亦然。

让红点的坐标为(R1x, R1y)等。然后我们执行以下操作：

RdirX = R2x - R1x;
RdirY = R2y - R1y;
BdirX = B2x - B1x;
BdirY = B2y - B1y;

现在，如果绿色坐标为(Gx, Gy)且“新”坐标为(RBr, RBb)，则您有以下等式：

RBr*RdirX + RBb*BdirX = Gx
RBr*RdirY + RBb*BdirY = Gy

在这种形式下，它解决了问题的第二部分（从RB坐标回到Euclidean）;为了进入另一个方向，你为未知数RBr和RBb求解这些方程。如果你将多边形的中心作为坐标系的原点，我怀疑事情会更好。

我已经完整地写出了方程式，并创建了一张图片，展示了这一切是如何运作的：




你应该可以从这里开始......