command可以禁用吗 graphics_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 

})

下面是使用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 

})

(代码我写在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的也可以随便做个例子。

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

大家可以看到每一帧都变成了代码，代码非常多。

那么如果做成动画补间呢？，下面再来看图片：

大家可以看到，代码非常的少，所以animateCC用形状补间非常坑，试想一下你如果要做一个400帧的慢速变大动画，那代码量真的就是日了狗了。

最后总结一下，大家平时做动画如果用代码做的，用command或者直接clear重绘都可以，由于最终操作的都是指令，所以性能几乎没有多少差别。如果你是用animateCC来做动画，尽量少用形状补间，使用形状补间不仅会造成代码冗余，还会造成由于对象过多而卡顿。