javascript - Paper.js：hitTest 用于带有鼠标事件的阻塞项目？

Question

我有两个项目一个在另一个，即一个阻塞另一个。假设 Item2 被 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()：

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

示例：

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过滤功能的法线。 示例 2 - 只有在最底部的对象被命中时才返回命中结果：

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 必须有 hitoptions 之类的

var hitOptions = { 段：真，描边：真，填充：真，容差：5 }；

var hitResult = project.hitTest(event.point, hitOptions);