在一组重叠对象中查找被单击的对象

Question

两条线的交点有一个圆圈。如何确定鼠标是在圆圈、第 1 行、第 2 行还是其他地方单击？

我使用 if-then-else 梯形图在 view.onClick 函数中测试 object.hitTest。我先测试线条，然后测试圆圈。

当我在与线条重叠的区域内的任何地方单击圆圈时，所有三个 hitTest return HitResult。我该怎么做才能让当我点击圆上的任何地方时只有圆 hitTest 通过。

Answer 1

我不确定这是否是您想要做的，但您可以通过调用 project.hitTest().
一次点击测试所有项目只有最上面的项目会匹配。

这里是 sketch 演示解决方案。

var myLine1 = new Path.Line({
    from: [50, 50],
    to: [150, 50],
    strokeColor: 'black',
    strokeWidth: 10,
    name: 'myLine1'
});

var myLine2 = new Path.Line({
    from: [150, 50],
    to: [150, 100],
    strokeColor: 'black',
    strokeWidth: 10,
    name: 'myLine2'
});

var myCircle = new Path.Circle({
    center: [150, 50],
    radius: 10,
    strokeColor: 'red',
    fillColor: 'red',
    name: 'myCircle'
});

view.onClick = function(event) {
    var hitTest = project.hitTest(event.point);
    if (hitTest) {
        alert('Clicked on item: ' + hitTest.item.name);
    } else {
        alert('Clicked elsewhere');
    }
};

在一组重叠对象中查找被单击的对象

Finding object being clicked in a set of overlapped objects

paperjs