在图像上添加/编辑路径

Question

我有一个必须用几个轮廓标注的图像。我使用以下代码显示轮廓及其手柄：

const path = new paper.Path({
    segments: contours,
    strokeColor: "red",
    strokeWidth: 10
  });

轮廓是点的数组。这部分工作正常。

现在，我希望能够编辑上述轮廓。这个想法是，如果我（例如）双击某个细分，我应该可以删除它。

我看到了API方法：http://paperjs.org/reference/path/#removesegment-index。如果我有要删除的段的索引，则可以这样做。如何获取我点击过的细分的索引？

第二，我也希望可以更改轮廓的形状。为此，我希望能够移动手柄（我相信它对应于我用来绘制路径的x-y坐标）。我该怎么办？

第三，我希望能够绘制轮廓。 UX应该以以下方式工作：

• 当我单击图片时，它会添加一个点。
• 当我再次单击时，它会添加一个第二点，并在第一点和第二点之间绘制一个线段。
• 它会一直这样做，直到我单击第一个Point，然后它会关闭路径。

我想到的方法如下：

• 向视图添加一个onMouseDown事件处理程序。
• 如果我处于“添加新轮廓”模式，请点击添加一个点。
• 连接两个点时画一个线段。
• 如果我有3个或更多的点，然后再次单击第一个点，则会关闭路径。

我对此有两个疑问：

• 检查我在第一点附近是否单击过的最佳方法是什么？
• 如何确保我的形状不交叉？

另一个样式问题-如何设置手柄外观的样式？

感谢您的帮助， 拉胡尔