转自: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);