topical media & game development

talk show tell print

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



  <!DOCTYPE html>
  <html>
  <head>
          <title>EaselJS demo: Mouse Events on Stage</title>
          <link href="../shared/demo.css" rel="stylesheet" type="text/css">
          <script src="../../lib/easeljs-0.6.0.min.js"></script>
          <script>
                  var stage, label, shape, oldX, oldY, size, color;
                  
                  function init() {
                          stage = new createjs.Stage("demoCanvas");
                          stage.enableDOMEvents(true);
                          label = new createjs.Text("finger paint", "24px Arial");
                          label.x = label.y = 10;
                          
                          shape = new createjs.Shape();
                          stage.addChild(shape, label);
                          
                          // set up our defaults:
                          color = "#0FF";
                          size = 2;
                          
                          // add handler for stage mouse events:
                          stage.addEventListener("stagemousedown", function(event) {
                                  size = 10;
                          })                
                          
                          stage.addEventListener("stagemouseup", function(event) {
                                  color = createjs.Graphics.getHSL(Math.random()*360, 100, 50);
                                  size = 2;
                          })
                           
                          
                      stage.addEventListener("stagemousemove",function(evt) {
                                  if (oldX) {
                                          shape.graphics.beginStroke(color)
                                                                    .setStrokeStyle(size, "round")
                                                                    .moveTo(oldX, oldY)
                                                                    .lineTo(evt.stageX, evt.stageY);
                                          stage.update();
                                  }
                                  oldX = evt.stageX;
                                  oldY = evt.stageY;
                          })
                          
                          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.