Search code examples
easeljscreatejs

easeljs: getObjectsUnderPoint does not return all shapes


I draw 2 shapes, one above the other. The getObjectsUnderPoint function returns only one shape even the point is part of both shapes. The point I get in addEventListener handler of the upper shape. Here is full jsfiddle example.

var stage;

function init() {
    stage = new createjs.Stage("canvas");
    var rect = new createjs.Shape();
    rect.graphics.beginFill("#ff0000").drawRect(10, 10, 100, 100);
    stage.addChild(rect);
    var circle = new createjs.Shape();
    circle.graphics.beginFill("#00ff00").drawCircle(60, 60, 40);
    circle.addEventListener("click", onClick);
    stage.addChild(circle);
    stage.update();
}

function onClick(e) {
    // the length should be 2: circle + rectangle, but is only 1 ???
    alert(stage.getObjectsUnderPoint(e.stageX, e.stageY).length);
}

Solution

  • This is a bug in 0.7.1 that has since been patched and is confirmed to be fixed in version 0.8.2 as Pim Schaaf has demonstrated with this fiddle. If you are stuck with version 0.7.1, you can use the workaround described here by iterating over the children of the container and calling hitTest(x, y) giving the mouseX and mouseY as parameters.