确定拉斐尔路径上一个点的位置

Identify the position of a point on raphael path

本文关键字：上一个 位置 路径      更新时间：2023-09-26

我已经使用拉斐尔路径创建了一个多边形。可以拖动多边形的顶点进行拉伸，以更改多边形的形状/大小。

测试在这里运行

现在我想要实现的是，如果我在边上进行dblclick，它应该创建一个新的顶点。这样它就可以作为一个拖动点。

有人能帮我确定路径上一点的位置吗：

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

如果鼠标事件发生在200250，如何识别路径阵列中的位置，新的点命令是否适合？

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

或

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

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

一些自定义的拉斐尔方法

  • 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的坐标，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点不在侧面前方。你有两个索引，把它们当作点索引，两个点组成一条边，和上面一样，你现在可以把你的点插入多边形的数据中
  • 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);
相关文章：