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上也可以看出区别:

QQ图片20190401173557.png

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

QQ图片20190401173904.png

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

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

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

QQ图片20190401174805.png

QQ图片20190401174931.png

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

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

QQ图片20190401172329.png

QQ图片20190401172452.png

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

那么如果做成动画补间呢?,下面再来看图片:

QQ图片20190401172804.png

image.png

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

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

dashang.jpg    

评论

0条评论

发表评论

电子邮件地址不会被公开。