topical media & game development

talk show tell print

mobile-graphic-easel-tutorials-Mouse-Interaction-hitArea.htm / htm



  <!DOCTYPE html>
  <html>
  <head>
          <title>EaselJS demo: onClick</title>
          <link href="../shared/demo.css" rel="stylesheet" type="text/css">
          <script src="../../lib/easeljs-0.6.0.min.js"></script>
          <script>
                  var stage;
                  function init() {
                          stage = new createjs.Stage("demoCanvas");
                          stage.enableMouseOver(10);
                          
                          var label1 = new createjs.Text("text without hitArea", "48px Arial", "#F00");
                          label1.x = label1.y = 10;
                          label1.alpha = 0.5;
                          
                          var label2 = new createjs.Text("text with hitArea", "48px Arial", "#00F");
                          label2.x = 10;
                          label2.y = 80;
                          label2.alpha = 0.5;
                          
                          // create a rectangle shape the same size as the text, and assign it as the hitArea
                          // note that it is never added to the display list.
                          var hit = new createjs.Shape();
                          hit.graphics.beginFill("#000").drawRect(0, 0, label2.getMeasuredWidth(), label2.getMeasuredHeight());
                          label2.hitArea = hit;
                     
                           label1.addEventListener("mouseover", handleInteraction);
                          label2.addEventListener("mouseover", handleInteraction);
                          
                          label1.addEventListener("mouseout", handleInteraction);      
                          label2.addEventListener("mouseout", handleInteraction); 
                          
                          stage.addChild(label1, label2);
                          stage.update();   
                          createjs.Ticker.addEventListener("tick", stage);
                  }
                  
                  function handleInteraction(event) {
                      event.target.alpha = (event.type == "mouseover") ? 1 : 0.5; 
                  }
          </script>
  </head>
  <body onLoad="init();">
          <canvas id="demoCanvas" width="500" height="150">
                  alternate content
          </canvas>
  </body>
  </html>


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.