topical media & game development

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) _
mobile-graphic-easel-examples-Masks.htm / htm

  <!DOCTYPE html>
  <html>
  <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <title>EaselJS Example: Mask test file.</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-Bitmap.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-display-Shape.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Rectangle.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-filters-Filter.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-filters-BoxBlurFilter.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-filters-ColorMatrixFilter.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-filters-ColorMatrix.js"></script>
  
          <!-- We also provide hosted minified versions of all CreateJS libraries.
            http://code.createjs.com -->
  
          <script>
          var img, star, stage;
      var scale;
          var angle;
          function init() {
          if (window.top != window) {
              document.getElementById("header").style.display = "none";
          }
          document.getElementById("loader").className = "loader";
  
                  //wait for the image to load
                  img = new Image();
                  img.onload = handleImageLoad;
                  img.src = "mobile-graphic-easel-examples-assets-photo-hires.jpg";
                  angle = 0;
          }
  
          function handleImageLoad() {
          document.getElementById("loader").className = "";
  
                  //find canvas and load images, wait for last image to load
                  var canvas = document.getElementById("testCanvas");
  
                  // create a new stage and point it at our canvas:
                  stage = new createjs.Stage(canvas);
                  
                  // masks can only be shapes.
                  star = new createjs.Shape();
                  // the mask's position will be relative to the parent of its target:
                  star.x = img.width/2;
                  star.y = img.height/2;
                  // only the drawPolyStar call is needed for the mask to work:
                  star.graphics.beginStroke("#FF0").setStrokeStyle(5).drawPolyStar(0,0,img.height/2-15,5,0.6).closePath();
  
                  var bg = new createjs.Bitmap(img);
                  // blur and desaturate the background image:
                  bg.filters = [new createjs.BoxBlurFilter(2,2,2), new createjs.ColorMatrixFilter(new createjs.ColorMatrix(0,0,-100,0))];
                  bg.cache(0,0,img.width,img.height);
                  stage.addChild(bg);
                  
                  var bmp = new createjs.Bitmap(img);
                  stage.addChild(bmp);
                  bmp.mask = star;
                  
                  // note that the shape can be used in the display list as well if you'd like, or
                  // we can reuse the Graphics instance in another shape if we'd like to transform it differently.
                  stage.addChild(star);
  
                  createjs.Ticker.addEventListener("tick", tick);
          }
          
          function tick(event) {
                  star.rotation += 5; 
                  star.scaleX = star.scaleY = 1.5+Math.sin(angle)*3;
                  stage.update(event);
                  angle+=0.025;
          }
  
          </script>
  </head>
          
  <body onload="init();">
  
      <div id="loader"></div>
  
          <header id="header" class="EaselJS">
              <h1><span class="text-product">Easel<strong>JS</strong></span> Masks</h1>
              <p>Demonstrates using a vector mask. Note that the mask <strong>Shape</strong> that defines the mask can also be placed on the display list (in this case the star shape is used both a mask, and the yellow border)</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) _
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.