Search code examples
javascripthittestpaperjs

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


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?


Solution

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