CreateJS-EaseJS 应用

原文地址: http://code.tutsplus.com/tutorials/using-createjs-easeljs–net-34840
这篇教程中我们将探索CreateJS组件库。CreateJS是javascript的一个组件库，一个用于建立HTML5丰富交互体验的工具。CreateJS组件库分为以下四部分：

EaselJS - 使HTML5 canvas更容易绘制
TweenJS - 提供HTML5补间动画和javascript性能优化
SoundJS - 使HTML5 音频更容易工作
PreloadJS - 管理和协调正在加载的资源

首先我们开始看看EaselJS！

Easeljs Explained

EaselJS是一个为HTMl5 canvas工作的库。它由完整分层的显示列表，一个核心交互模型，和辅助类组成，使得用Canvas工作更容易。使用EaselJS并且运行它不能再容易了。你需要在你的HTMl文档中定义一个canvas元素，同时引用javascript代码。EaselJS使用舞台概念，一个在展示列表（这个舞台一般是你的canvas元素）中处于顶层容器中。下面的HTMl片段和相应的javascript需要设置Easeljs。

<canvas id="testCanvas" width="600" height="300"></canvas>

为了引用上面的canvas你应当使用如下代码：

var canvas = document.getElementById("testCanvas");
（译者注：根据最新的EaselJs版本0.8.2， 可以直接在new createjs.Stage时传入canvas的id，像这样var stage = new createjs.Stage('testCanvas');）
var stage = new createjs.Stage(canvas);

使用图形和形状类绘制

EaselJS用一个暴露简单API的图形类绘制指令生成矢量图和绘制具体内容。命令对于通常的HTML5 canvas来说很常见，而EaselJS也添加了一些自己的新命令。如果你不熟悉HTML5 canvas和绘制命令，你可能需要了解最新发布的Canvas 本质课程。通常情况下你不会通过自己使用图形类，更多的是访问形状类。下面的JSFiddle使用了图形类去绘制一些图形。

正如你看到的，上面的代码是链式调用命令。ShapeObject.graphics.setStrokeStyle(1).beginStroke("rgba(0,0,0,1) 你可能在方法里注意到一个调用stage.addChild()。你想要在任何时候放置一些东西在canvas上时，你必须调用stage.addChild()。通过使用drawShapes()方法，这里调用stage.update()。在每次改变canvas之后，为了能看到你的改变，你应该调用stage.update()。这有一个方法可以不必每次调用stage.update()，就是使用Ticker类。这个Ticker在一定间隔中提供了一个统一计时或者心跳广播。当经过一段设定的时间间隔后，监听器可以订阅计时事件通知。下面说明如何使用Ticker类去自动更新舞台。

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

这个形状类有大量完整的你可以调整的属性，比如x,y位置，透明度，横纵放大和其他的东西。下面的示例中展示了一些属性值。

使用drawTheShapes()函数，可以生成15个圆，中间有一道线穿过。使用链式调用来绘制是非常简单的。同时我们可以随机形状的位置，缩放，旋转和透明度。

你可以给这些形状绑定事件，比如使用on()方法吧绑定click,mousedown/over/out事件。这个例子中当你点击一个形状会有一个警告窗弹出，当你的鼠标移出时，在控制台会有一条消息出现。为了使鼠标事件在舞台上有效，你应该调用stage.enableMouseOver(frequency)，这个函数每经过一段时间会重复广播鼠标事件。这个操作代价很高，所以默认禁止的。

文字类

Easeljs 文字形状很容易创建文字，也容易在文本上改变属性。通过调用构造函数传入文字，字体，和颜色。比如：new cretejs.Text("Hello World", "20px Arial", "#ff7700") 像这样的形状类。`它同时赋有一些属性和方法。下面的小样利用了文本类实现。

像上一个小样，创建了25个文本格式，使用了随机值赋给他们。

位图

你可以利用位图类来使用图片。在展示列表里，一张位图代表一个图片，一块画布或者一个视频。它可以通过存在的HTMl元素或者64位字符串来实现。在这个例子中, new createjs.Bitmap('imagePath.jpg')
这里跟我们之前创建的三张位图很相似，它们也有一些随机属性。
我们使用阴影类创建一些阴影。这个类有以下几种参数，颜色，X偏移，Y偏移和模糊效果的大小。myImage.shadow = new createjs.Shadow('#000000', 5, 5, 10).你可以使用阴影在任何显示对象上，那么这个对文本也是有效的。

精灵图和精灵表单

一个精灵从一个精灵列表实例中显示一个画面或者一组连续的画面（像动画一样）。一张精灵表单是一系列图片组成（通常是动画帧）的一张图片。比如一个动画包含了八张100*100的图片组成400*200的精灵表单中（每行4帧，一共两行）。你可以显示单独的帧，播放多帧作为动画。甚至一系列动画连续播放。通过精灵表单和可选的帧序列或者动画来初始化精灵实例。比如：new createjs.Sprite(spriteSheet, 'run').这些数据通过精灵表单的构造函数定义了三部分重要的信息。

图片或者是图片列
每一帧图片的位置。这个数据代表两种方式。一种是作为有连续相同帧的规则网格或者在不规则的形状中独立定义变化的帧。
同样的，动画也有两种代表方式。一种是连续的帧，通过开始和结束【0,3】来定义，或者一个帧列表【0,1,2,3】来定义。

下面的一些代码初始化了一个角色精灵。

var data = new createjs.SpriteSheet({
"images": ["path/to/image.png"],
"frames": {"regX": 0, "height": 96, "count": 10, "regY": 0, "width": 75},
"animations": {"walk": [0, 9]}
});
character = new createjs.Sprite(data, "walk");
character.play();

这里有一个实例使用了精灵和精灵表单类。你可以点击这个舞台，然后使用“A”做移动，用“D”右移动。有件要注意的事，我使用了64位编码的图片。他们包含在了‘imagesstrings.js“外部资源中。因为使用了精灵表单和鼠标交互，画布会破坏跨域图片规则。通过使用64位编码我们可以克服这个问题。如果它在你自己的域里，你可以通常通过使用元素或者路径来使用这个位图类。
在setup（）方法里，我们创建了精灵表单。为images’关键字我传入包含64位编码的字符串characterImage。为”frames“关键字的角色图片传入96px的高和75px的宽，同时他们是十帧（分离的图片）。下面的图片是我们使用的spritesheet，你可以看到它们的样子。
为“animateion”关键字我们定义了一个”run”动画，从0到9帧中。最后，我们从spritesheet中创建了character。
当我们向左或者右移动角色时，调用了chatacter.play（）方法，当我们停止移动时调用了character.gotoAndStop(0)。因为我们只有一个动画我们可以只调用play（）和沟通AndStop（）如果你有一组动画，你应该用它们和gotoAndPlay()结合。

以下略去
Container 类
Cache() 方法
Filters 类

小结

这篇文章指导我们了解了EaselJS和制作了几个简单例子。希望这篇文章可以帮助到你，让你对EaselJS产生兴趣。感谢阅读！