Paper.js：hitTest用于鼠标事件的阻塞物品？

Question

我有两个项目，一个阻止另一个。说Item1被Item1阻止。现在每当我使用

project.hitTest(Item2);

它工作正常。

但是当我使用鼠标的event.point时会出现问题。我用的时候

project.hitTest(event.point);

在

function onMouseUp(event){} 

它只检测顶部的项目。有可能检测到所有物品吗？

Answer 1

也许这会对你有所帮助： http://paperjs.org/reference/item/#contains-point

var path = new Path.Star({
center: [50, 50],
points: 12,
radius1: 20,
radius2: 40,
fillColor: 'black'
});

// Whenever the user presses the mouse:
function onMouseDown(event) {
// If the position of the mouse is within the path,
// set its fill color to red, otherwise set it to
// black:
if (path.contains(event.point)) {
    path.fillColor = 'red';
} else {
    path.fillColor = 'black';
}
}

这不是最好的解决方案，因为你必须遍历所有路径，但我现在还不知道更好的解决方案。

Answer 2

与较新的paper.js版本一直接获取所有项目的方法是使用hitTestAll()：

在指定点的位置对项及其子项（如果是组或层）执行命中测试，返回所有找到的命中。

example：

var hitOptions = {
    segments: true,
    stroke: true,
    fill: true,
    tolerance: 5,
};


function onMouseUp(event) {
    console.log('******************************************');
    var hitResult = project.hitTestAll(event.point, hitOptions);
    console.log('hitResult (' + hitResult.length + ')' , hitResult);
    if (hitResult) {
        // do something...
    }
}

替代方案，您可以尝试使用正常的hitTest()与options.match过滤功能。 example2 - 如果击中最底部的对象，则仅返回命中结果：

function hitMatchFilter(hitResult) {
    //console.log('hitMatchFilter:', hitResult);
    let flag_obj_is_first = false;
    if (hitResult.item) {
        let hititem = hitResult.item;
        if (hititem.parent.children[0] == hititem) {
            //console.log('hititem isFirst in parent child list');
            flag_obj_is_first = true;
        }
    }
    return flag_obj_is_first;
}

var hitOptions = {
    segments: true,
    stroke: true,
    fill: true,
    tolerance: 5,
    match: hitMatchFilter,
};

function onMouseUp(event) {
    console.log('******************************************');
    var hitResult = project.hitTest(event.point, hitOptions);
    console.log('hitResult', hitResult);
    if (hitResult) {
        // do something...
    }
}

Answer 3

参考：http://paperjs.org/examples/hit-testing/

hittest必须有像

var hitOptions = {segments：true，stroke：true，fill：true，tolerance：5};

var hitResult = project.hitTest（event.point，hitOptions）;