[心得] draw的技巧，说说Bit地图Data（附源码）

[心得] draw的技巧，说说BitmapData（附源码）
本帖最后由 Ryanliu 于 2009-3-24 09:53 编辑
http://uh.9ria.com/link.php?url=http://bbs.9ria.com/viewthread.php%3Ftid%3D23381


先看看这个例子：
http://www.ryan-liu.com/demo/bitmapdata/fancydraw.html

做上面这个效果，AS的技术点主要有三个，Matrix变形，ColorTransform和BitmapData的draw方法。这三个技术点串起了做BitmapData最基本的逻辑——也是最基本的思路。我先把draw的说明放这里：
draw(source:IBitmapDrawable, matrix:Matrix = null, colorTransform:ColorTransform = null, blendMode:String = null, clipRect:Rectangle = null, smoothing:Boolean = false):void
复制代码
先从思路说起。源码里除了被采样的动画是做在MC里，其他的效果只是通过一个draw来搞定的。我之前的例子里也用到了类似的效果，可以叫“残影”，“拖光”，“雾化”……怎么称呼都成的一个效果。完成这种效果的思路非常简单，为了更新采样动画，在每一个enterFrame里我们都会“重绘”，也就是把采样MC要draw在位图上。在BitmapData上draw跟你在纸上画画是一样的。假使你在一张纸上，每秒都沿着同一条直线方向画一个圆，如果你不另换一张纸，或者擦掉之前画的，那么你画的将是一串圆。同样，在BitmapData上不断的draw一个带动画的MC，你会把整个动画的过程都留在BitmapData上。但留整个过程不是我们的目的，所以我们加一个小技巧进去，我们把原来的BitmapData先加暗（或变淡），然后再重绘MC。这样之前的图就会逐渐暗（淡）掉，就形成了如上例中的效果。和以前在Flash里做残影相比，BitmapData实现真是再自然不过了。

怎么实现变暗/变淡呢，给BitmapData施加一个ColorTransform即可，如：

var transformMatrix:Matrix = new Matrix();var incX:int = sw/40;var incY:int = sh/40;transformMatrix.a = (sw + incX)/sw;transformMatrix.d = (sh + incY)/sh;transformMatrix.tx = -incX/2;transformMatrix.ty = -incY/2;

sw和sh是画布的宽和高，其实这就是在Matrix以中心点缩放的算法上略加了点变化。改改里面的参数，会看到更好玩的效果。

配合matrix和colortransform，BitmapData的draw就可以实现上例的效果了。这就构成了BitmapData效果的最基本思路。你还可以加入滤镜使效果更丰富，上例中我加了一个blur滤镜。完整的代码请看附件。

补充两点：
- 设置blendMode也可以实现不同的效果，自己试试
- “我不要残影怎么办！”，那就在重绘前将画布清空，用fillRect或干脆new一个BitmapData

最后：或许有人问，为啥例子中画面上部和下部看起来不同。这个我也很纳闷，而且一直没找到解释。也许只能让Adobe来回答了……这个问题已解决，根据ycccc8202的建议，用另外一个BitmapData复制画布的画面，让画布draw替代的BitmapData就不会出现问题。

补充：
为了美观，我网站上的例子都是比较综合性的应用。而我近期所发都只针对BitmapData相关知识。主要的用意在于专贴专讲。如果你有心学，越往后越会发现完成从前的例子易如反掌。如果大家对我所用的例子中其他技术点感兴趣，可以回复告知或密我。如果合适我另开贴逐步讲解。我的出发点是授人以鱼不如授人以渔，从我提供的源码到我所举的例子，最多你只多思考一小时而已。另外，悄悄的说一句，现在破解工具这么发达，swf还有秘密可言吗。

我所发的内容大部分是从我们团队的基础培训资料而来，从我们内部一年多的培训来看，这种专题专讲的方式的效果很好，只需要一点耐心而已。

查看更多 下一篇