智慧 + 毅力 = 无所不能

正确性、健壮性、可靠性、效率、易用性、可读性、可复用性、兼容性、可移植性...

导航

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

Posted on 2013-01-10 12:03  Bill Yuan  阅读(811)  评论(0编辑  收藏  举报

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