graphics.command的用法及AS3和Createjs矢量的区别

今天又是一篇高级教程，不过api使用起来并不难，难的是理解里面的原理。好了，先来讲graphics.command的用法吧。

在flash年代，矢量（graphics）如果需要修改颜色或样式都是需要重绘的（clear）的，但是用createjs却不需要，只需要使用command保存绘图指令就可以。createjs的官网有改颜色的例子，我这里就放出画线的例子。先来看看如果不使用command的做法：

var point1 = new createjs.Point(50,50);
var point2 = new createjs.Point(200,200);
var shape = new createjs.Shape();
stage.addChild(shape)
createjs.Ticker.addEventListener("tick",function (event){
	
	shape.graphics.clear()
	shape.graphics.beginStroke("#ff0000").moveTo(point1.x,point1.y).lineTo(point2.x,point2.y).endStroke();
	point2.x--;
	if(point2.x < 0) point2.x = 200;
})

下面是使用command的做法：

var point1 = new createjs.Point(50,50);
var point2 = new createjs.Point(200,200);
var shape = new createjs.Shape();
stage.addChild(shape)
shape.graphics.beginStroke("#ff0000");
var moveCommand = shape.graphics.moveTo(0,0).command;
var lineCommand = shape.graphics.lineTo(0,0).command;
createjs.Ticker.addEventListener("tick",function (event){
	
	moveCommand.x = point1.x;
	moveCommand.y = point1.y;
	lineCommand.x = point2.x;
	lineCommand.y = point2.y;
	point2.x--;
	if(point2.x < 0) point2.x = 200;
})

先来看看效果：http://www.ajexoop.com/demo/command/graphics_command.html

fla下载地址：http://www.ajexoop.com/demo/command/graphics_command.fla

（代码我写在fla里面，不会animate的可以复制上面代码放到自己的文件里）

可以看到代码区别其实还是蛮大的，第一个的做法是每次都清除指令后再赋予绘制指令，第二个的做法是直接把绘制指令给改了，其实道理是差不多的。大家可以使用console.log(shape.graphics.instructions)代码来看绘制指令，都是一模一样的。

接下来，我再来讲一下AS3和Createjs矢量的区别，这个也是一个比较重要的知识点，牵扯到矢量的性能问题，听的云里雾里的人可以直接去看最下面的结论，并牢记。

那么开始，细心的童鞋可能会发现，我上面说了很多的绘制指令，这其实就是createjs的一个特点了，他存储矢量的方式并不是数据，而是指令，大家从api上也可以看出区别：

AS3由于用的是数据，所以几乎所有的api都不提供返回值，直接就把数据画到舞台上了，想要改变就只能clear。

但是createjs由于是指令，所以都有返回值，而且就因为是指令，所以他可以中途修改（AS3可以看做是已经画在纸上不能修改，只能撕掉，createjs可以看做是活版印刷，把印换了就好了），使用上面说的console.log(shape.graphics.instructions)可以看到指令集。

那么由于createjs的矢量图是根据存储的指令画出来的。那么这就会出现几个问题：

1：如果图片复杂，绘制指令会非常多，性能也会很差。这个问题adobe考虑到了，一般来说你用代码不会去画复杂矢量图形，毕竟谁也没那么空一句句打代码不是，但是用动画软件就不一定了，随便画几笔就是十几个绘图指令了，所以从animateCC诞生的时候他的矢量不管有多少，都是用一些编码来表示的（记住不是base64），然后用decodePath解码出来。这样无论多复杂的图形，至少绘制指令只有一句。

2：指令和指令之间是不可能有补间的（AS3因为是数据，他有内置的算法，所以可以自己演算补间），也就是说createjs的矢量和矢量时间是无法做形状补间的，那有人会问了，animateCC可以做形状补间啊，它是怎么做到的的呢？很简单，他直接发布成了逐帧动画。我来做一个例子，大家会animateCC的也可以随便做个例子。

我做了一个很简单的图形变大动画，使用形状补间做的，然后看图片：