0

I'm trying to register a hit test on a createJS label.

I have two questions:

1) As you can see from the pic below, hit test only register when I hover over the red ball, and not the label. I think this is because the ball's size is much larger. How can I get hit test for the label?

2) CreateJS documentation, http://www.createjs.com/tutorials/HitTest/hitTest.html, shows I need to put hitTest event inside tick. I would rather not put it in there because I don't want the browser to waste resources checking for hittest all the time. Can I put the hittest code in something like jQuery doc ready?

stage = new createjs.Stage("demoCanvas");
stage.mouseMoveOutside = true;

circle = stage.addChild(new createjs.Shape());
circle.graphics.beginFill("red").drawCircle(50,50,50);
circle.x = 0;
circle.y = 0;

mylabel = new createjs.Text("testing", "14px Arial", "white");
mylabel.x = 300;
mylabel.y = 100;
stage.addChild(circle, mylabel);                


function tick(event) {  
    if (circle.hitTest(stage.mouseX, stage.mouseY)) { 
        log("ball hit"); 
    }
    if (mylabel.hitTest(stage.mouseX, stage.mouseY)) { 
        log("label hit"); 
    }
    stage.update(event);    
}

enter image description here

user3871
  • 12,432
  • 33
  • 128
  • 268

1 Answers1

2

  1. It looks like the issue is that you are using global coordinates in .hitTest(), when it expects local coordinates. Use globalToLocal, or localX/Y (in the most recent EaselJS builds) to transform the mouse position.

  2. You can run hitTest any time you want. It can be on mouse move, click, on a timer - whatever makes sense for your application.

gskinner
  • 2,478
  • 11
  • 12
  • 1) I guess I don't fully understand localToGlobal vs globalToLocal vs localToLocal and 2) why don't I need to transform the red ball's coordinates? – user3871 Feb 18 '14 at 01:41
  • 3) Does the hitTest need to be in the tick Event for it to register on mousehover? – user3871 Feb 18 '14 at 01:49