Paper.js: hitTest for obstructed items with mouse event?

Question

I have two items one on the other, that is, one blocking the other. Say Item2 is blocked by Item1. Now whenever I use

project.hitTest(Item2);

It works fine.

But the problem occurs when I use mouse's event.point. When I use

project.hitTest(event.point);

in

function onMouseUp(event){} 

it only detects the item on top. Is is possible to detect all the items?

Answer 1

Maybe this will help you:
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';
}
}

It's not the best solution, because you have to loop through all your paths, but I don't know a better solution right now.

Answer 2

with newer paper.js version one direct way to get all Items is to use hitTestAll():

Performs a hit-test on the item and its children (if it is a Group or Layer) at the location of the specified point, returning all found hits.

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...
    }
}

alternative you can try to use the normal hitTest() with an options.match filter function. example2 - only returns a hit result if the bottom-most object is hit:

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

refer : http://paperjs.org/examples/hit-testing/

hittest must have hitoptions like

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

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