EaselJSEaselJS javascript庫，為canvas提供了一個保留的圖形模式，包括：一個完整的分層顯示列表，一個核心的交互模型，以及一些幫助類，使得 Canvas 中的2D圖形更容易處理。Ea stlJS 為使用HTML5 Canvas的豐富圖形和交互性，提供了直接的解決方案。開始要開始使用 EaselJS，創建一個包裝了 'Canvas元素' 的 'Stage'，并添加 'DisplayObject' 實例作為子元素。EaselJS支持：1.使用 'Bitmap' 的圖像2.使用 'Shape' 和 'Graphics' 的矢量圖形3.使用 'SpriteSheet' 和 'Sprite' 的動畫位圖4.使用 'Text' 的簡單文本5.使用 'Container' 的容器，用于容納其他 'DisplayObject' 6.使用 'DOMElement' 控制HTML DOM元素所有的顯示對象都作為一個子，添加到 'stage'，或者直接繪制到 'canvas'用戶交互'stage' 中的所有顯示對象(除了 DOMElement)，在使用 '鼠標或觸摸' 進行交互時，會觸發事件。EaselJS 支持 hover, press, release事件，以及一個易于使用的 '拖放模型'。更多信息，查看 'MouseEvent'。簡單示例該示例演示了如果使用 'EaselJS' 的繪圖API，在 'stage' 上創建和定位一個 'Shape'// 傳遞canvas元素的引用，創建一個 stagestage = new createjs.Stage('canvas');// 創建一個 'Shape' 顯示對象circle = new createjs.Shape();circle.graphics.beginFill('red').drawCircle(0, 0, 40);// 定義 'Shape' 實例的位置circle.x = circle.y = 50;// 添加 'Shape' 實例到 'stage' 顯示列表stage.addChild(circle);// 更新 'stage' 來渲染下一幀stage.update();簡單的交互示例displayObject.addEventListener("click", handleClick);function handleClick(event){// 鼠標 click 事件}displayObject.addEventListener("mousedown", handlePress);function handlePress(event) {// 鼠標 mousedown 事件// 當鼠標按下，監聽鼠標 mousemove 事件event.addEventListener("mousemove", handleMove);}function handleMove(event) {}簡單動畫示例該示例在屏幕上，移動上面創建的 'Shape' 顯示對象// 更新 'stage' 來渲染下一幀createjs.Ticker.addEventListener('tick', handleTick);function handleTick(){// 圓將向右移動10個單位circle.x += 10;// 一旦超出 canvas 范圍，開始反方向運動if(circle.x > stage.canvas.width){circle.x = 0;}// 每個 'tick'，更新 'stage'，來渲染下一幀stage.update();}其他特點EaselJS也支持：1.Canvas功能，例如：'Shadow' 和 'CompositeOperation'(組合操作？)2.'Ticker'，對象可以訂閱的 '全局心跳檢測'(全局方位的定時器)3.濾鏡，內置 'ColorFilter', 'ColorMatrixFilter', 'AlphaMapFilter', 'AlphaMaskFilter', 'BlurFilter'4.'ButtonHelper' 工具，可以輕松創建交互式按鈕5.'SpriteSheetUtils' 和 'SpriteSheetBuilder' 在運行時，幫助構建和管理 'SpriteSheet' 功能瀏覽器支持所有支持Canvas的現代瀏覽器都將支持 EaselJS(查看：http://caniuse.com/canvas)。瀏覽器性能可能因平臺而異，例如：Android Canvas的硬件支持較差，平均速度比其他大多數瀏覽器要慢。1.Stagestage是顯示列表的根容器。每次調用它的 'tick' 方法，都會將顯示列表渲染到canvas里。示例：創建一個state，添加一個子到新建的stage實例內，之后使用 'Ticker' 來更新子元素，并使用 'update' 方法來重繪stagevar stage = new createjs.Stage('canvas');var image = new createjs.Bitmap('imagePath.png');stage.addChild(image);createjs.Tiker.addEventListener('tick', handleTick);function handleTick(event){image.x += 10;stage.update();}2.Containercontainer是一個嵌套的顯示列表，我們可以將多個顯示列表組裝在一個容器中。例如：我們可以創建一個 '人物' 的容器，包含胳膊、腿、身體以及頭部的 'Bitmap' 各個實例。可以將它們作為一個整體來移動，而組內的各個元素又是相對獨立，也可以相對移動。容器內的子元素的 'transform' 和 'alpha' 屬性 會和容器自身的 'transform' 和 'alpha' 屬性疊加。例如，一個 'x=100&alpha=0.5' 的 'Shape'，在一個 'x=50&alpha=0.7' 的容器內，最終渲染到畫布上的真實屬性為：'x=150&alpha=0.35'(注意：這里的x，并不是寬度，而代表x軸上的移動)。容器比較耗費性能，不要創建僅包含單個元素的容器示例：var container = new createjs.Container();container.addChild(bitmapInstance, shapeInstance);container.x = 100;3.Pointpoint表示二維空間的一個點，由(x, y)定義示例：var point = new createjs.Point(100, 100);4.Rectanglerectangle表示一個矩形，由(x, y)點 + (x+width, y+height)定義示例：var rect = new createjs.Rectangle(0, 0, 100, 100);5.Shapeshape允許我們創建一個矢量藝術(vector art)，添加到顯示列表中。'Shape' 可以同 'Graphics' 實例結合，可以暴露出所有的矢量繪圖方法。。 'Graphics' 實例可以在多個 'Shape' 實例之間共享，從而可以在不同的位置或變換時，顯示相同的矢量圖形。如果矢量藝術在繪制之間不會改變，我們可以使用 'cache' 方法來降低渲染成本。示例：var graphics = new createjs.Graphics().beginFill('#ff0000').drawRect(0, 0, 100, 100);var shape = new createjs.Shape(graphics);// Alternatively use can also use the graphics property of the Shape class to renderer the same as above(暫時不太理解)var shape = new createjs.Shape();shape.graphics.beginFill('#ff0000').drawRect(0, 0, 100, 100);6.Shadowshadow類封裝了定義 '陰影' 所需要的屬性，可通過 'DisplayObject' 的 'shadow' 屬性，來應用陰影(意思：先創建一個陰影實例，然后每個顯示元素，都可以使用它的shadow屬性，來使用該陰影)示例：myImage.shadow = new createjs.Shadow('#000000', 5, 5, 10);7.SpriteSheetSpriteSheet類封裝了 '精靈表單' 有關的屬性和方法。精靈表單是將一系列圖像(通常是動畫幀)在一個規則的網格上合并為一張圖片。例如：8張100x100的圖像組成的公話，可以合并到一個 400x200 的精靈表單上(4幀2行)。我們可以顯示單個幀，播放多個幀作為一個動畫，甚至將多個動畫組合在一起。SpriteSheet 構造方法的 'data' 參數定義如下：1.使用的圖像源(單個圖像或多個圖像)2.單個圖像幀的位置3.組成動畫的幀序列(可選)4.目標的播放幀率(可選)SpriteSheet 格式SpriteSheet 是一個對象，由2個必須屬性(images 和 frames)，以及2個可選屬性(framerate 和 animations)。以javascript代碼 或 json定義images源圖像數組。圖像可以是 'HTMLimage' 實例，或圖像url鏈接。前者建議使用 '預加載'images: [image1, '/xxx/images/xx.png']frames定義各個幀。支持2種形式的幀數據。1.當所有幀大小一樣(在一個網格內)，可以使用對象格式定義，witdth, height, regX, regY, count 屬性。width&height - 必須，指定幀大小regX&regY - 表示幀的注冊點或 '原點'spacing - 表示幀之間的間隙margin - 表示圖像周圍的邊距count - 指定 '精靈表單' 的幀的總數。如果省略，將基于源圖像和幀的尺寸來計算。幀將根據其在源圖像的位置來分配索引。(從左到右，從上到下)frames: {width: 64, height: 64, count: 20, regX: 32, regY: 64, spacing: 0, margin: 0}2.當幀具有不同尺寸時，使用數組來定義幀。每個幀一個數組，4個必須和3個可選元素。按下面順序：首先4個必須元素：x, y, width, height，定義幀的矩形形狀第5個元素：imageIndex，指定源圖像的索引(默認是0)最后2個元素：regX, regY，指定幀的注冊點frames: [// x, y, width, height, imageIndex, regX, regY[64, 0, 96, 64],[0, 0, 64, 64, 1, 32, 32],]animations可選。對象格式，定義幀序列，播放指定的動畫。每個屬性對應同名的動畫。每個動畫必須指定要播放的幀，還可以包括相對播放速度(例如：2-以2倍速度播放，0.5-以0.5倍速度播放)，以及播放完成后，下一個要播放的動畫名稱(next元素表示)支持3個定義方法，可按需要混合使用：1.單個幀動畫：animations: {sit: 7 }2.對于連續幀的動畫，可以使用一個數組，包含兩個必需元素和兩個可選元素，依次為：start, end, next, speed。這將從開始到結束，播放幀。animations: {// start, end, next, speedrun: [0, 8], // 跑的動畫jump: [9, 12, 'run', 2], // 跳，以2倍速度}3.對于不連續的幀，可以使用一個對象，包含 'frames', 'next', 'speed' 屬性。frames 屬性，是一個順序播放的幀索引的數組。animations: {walk: {frames: [1, 2, 3, 3, 2, 1]},shoot: {frames: [1, 4, 5, 6],next: 'walk',speed: 0.5,}}framerate可選。表示每秒播放幀的個數。可查看 'framerate' 了解更多相關信息framerate: 20注意：framerate只有當 使用 'Ticker' 的 'tick' 事件，來觸發 'stage' 更新后才生效。createjs.Tiker.addEventListener('tick', handleTick);function handleTick(event){stage.update(event);}示例：定義一個簡單的 '精靈表單'，使用一個簡單圖像 'sprites.jpg' 在一個規則的50x50的網格內，包含3個動畫：'stand' - 顯示第一幀，'run' - 循環播放索引為 1-5 幀(其實就是第2幀-第6幀)，'jump' - 6-8幀，序列完畢后再執行 'run'var data = {images: ['sprites.jpg'],frames: {width: 50, height: 50},animations: {stand: 0,run: [1, 5],jump: [6, 8, 'run'],}};var spriteSheet = new createjs.SpriteSheet(data);var animation = new createjs.Sprite(spriteSheet, 'run');生成 '精靈表單' 圖像可以手動在 'PhotoShop' 來合成，指定幀的大小和坐標。然而，有很多工具更好用：1.從 'Adobe Flash/Animation' 導出支持 'EaselJS SpriteSheet' 格式 的 '精靈表單' 或 HTML5內容。2.Texture Packer 支持 'EaselJS'(https://www.codeandweb.com/texturepacker/easeljs)3.使用 'Zoe' 可以導出 Adobe Flash/Animation 的 SWF動畫(http://createjs.com/zoe)圖像跨域問題(這是js自身問題，博客已經寫過好多了，這里不介紹了)加載跨域圖像時，會產生報錯在傳遞圖像給 EaselJS 之前，可設置圖像的 'crossOrigin' 屬性，或者在 'PreloadJS' 的加載隊列和加載條目上，設置 'crossOrigin' 屬性。var images = new Image();image.crossOrigin = 'Anonymous';image.src = 'http://xx/image/image.jpg';8.Sprite從 'SpriteSheet' 實例，顯示一幀或幀序列(即動畫)。精靈表單是將一系列圖像(通常是動畫幀)在一個規則的網格上合并為一張圖片。例如：8張100x100的圖像組成的公話，可以合并到一個 400x200 的精靈表單上(4幀2行)。我們可以顯示單個幀，播放多個幀作為一個動畫，甚至將多個動畫組合在一起。查看 'SpriteSheet' 類來了解更多設置幀和動畫的相關信息。示例：var instance = new createjs.Sprite(spriteSheet);instance.gotoAndStop('frameName');直到調用了 'gotoAndStop' 或 'gotoAndPlay' 方法，不然僅僅顯示 '精靈表單' 的第一幀9.SpriteSheetBuilderSpriteSheetBuilder 允許我們在程序運行時，根據任何顯示對象來生成 'SpriteSheet' 實例。這樣就允許我們將我們的組件作為矢量圖形(但更小尺寸)，并且運行時，將這些組件渲染為 '精靈表單'，更好的性能。可以同步或異步來構建 '精靈表單'，以異步方式構建，生成大的 '精靈表單' 時，不會阻塞UI的渲染。注意：用于生成 '精靈表單' 的圖像，實際上是 canvas元素，并且會被調整到最大寬度或最大高度的最接近的2的冪次方。10.SpriteSheetUtilsSpriteSheetUtils類是一個靜態方法的集合，同 'SpriteSheets' 一起工作。精靈表單是將一系列圖像(通常是動畫幀)在一個規則的網格上合并為一張圖片。例如：8張100x100的圖像組成的公話，可以合并到一個 400x200 的精靈表單上(4幀2行)。SpriteSheetUtils類使用一個靜態接口，并且不應該被實例化。11.Bitmap位圖代表顯示列表的一個image、canvas或video。可以使用一個已存在的HTML元素或字符串來實例化一個位圖。示例：var bitmap = new createjs.Bitmap('http://xxx/images/image.jpg');注意：1.當使用video源，可能循環或檢索，使用 'VideoBuffer' 對象來阻止閃爍2.當使用字符串路徑或圖片標簽時，資源還未加載，在資源顯示前，可能需要重繪 'stage'3.使用SVG源的位圖，目前不遵從 'alpha' 的值，只能是0或1。為了解決這個問題，可以緩存位圖4.使用SVG源的位圖，當加載跨域數據時，會污染canvas，將會中斷交互。這個問題，目前會發生在除了火狐的其他瀏覽器上。5.圖片跨域會發生報錯12.BitmapText使用定義在 '精靈表單' 的位圖符號來顯示文本。可通過換行(\n\r)字符，來支持多行文本，但不支持自動換行。查看 'spriteSheet' 屬性獲取關于定義字形的更多信息13.BitmapCacheBitmapCache 是所有的緩存屬性和需要的邏輯的一個內部表示，用于緩存一個對象。該信息和功能過去位于 'DisplayObject' 的 'cache' 方法，現在獨立為一個類。有點不好翻譯，暫停。。。14.Text在顯示列表上顯示一行或多行動態文本(用戶不可編輯)。支持自動換行(通過行寬)，也可通過 '空格' 或 'tab' 來換行。注意，作為一種替代文本，我們可以定位HTML文本在畫布上方或者下方，相對于顯示列表的元素，通過使用 'DisplayObject' 的 'localToGlobal' 方法，或使用 'DOMElement'注意：Text類不支持HTML文本，并且一次只能顯示一種字體。如果想使用多個字符，需要創建多個text實例，然后手動定位他們示例：var text = new createjs.Text('Hello World', '20px Arial', '#ff7700');text.x = 100;text.textBaseline = 'alphabetic';CreateJS Text類支持Web字體(同canvas規則一致)。在文本顯示之前，瀏覽器必須支持該字體，并預先已加載注意：生成文本比較消耗性能，因此盡可能使用緩存。注意，并非所有的瀏覽器完全一致的渲染文本(渲染可能不太一致)。15.Graphics - 圖形類'Graphics' 類公開了一個易于使用的API，用于生成矢量繪圖指令，并將其繪制到指定的上下文中。注意，我們可以使用 'Graphics'，而不依賴EaselJS框架，通過直接調用 'draw'，也可以使用 'Shape' 對象繪制矢量圖形，在EaselJS顯示列表的上下文環境內。有2種方法來使用 'Graphics' 對象：1.調用 'Graphics' 實例上的方法(Graphics API)2.實例化 Graphics 命令對象，并通過 'append' 方法將實例化的命令對象，添加到 graphics 隊列。方法1比方法2抽象，簡化了開始和結束路徑，填充以及描邊。var g = new createjs.Graphics();g.setStrokeStyle(1);g.beginStroke('#000000');g.beginFill('red');g.drawCircle(0, 0, 30);Graphics 的所有繪畫方法，返回 'Graphics' 實例，因此可以鏈式調用。例如：下面代碼生成 '繪制一個紅色邊框，藍色填充的矩形' 指令。var g = new createjs.Graphics();g.beginStroke("red").beginFill("blue").drawRect(20, 20, 100, 50);每個 Graphics API 調用，產生一個命令對象(看下面代碼)。可以用過 'command' 屬性來獲取最后一個創建的命令。(類似數據庫最后插入的id...)var g = new createjs.Graphics();var fillCommand = g.beginFill('red').command;// 之后，可更新填充顏色fillCommand.style = 'blue';// 或者，可更改為一個 bitmap 填充fillCommand.bitmap(myImage);為了更直接地控制渲染，我們可以直接將命令對象實例化并添加到 graphics 隊列中。在這種情況下，需要我們手動管理創建的路徑，以確保 填充/描邊 應用到指定的路徑上。var g = new createjs.Graphics();// 開啟一個新路徑。Graphics.beginCmd 是一個可重用的 'BeginPath' 實例g.append(createjs.Graphics.beginCmd);// 在應用填充前，需要定義路徑(圓形)var circle = new createjs.Graphics.Circle(0, 0, 30);g.append(circle);// 填充我們剛才定義的路徑var fill = new createjs.Graphics.Fill('red');g.append(fill);可以將這些方法一起使用，例如插入自定義命令：var g = new createjs.Graphics();g.beginFill('red');var customComand = new CustomSpiralCommand(etc);g.append(customComand);g.beginFill('blue');g.drawCircle(0, 0, 30);微型APIGraphics 類也包含一個 '微型API'，對于 Graphics 的所有方法，都有一個對應的 一個或2個字母 的簡寫方法。對于創建緊湊指令時，非常棒！并且可以通過 CreateJS工具包來生成更好可讀性的代碼(可能會將簡寫方法替換為原方法)。所有這些微型方法都被標記為 'protected'。縮寫 - 原方法mt - moveToa/at - arc/arcTo...(看文檔)簡寫方法示例：var g = new createjs.Graphics();g.s('red').f('blue').r(20, 20, 100, 50);16.Graphics.Arc繪制一段圓弧，根據：圓心、半徑、開始角度、結束角度、逆時針方向17.Graphics.ArcTo繪制一段圓弧，根據：2個坐標點，以及半徑18.Graphics.BeginPath開始一個新路徑19.Graphics.BezierCurveTo繪制一條 Bezier 曲線(貝塞爾曲線)20.Graphics.Circle繪制一個圓21.Graphics.ClosePath關閉當前路徑。在設置填充或描邊前，從當前繪圖點到第一個繪圖點，有效地繪制一條線。22.Graphics.Ellipse根據指定寬、高繪制一個橢圓23.Graphics.Fill使用指定顏色，開始填充24.Graphics.LineTo從當前繪圖點繪制一條線到指定位置，指定位置將成為新的當前繪圖點。注意：必須在第一次調用 'lineTo' 前，調用 'moveTo'。25.Graphics.MoveTo移動繪圖點到指定位置26.Graphics.PolyStar如果pointSize大于0，則繪制一個星形；如果pointSize為0，則繪制一個規則的多邊形，并顯示指定的點數。 例如，下面的代碼將繪制一個以(100, 100)為中心，半徑為50的熟悉的五角星var g = new createjs.Graphics();g.beginFill('#ff0').drawPolyStar(100, 100, 50, 5, 0.6, -90);27.Graphics.QuadraticCurveTo基于控制點(cpx, cpy)，繪制從當前繪圖點到(x, y)的二次曲線28.Graphics.Rect在(x, y)點處，使用當前填充或描邊，繪制一個指定寬、高的矩形29.Graphics.RoundRect繪制一個具有不同角半徑的圓角矩形。支持正、負角半徑。30.Graphics.Stroke使用指定顏色開始描邊31.Graphics.StrokeDash設置或清除筆畫(描邊？？)虛線模式32.Graphics.StrokeStyle設置描邊樣式。同所有繪畫方法一樣，該方法也可以鏈式操作，因此可以在一行代碼中定義描邊的樣式和樣色，例如：var g = new createjs.Graphics();g.setStrokeStyle(8,"round").beginStroke("#F00");33.Filter所有濾鏡應該繼承的基類。濾鏡應該用于已經使用緩存方法緩存過的對象上。如果對象改變，請再次緩存，或使用 'updateCache'。注意：濾鏡必須在緩存前應用！示例：myInstance.filters = [new createjs.ColorFilter(0, 0, 0, 1, 255, 0, 0);new createjs.BlurFilter(5, 5, 10);];myInstance.cache(0, 0, 100, 100);注意：每個濾鏡都可以實現 'getBounds' 方法，該方法返回濾鏡作用的邊界。例如：'BlurFilter' 會使對象向外羽化，從而在形狀周圍形成一個邊界。EaselJS內置的濾鏡有：AlphaMapFilterAlphaMaskFilterBlurFilterColorFilterColorMatrixFilter34.AlphaMapFilter35.AlphaMaskFilter36.BlurFilter37.ColorFilter38.ColorMatrixFilter39.ColorMatrix40.ButtonHelperButtonHelper 是一個幫助類，用于從 'MovieClip' 和 'Sprite' 實例創建交互式按鈕。該類將攔截來組對象的鼠標事件，并自動調用 'gotoAndStop' 或 'gotoAndPlay' 方法到相應的動畫標簽，添加一個手型光標，并允許用戶定義一個命中狀態幀。ButtonHelper 實例不需要添加到 'stage'，但是應該保留一個引用，來防止被垃圾回收。注意：除非調用 'enableMouseOver'，否則 (over states)過度狀態將不起作用示例：var helper = new createjs.ButtonHelper(myInstance, 'out', 'over', 'down', false, myInstance, 'hit');myInstance.addEventListener('click', handleClick);function handleClick(event){// 處理 click 事件}41.Matrix2DMatrix2D 表示仿射變換矩陣，并提供用于構造和連接矩陣的工具矩陣可以被形象化為：[a c txb d ty0 0 1 ]注意b 和 c的位置42.MovieClipMovieClip 類將TweenJS時間線與EaselJS容器關聯。允許我們創建封裝時間軸動畫，狀態更改和同步操作的對象。從0.7.0版本后，MovieClip類已包含在EaselJS的壓縮文件中。目前 MovieClip 僅基于tick可以正常工作(不能基于時間正常工作)，未來可以基于時間工作。示例：這個例子呈現兩個形狀往返運動。灰色形狀從左側開始，但我們使用 'gotoAndPlay' 跳轉到動畫的中點var stage = new createjs.Stage('demo');createjs.Ticker.addEventListener('tick', state);var mc = new createjs.MovieClip({loop: -1, labels: {myLabel: 20}});stage.addChild(mc);var child1 = new createjs.Shape(new createjs.Graphics().beginFill('#999999').drawCircle(30, 30, 30););var child2 = new createjs.Shape(new createjs.Graphics().beginFill('#5a9cfb').drawCircle(30, 30, 30););mc.timeline.addTween(createjs.Tween.get(child1).to({x: 0}).to({x: 60}, 50).to({x: 0}, 50););mc.timeline.addTween(createjs.Tween.get(child2).to({x: 60}).to({x: 0}, 50).to({x: 60}, 50););mc.gotoAndPlay('start');建議使用 tween.to() 來動畫和設置屬性()，tween.wait() 方法在動畫之間創建延遲。注意：使用 tween.set() 方法來設置屬性，可能不會達到我們預想的結果。43.MovieClipPluginMovieClipPlugin 插件同 TweenJS 一起工作，以防止 tweening 的 'startPosition' 屬性。44.TikerTiker在特定的時間間隔內，提供集中的tick或心跳廣播。監聽者可以注冊tick事件，當到達指定的時間間隔，會被通知。注意：tick事件的時間間隔是一個目標時間間隔，當在高CPU負載下，可能會廣播延遲。Tiker 類使用一個靜態接口(例如：Ticker.framerate = 30)，并且不能被實例化。示例：createjs.Ticker.addEventListener('tick', handleTick);function handleTick(event){// 每個tick執行的行為if(!event.paused){// 當tick未暫停時，執行的行為}}(應該就是js計時器，對其做了更多控制，而且集中式管理？？)45.UID用于生成順序唯一ID號的全局用程序。UID類使用一個靜態接口(例如UID.get())，且不應該被實例化示例：UID.get();46.VideoBuffer當搜索HTML video時，包括video循環時，在一個新幀可用前，有一個不確定的時期。這被渲染到canvas時，會導致video閃爍。VideoBuffer 類通過繪制每個幀到屏幕外的一個canvas上，同時在搜尋video期間保留上一幀，來解決閃爍問題。var myBuffer = new createjs.VideoBuffer(myVideo);var myBitmap = new Bitmap(myBuffer);47.Event事件對象，包含由 'EventDispatcher' 使用的在所有事件中共享的屬性和方法。注意：事件對象通常會被重用，所以不應該在事件調用外部，依賴事件對象的狀態。48.EventDispatcherEventDispatcher 提供了管理事件監聽器隊列和分發事件的方法。，我們可以來擴展 'EventDispatcher'，也可以使用 'EventDispatcher' 的 'initialize' 方法，將 'EventDispatcher' 的方法混合到現有的原型或實例中。與CreateJS Event類一起，EventDispatcher提供了一個基于DOM Level 2事件模型的擴展事件模型，其中包括 addEventListener,removeEventListener,dispatchEvent。支持 bubbling/capture,preventDefault,stopPropagation,stopImmediatePropagation,handleEvent。EventDispatcher 也暴露了一個 'on' 方法，使得創建有作用域的監聽器、只運行一次的監聽器、關聯任意數據的監聽器更加容易。'off' 方法僅僅是 removeEventListener' 的別名。針對 DOM Level 2事件模型的另一個補充是 'removeAllEventListeners' 方法，該方法可用于所有事件的偵聽器，或特定事件的偵聽器。'Event' 對象也包含一個刪除方法，可刪除所有激活狀態的監聽器。示例：1.將 'EventDispatcher' 功能添加到 'MyClass' 類EventDispatcher.initialize(MyClass.prototype);2.添加一個事件(查看 'addEventListener')instance.addEventListener('eventName', handlerMethod);function handlerMethod(event){// 事件處理}3.保持合適的作用域作用域(即：this)對于事件是個挑戰。使用 'on' 方法來訂閱事件，簡化了這點。instance.addEventListener('click', function(event){console.log(instance == this); // false，作用域不明確});instance.on('click', function(event){console.log(instance == this); // true，'on' 方法默認使用 'dispatcher' 的作用域});如果想使用 'addEventListener' 方法來替代，可能需要使用 function.bind() 或 相似的代理來管理作用域瀏覽器支持：CreateJS中的事件模型可以在任何項目中，與CreateJS套件分開使用，但繼承模型需要現代瀏覽器(IE9+)(意思就是：覺得CreateJS的事件模型好，我們也可以只使用CreateJS的事件模型到其他項目中)49.MouseEvent作為參數傳遞給所有 mouse(鼠標)/pointer(指針)/touch(觸摸) 相關的事件。有關 mouse 事件及其屬性的列表，查看 'DisplayObject' 和 'Stage' 事件列表50.Touch在 EaselJS 中，支持多點觸控設備的全局應用程序。目前支持 W3C Touch API(IOS和現代安卓瀏覽器)和指針API(IE)，包括IE10中的MS前綴事件，以及IE11的無前綴事件。確保當清除應用程序時，禁用touch。不需要檢查touch是否被支持來啟用touch，如果不支持，則以優雅的方式啟動失敗示例：var stage = new createjs.Stage('canvas');createjs.Touch.enable(stage);注意：當不再使用 'stage'，則禁用touch，這很重要！createjs.Touch.disable(stage);51.DOMElement該類仍在實驗階段，更多高級用法可能會導致bug。發現bug請報告。52.DisplayObjectDisplayObject 是一個抽象類，不應該直接通過構造函數實例化。而應該通過它的子類構建，例如：Container,Bitmap,Shape。DisplayObject 是 EaselJS 庫中所有顯示類的基類。它定義了所有顯示對象之間共享的核心屬性和方法，例如：轉換屬性(x,y,scaleX,scaleY等)、緩存、mouse handlers(鼠標處理程序)。53.DispalyProps用于計算和封裝，與顯示相關的屬性54.EaselJSEaselJS 是一個靜態類，可獲取類庫的具體信息，例如：庫的版本、構建日期等。55.Utility Methods工具方法deprecate()extend()indexOf()promote()56.StageGLStageGL實例是WebGL優化的顯示列表的根級容器，用于替代通常的Stage。 除了特定于WebGL的功能之外，這個類應該和Stage相同。57.WebGLInspectorWebGLInspector 是設計用于同 StageGL 一起使用的工具和幫助類，來幫助調查、測試性能或顯示問題。它包含行為分析的日志功能和性能測試工具。

總結

以上是生活随笔為你收集整理的CreateJS-EaselJS文档翻译的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。