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