[心得] 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 ctm:ColorTransform = new ColorTransform(.9,.9,.9); //逐渐变黑
var ctm:ColorTransform = new ColorTransform(1,1,1,.9); //逐渐变淡
var ctm:ColorTransform = new ColorTransform(.9,.8,.8); //你自己猜

ColorTransform的参数调节跟Flash属性面板里调色（Color）的高级调色是一样的，非常简单直观。

以上就完成了做BitmapData效果的基本思路。图像描述物体的两个要素是颜色和形状，颜色已经搞定了，我们再试试变形。draw能通过设置一个matrix来完成变形。你可以看看Flash的帮助，如果你还不了解Matrix。就上例的效果，我给出一个简单的算法：

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还有秘密可言吗。

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