javascript - 识别拉斐尔路径上的点的位置

Question

我使用拉斐尔路径创建了一个多边形。可以拖动多边形的顶点来拉伸(stretch)以改变多边形的形状/大小。

测试正在运行here

现在我想要实现的是，如果我双击边缘，它应该创建一个新的顶点。这样它就可以充当拖动点。

谁能帮我确定路径中某个点的位置:

var p = r.path("M100,300L100,100L250,300z");

如果鼠标事件发生在 200,250，如何识别路径数组中的位置，是否适合新的点命令？

var p = r.path("M100,300L200,250L100,100L250,300z");

或者

var p = r.path("M100,300L100,100L200,250L250,300z");

Answer 1

我的实现略有不同，但如果太多，您可以随时调整它(实际上，我在鼠标单击鼠标时在多边形中插入新点，无论它在纸上的任何位置)。

一些自定义 Raphael 方法

• Raphael.el.MakeDraggable:添加处理程序以拖动任何元素(即点或多边形)
• Raphael.el.InsertPoint:在多边形中插入给定点(参数)

我的观点

• 使用Paper.circle()制作
• 可以用鼠标拖动

var oPaper = Raphael('#paper', '100%', '100%');
var oPoint = oPaper.circle(nX, nY, nRadius);
oPoint.MakeDraggable();

我的多边形

• 使用Paper.path()制作
• 通过 oPolygon.data() 绑定(bind)到包含其点的集合
• 可以用鼠标拖动

var oPaper = Raphael('#paper', '100%', '100%');
var oPolygon = oPaper.path(sPath);
oPolygon.InsertPoint(oPoint);

数学

这是我在多边形路径中插入新创建的点所遵循的两个步骤:

1. 遍历多边形的每条边并获取该边与该点的距离
2. 从较低的距离开始，假设应在两个点之间插入新创建的点

获取新点的距离

这两个步骤很容易理解，但很难实现(尤其是第一个)。这是第一步的详细说明。假设您正在多边形的每条边上循环(一条边等于 2 个点)，我们需要将所有距离提供给一个数组，以便获得最低的距离。

C +-------+ A                                           + M
   \      |             The shortest                   /     The shortest
    \     |             distance is [MG]              /      distance is [MA]
     \  G +--------+ M                        C +----+ A
      \   |                                      \   |
       \  |                                       \  |
        \ |                                        \ |
         \|                                         \|
          + B                                        + B

1. 迭代边的函数会获取两两点，加上新创建的点，即 3 个点，但让我们为第一次迭代编写它(作为示例)
2. 所以 oA 和 oB 是多边形边上的 2 个点，oM 是新创建的点
3. 深入研究你的数学，你应该能够得到 oG 的坐标，即 oM 在 oA 和 oB 连线上的平移点
4. 一旦获得了oG的坐标，有两种情况:
   • oG 位于 oA 和 oB 之间
     1. oM 位于 在 oA 和 oB 所构成的边的前面
     2. 所以返回的距离就是oM和oG之间的距离
   • oG 位于 oA 和 oB 组成的线段之外
     1. oM 不在 位于oA 和oB 所构成的边的前面
     2. 因此返回的距离是 oM 与 oA 或 oB 之间的距离，只需返回其中最小的 2
5. 现在您有 1 个距离，请在多边形的每一边上重复以获得其他距离

包含距离的数组现在应该包含 oM 和多边形边之间的所有距离。我们需要找到较低的(可以有多个具有相同的值)。因此，对其进行循环并构建另一个数组，其中将包含最小距离的索引。

决定哪一边是正确的

获得这个新数组后，检查其长度:

• 长度为 1:表示您的 oM 点位于在边的前面。您已经有了边的索引，请继续将您的点插入多边形的数据中
• 长度为 2:表示您的 oM 点不在边的前面。您有 2 个索引，将它们视为点索引，2 个点构成一条边，与上面相同，您现在可以将点插入多边形的数据中
• 长度为 3+(我相信您不需要):特殊情况，例如圆形(有很多点)和类似正方形的多边形，您可以在其中插入点中心

更多事情

// Don't forget to bind points to their polygon
oPolygon.data('points', oPoints);  // oPoints is a Raphael set containing the points

// There are different approaches, mine was to bind the other way as well
oPoint.data('polygon', oPolygon);