PaperJS如何在组项目中找到与鼠标事件最接近的项目

Question

我目前正在尝试使用PaperJS为复杂的大型SVG项目制作交互式编辑器。 SVG的所有路径都嵌套在Group对象内部，实际上Group对象的子代是CompoundPaths。

我希望能够通过鼠标单击在Path中选择特定的Group，但我不希望我的脚本在计算上（甚至更多）是沉重的，所以我不希望想要迭代所有路径项（少于1000个路径项，是的，我知道），或者必须尝试向组内的所有路径项添加事件处理程序。

我已经看到另一个answer，它在谈论选择最近的点，但是不幸的是，该方法不适用于“组”项目，所以解决方法是什么？ （如果有）

Answer 1

可以使用.hitTest()函数解决此问题，该函数也适用于Group对象。

使用鼠标事件（例如“ click”）时，在回调函数中只需使用事件中的点并将其输入<groupName>.hitTest()中即可。

请注意，这里的选项可能非常关键，请确保将“ class”选项指定为路径（或您正在寻找的其他合适的paperJS Item派生词。关于其他选项，我为命中测试仅在我选择的所有项目都已填充时才检测到填充，如果您的项目未填充，则将'stroke'设置为true而不是'fill'，然后确保单击路径边界而不是单击主体下面是在鼠标事件后进行点击测试的代码示例：

tool.onMouseDown = function(event) {
    var result = groupItem.hitTest(event.point, {fill: true, stroke: false, segments: false, class: Path});
    console.log(result);
    result.item.selected = true;