Question

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

project.hitTest(Item2);

工作正常。

但是当我使用mouse的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...
    }
}

替代方案您可以尝试使用具有options.match过滤功能的普通hitTest()。 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 = { 细分：真的，中风：是的，填充：是的，公差：5 };

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

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

3 个答案: