EaselJS

[TOC]

EaselJS

用于 Sprites 、动画、向量和位图的绘制

EaselJS 的经常使用 API

• 画图片用 (Bitmap)
• 画图形，好比矩形，圆形等用 (Shape) 【相似于改变坐标x，y，增长阴影 Shadow ，透明度 Alpha ，缩小放大 ScaleX/ScaleY 均可以作到】
• 画文字，用 (Text)
• 还有容器 Container 的概念，容器能够包含多个显示对象

EaselJS 绘图的大体流程

建立显示对象→设置一些参数→调用方法绘制→添加到舞台→ update()

var canvas = document.querySelector('#canvas');
//建立舞台
var stage = new createjs.Stage(canvas);
//建立一个Shape对象，此处也能够建立文字Text,建立图片Bitmap
var rect = new createjs.Shape();
//用画笔设置颜色，调用方法画矩形，矩形参数：x,y,w,h
rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100);
//添加到舞台
stage.addChild(rect);
//刷新舞台
stage.update();

graphics 能够设置一些样式，线条宽度，颜色等等，也能够调用一些方法绘制图形，好比矩形 drawRect ，圆形 drawCircle 等等，具体能够本身查看 API。

注意：以上的步骤每一步都要有，不然页面不会有绘制的物体。

Tick 事件

对于有频繁发生改变的物体，若是在每一处变化都刷新舞台的话，代码会比较冗余，所以咱们能够写一个 Tick 事件，在每一次 Tick 的时候 update 舞台。

createjs.Ticker.addEventListener(“tick”, tick);
function tick(e) {
    if (e.paused !== 1) {
        //处理
        stage.update();  //刷新舞台
    }else {}
}
createjs.Ticker.paused = 1;  //在函数任何地方调用这个，则会暂停tick里面的处理
createjs.Ticker.paused = 0;  //恢复游戏

在暂停的时候，页面仍会触发 Tick 事件，若是须要彻底移除 Tick 事件，则使用

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

Ticker 帧频率

上面说的 Tick 事件，每一次触发的频率是能够修改的。理想的帧频率是 60FPS。

createjs.Ticker.setFPS(60);

CreateJS 的渲染模式

CreateJs 提供了两种渲染模式，一种是用 setTimeout ，一种是用 requestAnimationFrame ，默认是 setTimeout ，默认的帧数是 20 ，通常的话尚未什么区别，可是若是动画多的话，设置成 requestAnimationFrame 模式的话，就会感受到动画如丝般的流畅。

createjs.Ticker.timingMode = createjs.Ticker.RAF;

CreateJS 事件

EaselJS 事件默认是不支持 Touch 设备的，须要如下代码才支持：

createjs.Touch.enable(stage);

对于 Bitmap， Shape 等对象，均可以直接使用 addEventListener 进行事件监听。

bitmap = new createjs.Bitmap('');
bitmap.addEventListener（‘click’，handle）;

优化对所绘制物体的控制能力

控制多个显示对象的层级关系

Stage ， Container 对象有个 Children 属性表明子元素，是一个数组，里面的元素层级像下标同样从 0 开始，简单来讲就是后面的覆盖前面的（相似于z-index）,后 addChild 的对象则在数组的后面。
咱们也能够动态改变 Children 的层叠效果。

obj.parent.setChildIndex(obj, n);  //n为设置的层级

利用容器 Container

它能够包含 Text 、 Bitmap 、 Shape 、 Sprite 等其余的 EaselJS 元素，包含在一个 Container 中方便统一管理。
好比一辆汽车由汽车自己，气泡提示，加速效果，减速效果组成，咱们能够将这几个部分放在同一个 Container 中，统一移动。使用方法也比较简单：

var contain = new createjs.Container();
contain.addChild(bgImg);
contain.addChild(bitmap);
stage.addChild(contain);

咱们在后期会频繁对这个 Container 里面的元素进行操做，好比展现加速效果，取消展现减速效果。那咱们能够给这些元素设置name属性，以后能够直接使用 getChildByName 获取到该对象。

bitmap.name = ‘quick’; //设置name值
quick = this.stage.getChildByName(“quick”);  //使用name值方便获取到该对象
quick.visible = true; //显示该效果

绘制图像并对图像进行操做

绘制图片

var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();

按照上面的 EaselJS 的正常的绘制流程来讲，上面这段代码应该能够正常显示。可是，只是有些状况下能够正常显示的，这个图像资源须要肯定加载成功后才能够 new ，不然不会有图像在画布上，若是有作资源预加载，能够直接使用上面的代码，若是没有，则须要在 Image 加载完成 Onload 以后才进行绘制。

var img = new Image();
img.src = './img/linkgame_pass@2x.png';
img.onload = function () {
 var bg = new createjs.Bitmap("./background.png");
 stage.addChild(bg);
 stage.update();
}

仅仅绘制图片是不够的， CreateJS 提供了几种处理图片的方法：

给图片增长遮罩层

使用 mask 属性，能够只显示图片和 shape 相交的区域

stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;
//遮罩图形
shape = new createjs.Shape();
shape.graphics.beginFill("#000").drawCircle(0, 0, 100);
shape.x = 200;
shape.y = 100;
bg.mask = shape;     //给图片bg添加遮罩
stage.addChild(shape);
stage.addChild(bg);
stage.update();

经常使用应用场景：用来剪裁图片，好比显示圆形的图片等

给图片增长滤镜效果

var blur = new createjs.BlurFilter(5,5,1);
bg.filters = [blur];

咱们发现，图片仍是没有变模糊，缘由是图片添加了 Filter 后 Stage 当即刷新， Filter 只能保持一帧的效果，第二帧 Filter 则失效了。而使用图片的 cache() 方法后，可使得不管舞台怎么刷新，均可以保持住 Filter 的效果，添加 cache 还有不少做用，能够提升 FPS ，缓存等

bg.cache(0,0,bg.image.width,bg.image.height);

使用 Rectangle 剪裁图片

使用 EaselJS 内置的 Rectangle 对象来建立一个选取框，显示图片的某各部分。

stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;
var rect = new createjs.Rectangle(0, 0, 121, 171);
bg.sourceRect = rect;
stage.addChild(bg);
stage.update(e);

适用场景：拼图小游戏，剪裁图片……

具体的使用方法咱们都知道啦，接下来用一个小 Demo 练练手 – 实现一个无缝链接的背景图，模拟汽车加速的状态

this.backdrop = new createjs.Bitmap(bg);
this.backdrop.x = 0;
this.backdrop.y = 0;
this.stage.addChild(that.backdrop);
this.w = bg.width;
this.h = bg.height;

//建立一个背景副本，无缝链接
var copyy = -bg.height;
this.copy = new createjs.Bitmap(bg);
this.copy.x = 0;
this.copy.y = copyy;  //在画布上 y 轴的坐标为负的背景图长
//使用 CreateJS 的 Tick 函数，逐帧刷新舞台
createjs.Ticker.addEventListener("tick", tick);
function tick(e) {
   if (e.paused !== 1) {
        //舞台逐帧逻辑处理函数
        that.backdrop.y = that.speed + that.backdrop.y;
        that.copy.y = that.speed + that.copy.y;

        if (that.copy.y > -40) {
              that.backdrop.y = that.copy.y + copyy;
        }
        if (that.copy.y > -copyy - 100) {
              that.copy.y = copyy + that.backdrop.y;
        }
    }
    that.stage.update(e);
}

• demo体验连接： http://jdc.jd.com/fd/h5/peida...

参考

https://aotu.io/notes/2017/07...