topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

mobile-graphic-easel-examples-CurveTo.htm / htm



  <!DOCTYPE html>
  <html>
  <head>
      <title>EaselJS: Curve To Demo</title>
  
      <link href="mobile-graphic-easel-examples-assets-demoStyles.css" rel="stylesheet" type="text/css" />
  
      <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-UID.js"></script>
      <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Matrix2D.js"></script>
      <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-EventDispatcher.js"></script>
      <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-DisplayObject.js"></script>
      <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Container.js"></script>
      <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Stage.js"></script>
      <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-MouseEvent.js"></script>
      <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Shape.js"></script>
      <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Graphics.js"></script>
      <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-Ticker.js"></script>
      <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Text.js"></script>
      <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-ui-Touch.js"></script>
      <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Point.js"></script>
  
      <!-- We also provide hosted minified versions of all CreateJS libraries.
         http://code.createjs.com -->
  
      <script>
  
          var canvas, stage;
          var drawingCanvas;
          var oldPt;
          var oldMidPt;
          var title;
          var color;
          var stroke;
          var colors;
          var index;
  
          function init() {
              if (window.top != window) {
                  document.getElementById("header").style.display = "none";
              }
              canvas = document.getElementById("myCanvas");
              index = 0;
              colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"];
  
              //check to see if we are running in a browser with touch support
              stage = new createjs.Stage(canvas);
              stage.autoClear = false;
              stage.enableDOMEvents(true);
  
              createjs.Touch.enable(stage);
              createjs.Ticker.setFPS(24);
  
              drawingCanvas = new createjs.Shape();
  
              stage.addEventListener("stagemousedown", handleMouseDown);
              stage.addEventListener("stagemouseup", handleMouseUp);
  
              title = new createjs.Text("Click and Drag to draw", "36px Arial", "#777777");
              title.x = 300;
              title.y = 200;
              stage.addChild(title);
  
              stage.addChild(drawingCanvas);
              stage.update();
          }
  
          function stop() {}
  
          function handleMouseDown(event) {
              if (stage.contains(title)) { stage.clear(); stage.removeChild(title); }
              color = colors[(index++)\%colors.length];
              stroke = Math.random()*30 + 10 | 0;
              oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
              oldMidPt = oldPt;
              stage.addEventListener("stagemousemove" , handleMouseMove);
          }
  
          function handleMouseMove(event) {
              var midPt = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);
  
              drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);
  
              oldPt.x = stage.mouseX;
              oldPt.y = stage.mouseY;
  
              oldMidPt.x = midPt.x;
              oldMidPt.y = midPt.y;
  
              stage.update();
          }
  
          function handleMouseUp(event) {
              stage.removeEventListener("stagemousemove" , handleMouseMove);
          }
  
      </script>
  </head>
  <body onload="init();">
  
  <header id="header" class="EaselJS">
      <h1><span class="text-product">Easel<strong>JS</strong></span> CurveTo</h1>
      <p>This example demonstrates painting to the canvas using the vector drawing API in EaselJS</p>
  </header>
  
  <canvas id="myCanvas" width="960" height="400"></canvas>
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(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.