topical media & game development

talk show tell print

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



  <!DOCTYPE html>
  <html>
  <head>
          <title>EaselJS demo: Mouse Events</title>
          <link href="../shared/demo.css" rel="stylesheet" type="text/css">
          <script src="../../lib/easeljs-0.6.0.min.js"></script>
          <script>
                  var stage, output;
                  
                  function init() {
                          stage = new createjs.Stage("demoCanvas");
                          
                          // to get onMouseOver & onMouseOut events, we need to enable them on the stage:
                          stage.enableMouseOver();
                          
                          output = new createjs.Text("Test press, click, doubleclick, mouseover, and mouseout", "14px Arial");
                          output.x = output.y = 10;
                          stage.addChild(output);
                          
                          var circle = new createjs.Shape();
                          circle.graphics.beginFill("red").drawCircle(0, 0, 50);
                          circle.x = circle.y = 100;
                          circle.name = "circle";
                          stage.addChild(circle);
                          
                          var square = new createjs.Shape();
                          square.graphics.beginFill("green").drawRect(-50, -50, 100, 100);
                          square.x = 250;
                          square.y = 100;
                          square.name = "square";
                          stage.addChild(square);
                          
                          // add a handler for all the events we're interested in:
                          circle.addEventListener("click", handleMouseEvent); 
                          circle.addEventListener("dblclick", handleMouseEvent);
                          circle.addEventListener("mouseover", handleMouseEvent); 
                          circle.addEventListener("mouseout", handleMouseEvent);
                                                                                                                                             
                          square.addEventListener("click", handleMouseEvent); 
                          square.addEventListener("dblclick", handleMouseEvent);
                          square.addEventListener("mouseover", handleMouseEvent); 
                          square.addEventListener("mouseout", handleMouseEvent);
                          
                          stage.update();
                  }
                  
                  function handleMouseEvent(evt) {
                          output.text = "evt.target: "+evt.target+", evt.type: "+evt.type;
                          
                          // to save CPU, we're only updating when we need to, instead of on a tick:1
                          stage.update();
                  }
          </script>
  </head>
  <body onLoad="init();">
          <canvas id="demoCanvas" width="500" height="200">
                  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.