如何从PaperJS中的CompoundPath识别鼠标事件的目标child路径？

Question

我正在将 'mousedown' 事件侦听器添加到 CompoundPath（而不是 children）。但我需要知道事件发生在哪个 child 上。事件 object 的 'target' 属性正在返回 CompoundPath。那么，解决办法是什么？

Answer 1

解决方案主要取决于您的具体用例。
但解决此问题的通用方法可能是在每个 CompoundPath children 的事件点进行命中测试，并推断出哪个事件触发了事件。
这是一个 sketch 演示解决方案。

const circle1 = new Path.Circle({
    center: view.center - 50,
    radius: 50
});

const circle2 = new Path.Circle({
    center: view.center + 50,
    radius: 50
});

const compoundPath = new CompoundPath({
    children: [circle1, circle2],
    fillColor: 'orange',
    onMouseDown: event => {
        if (circle1.hitTest(event.point)) {
            alert('circle 1 clicked');
        } else if (circle2.hitTest(event.point)) {
            alert('circle 2 clicked');
        }
    }
});

如何从PaperJS中的CompoundPath识别鼠标事件的目标child路径？

How to identify the target child path of mouse events from CompoundPath in PaperJS?

javascript

paperjs