确定raphael路径上某点的位置

Question

我使用raphael路径创建了一个多边形。可以拖动多边形的顶点以拉伸以更改多边形的形状/大小。

测试正在运行here

现在我要实现的是，如果我在边缘上进行dblclick，它应该创建一个新的顶点。所以它可以作为一个牵引点。

任何人都可以帮我确定路径中某个点的位置：

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

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

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

OR

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

Answer 1

我的实现略有不同，但是你可以随时调整它（如果这太多了（我实际上只要在纸上的任何地方点击鼠标就可以在多边形中插入新点）。

一些自定义拉斐尔方法

• 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()
的点的集合
• 可以用鼠标拖动

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

数学

为了在多边形的路径中插入新创建的点，我遵循了以下两个步骤：

1. 在多边形的每一边循环，并获得该边和点的距离
2. 从较低的距离，假设应插入新创建的点的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的坐标，oA的转换点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);