topical media & game development

talk show tell print

mobile-graphic-easel-tutorials-HitTest-globalToLocal.htm / htm



  <!DOCTYPE html>
  <html>
  <head>
          <title>EaselJS demo: globalToLocal</title>
          <link href="../shared/demo.css" rel="stylesheet" type="text/css">
          <script src="../../lib/easeljs-0.6.0.min.js"></script>
          <script>
                  var stage, holder;
                  function init() {
                          stage = new createjs.Stage("demoCanvas");
                          holder = stage.addChild(new createjs.Container());
                          holder.x = holder.y = 150;
                          
                          for (var i=0; i<25; i++) {
                                  var shape = new createjs.Shape();
                                  shape.graphics.beginFill(createjs.Graphics.getHSL(Math.random()*360,100,50)).drawCircle(0,0,30);
                                  shape.x = Math.random()*300-150;
                                  shape.y = Math.random()*300-150;
                                  holder.addChild(shape); 
                          }
                          
                          createjs.Ticker.addEventListener("tick", tick);
                  }
                  
                  function tick(event) {
                          holder.rotation += 3;
                          var l = holder.getNumChildren();
                          for (var i=0; i<l; i++) {
                                  var child = holder.getChildAt(i);
                                  child.alpha = 0.1;
                                  var pt = child.globalToLocal(stage.mouseX, stage.mouseY);
                                  if (stage.mouseInBounds && child.hitTest(pt.x, pt.y)) { child.alpha = 1; }
                          }
                          
                          stage.update(event);
                  }
          </script>
  </head>
  <body onLoad="init();">
          <canvas id="demoCanvas" width="300" height="300">
                  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.