EaselJS图片处理

• Bitmap

使用Bitmap类可以非常方便的处理图片，Bitmap可以用来代表任何形式，比如，Canvas，视频或者图片，可以使用已经存在的元素实例化，或者使用base64。

var img = new Image();
  img.src = "http://www.gbtags.com/gb/laitu/200x200&text=GBtags/444444/ffffff";
  img.onload = handleImageLoad;
  
  //添加并且处理图片相关属性
  function handleImageLoad(){
      for(var i = 0;i<3;i++){
          var tempBitMap = new createjs.Bitmap(img);
          var randX = Math.floor(Math.random()* 500);
          var randY = Math.floor(Math.random() * 250);
          var randomColor = "#"+Math.floor(Math.random()*16777215).toString(16);
          var randomXOffset  = Math.floor(Math.random() * 10) + 5;
          var randomYOffset  = Math.floor(Math.random() * 10) + 5;
          stage.addChild(tempBitMap);
          tempBitMap.x = randX;
          tempBitMap.y = randY;
          tempBitMap.rotation = Math.floor(Math.random() * 360);
          tempBitMap.shadow = new createjs.Shadow(randomColor, randomXOffset, randomYOffset, 10);
      }
      stage.update();
  }

• Sprite

Sprite用来在SpriteSheet中显示一个动画或者一系列的动画帧，SpriteSheet是将一系列的图片整合到一张图片中，可以用来定义一个完整的动画。

var spritesheet = new createjs.SpriteSheet({
"images": [characterImage], //动画人物图片来自base64编码字符串
"frames": {"height": 96, "count": 10, "width": 75},
"animations": { run: [0,9]}
});

以上代码包含了三个重要的参数：

1. 图片定义（这里使用base64字符串编码图片）
2. 帧定义（定义图片中每一帧使用的图片大小）
3. 定义动画（比如，从开始到结束，或者定义成[0,1,2,3,4,5,6...]

播放动画可以使用sprite的play方法，停止可以使用stop或者gotoAndStop

window.onload=function(){

  var canvas = document.getElementById("myCanvas"),
    stage = new createjs.Stage(canvas);

  function setup() {
      var spritesheet = new createjs.SpriteSheet({
              "images": [characterImage], //动画人物图片来自base64编码字符串
              "frames": {"height": 96, "count": 10, "width": 75},
              "animations": { run: [0,9]}
          });
          
      var character = new createjs.Sprite(spritesheet, "run");
      character.framerate = 10; 
      character.play();//播放动画
      stage.addChild(character);

      createjs.Ticker.addEventListener("tick", tick);
  }
  
  function tick(event) {
      stage.update();
  }
  
  setup();
  
}

• Container

Container类是EaselJS中用来管理符合图形的单位，例如，我们可以将一个人物的，头，手，脚等等放置在统一的容器中，这样一来，可以统一的管理或者动画图形。虽然容器中每一个部分都可以单独的生成动画，但是容器中的子元素都可以统一使用容器的属性来控制。

window.onload=function(){
  var canvas = document.getElementById("myCanvas");
  var stage = new createjs.Stage(canvas);
  
  //创建容器
  var container = new createjs.Container();
  //添加容器到stage
  stage.addChild(container);
  
  stage.on("stagemousedown",moveContainer,null,false);
  
  function setup(){
      for(var i = 0;i<3;i++){
          var tempBitMap = new createjs.Bitmap('http://www.gbtags.com/gb/laitu/180x130&text=GBtags/222222/FFFFFF');
          tempBitMap.x = 0;
          tempBitMap.y = i * 140;
          
          //添加图片到容器
          container.addChild(tempBitMap);
      }
      stage.update();
      setTimeout(function(){stage.update()},1500);
  }
  
  //鼠标点击后出发的容器移动方法
  function moveContainer(){
      container.x +=20;
      stage.update();
  }
  
  setup();

}

• Cache

在图形处理中，往往会有一些图形不太变化，而每次都重新渲染会使得性能比较受影响。

在EaselJS中提供了cache()方法，这个方法可以帮助生成绘制时需要使用的图形到新画布里，它不会在每一个tick中被重新绘制，因此加载速度快，性能更好。

被cache的显示图形也可以自由的控制移动，旋转，淡入淡出等等属性，但图形变化了需要手动调用cache或者updateCache方法重新加载。

需要指定cache的矩形区域相关x, y, w,和h参数。

指定的这个矩形区域会被重新渲染和cache。

注意不要cache相关图形Bitmap类型元素，因为性能会受影响，但是可以cache相关的图片滤镜（filter）。

//获取stage
var canvas = document.getElementById("myCanvas");
var stage = new createjs.Stage(canvas);
var radius = 20;
var colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#222222"];

for(var i=0;i<500;i++){
  var shape = new createjs.Shape();
  shape.graphics.beginFill(colors[Math.random() * colors.length | 0]).drawCircle(0, 0, radius);

  //修改图形坐标
  shape.x = Math.floor(Math.random() * 200);
  shape.y = Math.floor(Math.random() * 350);
  shape.velX = Math.random() * 10 - 5;
  shape.velY = Math.random() * 10 - 5;
  shape.alpha = Math.random() * 1;
  
  //尝试注释掉如下cache代码，比较一下FPS值的区别和动画性能区别
  shape.cache(-radius, -radius, radius * 2, radius * 2);
  
  stage.addChild(shape);
}

//添加一个FPS，比较一下性能区别
var fpsLabel = new createjs.Text("-- fps", "normal 24px Arial", "#FFF");
stage.addChild(fpsLabel);
fpsLabel.x = 10;
fpsLabel.y = 20;

createjs.Ticker.addEventListener("tick", tick);

function tick(event) {
  var w = canvas.width + radius * 2;
  var h = canvas.height + radius * 2;
  var l = stage.getNumChildren() - 1;

  for (var i = 1; i < l; i++) {
    var shape = stage.getChildAt(i);
    shape.x = (shape.x + radius + shape.velX + w) % w - radius;
    shape.y = (shape.y + radius + shape.velY + h) % h - radius;
  }
 
  fpsLabel.text = Math.round(createjs.Ticker.getMeasuredFPS()) + " fps";
  
  stage.update(event);
}

• Filter(滤镜)

注意Filter需要在cache方法处理后的才可以执行，一旦图形变化了，需要再次调用cache，或者使用updateCache方法
EaselJS包含了一些内置的滤镜方法，如下：

• AlphaMapFilter : 将一个灰度图形映射到一个图形的阿尔法通道
• AlphaMaskFilter: 将一个图片的阿尔法通道映射到一个显示图形的阿尔法通道
• BlurFilter: 执行水平和垂直的模糊
• ColorFilter: 显示对象的颜色变形
• ColorMatrixFilter: 使用ColorMatrix1来变形图片

window.onload=function(){
  var canvas = document.getElementById("myCanvas");
  stage = new createjs.Stage(canvas)
  
  stage.on("stagemousedown",colorPicture,null,false);
  var randNum = Math.random();
  var windmill;
  function setup(){
      windmill = new createjs.Bitmap('http://www.gbtags.com/gb/laitu/350x400');
      stage.addChild(windmill);
      stage.update();
      setTimeout(function(){stage.update()},3000);
  }
  
  function colorPicture(){
     windmill.filters = [new createjs.ColorFilter(1,0,0,1), 
                           new createjs.BlurFilter(5, 5, 10)
                           ];
     windmill.cache(0, 0, 600, 400);
     stage.update();
  }
  setup();
}