Stage3D中用位图滤镜为动态文本描边

转自：http://jamesli.cn/blog/?p=1489

写本文有两个目的。一是在目前的项目中有这样的需求，总结了一点经验想和各位分享；二是在日益升温的Stage3D开发中，解决动态文本的位图化也让不少开发者头疼。这篇教程可以解决三个问题，一是把动态文本TextField变成位图，二是给这个文本描边儿，三是一定程度的消除锯齿。

下面我就举例说明我是如何来做的：

先在Flash里新建一个动态文本，字体Airal Bold，抗锯齿属性为设备字体，也就是不抗锯齿。颜色是白色。选择设备字体是因为对于大多数动态文本而言，我们很少会把一整个中文字库全部嵌入到应用中，所以使用默认字体和不抗锯齿其实是一个向文件体积妥协的方案。

然后创建一个Bitmap，把这个文本框draw成位图：

var bitmap:Bitmap = new Bitmap();
var bitmapData:BitmapData = 
new BitmapData(field.width+10,field.height+10, true,0x00);
bitmapData.draw(field,new Matrix(1,0,0,1,5,0));

接下来给这个位图加一个GlowFilter外发光滤镜，调整好参数，让它发浓郁并且清晰的黑光，实现描边：

bitmapData.applyFilter(bitmapData, bitmapData.rect,
new Point(), new GlowFilter(0x000000,1.0,2.0,2.0,10,2));

这时你会发现由于是系统字体，所以文本有明显的锯齿。为了减少锯齿对美观的影响，我选择了ConvolutionFilter，卷积滤镜，来把像素之间处理的圆滑一些。滤镜里使用了一个3×3的矩阵数组，其意义是让上下左右相邻的四个像素点来影响中间的颜色值，从而让整个位图轻微模糊。

var matrix:Array = [0,1,0,    1,1,1,0,1,0];
bitmapData.applyFilter(bitmapData, bitmapData.rect, new Point(), new ConvolutionFilter(3,3,matrix,3));

效果就是这个样子了，我认为对于不抗锯齿的动态字来说应该算是比较满意的一种方案。
例子就不提供下载了，因为所有的代码都在下面，朋友们可以根据自己的需求修改参数来达到自己想要的结果。

import flash.display.Bitmap;
import flash.text.TextField;
import flash.filters.*;
import flash.geom.Point;
 
var field:TextField = getChildByName("tf") as TextField;
var bitmap:Bitmap = new Bitmap();
var bitmapData:BitmapData = new BitmapData(field.width+10,field.height+10, true,0x00);
bitmapData.draw(field,new Matrix(1,0,0,1,5,0));
var matrix:Array = [0,1,0,
                    1,1,1,
                    0,1,0
                    ];
bitmapData.applyFilter(bitmapData, bitmapData.rect,new Point(), new GlowFilter(0x000000,1.0,2.0,2.0,10,2));
bitmapData.applyFilter(bitmapData, bitmapData.rect, new Point(), new ConvolutionFilter(3,3,matrix,3));
 
bitmap.bitmapData = bitmapData;
 
bitmap.x = field.x + field.width + 10;
bitmap.y = field.y;
 
addChild(bitmap);