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-Text-simple.htm / htm



  <!DOCTYPE html>
  <html>
  <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <title>EaselJS Example: Text</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>
  
          <!-- We also provide hosted minified versions of all CreateJS libraries.
            http://code.createjs.com -->
  
          <script>
          var canvas;
          var stage;
  
          var txt;
          var shape;
          var count = 0;
  
          function init() {
                  //find canvas and load images, wait for last image to load
                  canvas = document.getElementById("testCanvas");
                  stage = new createjs.Stage(canvas);
  
                  // Create a new Text object, and position it on stage:
                  txt = new createjs.Text("text on the canvas... 0!", "36px Arial", "#FFF");
                  txt.x = 100;
                  txt.y = 80;
                  txt.rotation = 20;
                  //txt.outline = true;
                  stage.addChild(txt);
  
                  // this shape will be the background for the text:
                  shape = new createjs.Shape();
                  shape.x = txt.x;
                  shape.y = txt.y;
                  shape.rotation = txt.rotation;
                  stage.addChildAt(shape,0);
  
                  // we want to do some work before we update the canvas,
                  // otherwise we could use Ticker.addEventListener("tick", stage);
                  createjs.Ticker.setFPS(100);
                  createjs.Ticker.addEventListener("tick", tick);
          }
  
          function tick(event) {
                  count++;
  
                  // update the text:
                  txt.text = "text on the canvas... "+count+"!";
  
                  // draw a vector box of the appropriate width behind the text:
                  shape.graphics.clear().beginFill("#F00").drawRect(-10, -10, txt.getMeasuredWidth()+20, 36+20);
  
                  // update the stage:
                  stage.update(event);
          }
  
          </script>
  </head>
          
  <body onload="init();">
  
          <header id="header" class="EaselJS">
              <h1><span class="text-product">Easel<strong>JS</strong></span> Text Sample</h1>
              <p>Simple sample showing how to use <strong>Text</strong> elements, and the <strong>Text.getMeasuredWidth()</strong> method.</p>
          </header>
  
          <div class="canvasHolder">
                  <canvas id="testCanvas" width="960" height="400"></canvas>
          </div>
  </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.