EaselJS
EaselJS 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元素的引用，创建一个 stage
stage = 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.Stage
stage是显示列表的根容器。每次调用它的 'tick' 方法，都会将显示列表渲染到canvas里。
示例：
创建一个state，添加一个子到新建的stage实例内，之后使用 'Ticker' 来更新子元素，并使用 'update' 方法来重绘stage
var 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.Container
container是一个嵌套的显示列表，我们可以将多个显示列表组装在一个容器中。例如：我们可以创建一个 '人物' 的容器，包含胳膊、腿、身体以及头部的 '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.Point
point表示二维空间的一个点，由(x, y)定义
示例：
var point = new createjs.Point(100, 100);
4.Rectangle
rectangle表示一个矩形，由(x, y)点 + (x+width, y+height)定义
示例：
var rect = new createjs.Rectangle(0, 0, 100, 100);
5.Shape
shape允许我们创建一个矢量艺术(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.Shadow
shadow类封装了定义 '阴影' 所需要的属性，可通过 'DisplayObject' 的 'shadow' 属性，来应用阴影(意思：先创建一个阴影实例，然后每个显示元素，都可以使用它的shadow属性，来使用该阴影)
示例：
myImage.shadow = new createjs.Shadow('#000000', 5, 5, 10);
7.SpriteSheet
SpriteSheet类封装了 '精灵表单' 有关的属性和方法。精灵表单是将一系列图像(通常是动画帧)在一个规则的网格上合并为一张图片。例如：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®Y - 表示帧的注册点或 '原点'
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, speed
run: [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.SpriteSheetBuilder
SpriteSheetBuilder 允许我们在程序运行时，根据任何显示对象来生成 'SpriteSheet' 实例。这样就允许我们将我们的组件作为矢量图形(但更小尺寸)，并且运行时，将这些组件渲染为 '精灵表单'，更好的性能。
可以同步或异步来构建 '精灵表单'，以异步方式构建，生成大的 '精灵表单' 时，不会阻塞UI的渲染。
注意：用于生成 '精灵表单' 的图像，实际上是 canvas元素，并且会被调整到最大宽度或最大高度的最接近的2的幂次方。
10.SpriteSheetUtils
SpriteSheetUtils类是一个静态方法的集合，同 '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.BitmapCache
BitmapCache 是所有的缓存属性和需要的逻辑的一个内部表示，用于缓存一个对象。该信息和功能过去位于 '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);
微型API
Graphics 类也包含一个 '微型API'，对于 Graphics 的所有方法，都有一个对应的 一个或2个字母 的简写方法。对于创建紧凑指令时，非常棒！并且可以通过 CreateJS工具包来生成更好可读性的代码(可能会将简写方法替换为原方法)。所有这些微型方法都被标记为 'protected'。
缩写 - 原方法
mt - moveTo
a/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内置的滤镜有：
AlphaMapFilter
AlphaMaskFilter
BlurFilter
ColorFilter
ColorMatrixFilter
34.AlphaMapFilter
35.AlphaMaskFilter
36.BlurFilter
37.ColorFilter
38.ColorMatrixFilter
39.ColorMatrix
40.ButtonHelper
ButtonHelper 是一个帮助类，用于从 '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.Matrix2D
Matrix2D 表示仿射变换矩阵，并提供用于构造和连接矩阵的工具
矩阵可以被形象化为：
[a c tx
b d ty
0 0 1 ]
注意b 和 c的位置
42.MovieClip
MovieClip 类将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.MovieClipPlugin
MovieClipPlugin 插件同 TweenJS 一起工作，以防止 tweening 的 'startPosition' 属性。
44.Tiker
Tiker在特定的时间间隔内，提供集中的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.EventDispatcher
EventDispatcher 提供了管理事件监听器队列和分发事件的方法。
，我们可以来扩展 '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.DisplayObject
DisplayObject 是一个抽象类，不应该直接通过构造函数实例化。而应该通过它的子类构建，例如：Container,Bitmap,Shape。DisplayObject 是 EaselJS 库中所有显示类的基类。它定义了所有显示对象之间共享的核心属性和方法，例如：转换属性(x,y,scaleX,scaleY等)、缓存、mouse handlers(鼠标处理程序)。
53.DispalyProps
用于计算和封装，与显示相关的属性
54.EaselJS
EaselJS 是一个静态类，可获取类库的具体信息，例如：库的版本、构建日期等。
55.Utility Methods
工具方法
deprecate()
extend()
indexOf()
promote()
56.StageGL
StageGL实例是WebGL优化的显示列表的根级容器，用于替代通常的Stage。 除了特定于WebGL的功能之外，这个类应该和Stage相同。
57.WebGLInspector
WebGLInspector 是设计用于同 StageGL 一起使用的工具和帮助类，来帮助调查、测试性能或显示问题。它包含行为分析的日志功能和性能测试工具。
CreateJS-EaselJS文档翻译
猜你喜欢
转载自blog.csdn.net/beyond__devil/article/details/79000357
今日推荐
周排行