上周遇到一个需求,需要给一段TextField中的指定词设置不同的颜色和不同颜色的描边滤镜。

思路

  • 查找到字符在文字段落中的索引
  • 用 TextField 的 getCharBoundaries 方法获取字符所在的坐标和宽高
  • 使用位图和滤镜在指定字符的位置绘制相同大小的矩形,当然不同颜色的描边效果就要由多张位图实现
  • 文字本身的颜色使用 TextField 的 htmlText 属性来用 HTML 标签设置

实现代码

var text:TextField = new TextField();
text.htmlText = "ActionScript是Adobe为其Flash产品开发的 ,最初是一种简单的脚本语言,现在最新版本3.0,是一种完全的面向对象的编程语言,功能强大,类库丰富,语法类似JavaScript,多用于Flash互动性、娱乐性、实用性开发,网页制作和RIA应用程序开发。";;
text.width = 400;
text.height = 200;
text.x = 50;
text.y = 50;
text.multiline = true;
text.wordWrap = true;
text.defaultTextFormat = new TextFormat("Microsoft Yahei", 14, null, null, null, null, null, null, "center");
addChild(text);

var keyList:Array = [
  { key: "为其Flash产品开发", textColor: "#00DB00", boardColor: 0x000000 },
  { key: "面向对象", textColor: "#EAC100", boardColor: 0x00ff00 },
  { key: "类似JavaScript", textColor: "#0080FF", boardColor: 0xff0000 }
];

var bitmap:Bitmap;
var rect:Rectangle;
var index:int;
var charLength:int;
var originText:String = text.htmlText;
var removeHtmlRegExp:RegExp = new RegExp("<[^<]+?>", "gi");
for each (var keyObj:Object in keyList)
{
  // 为指字的关键词加上颜色
  text.htmlText = text.text.replace(keyObj.key, "<font color=\"" + keyObj.textColor + "\">" + keyObj.key + "</font>");
  // 获取没有html标签的文字,进行绘制描边
  originText = originText.replace(removeHtmlRegExp, "");
  index = originText.indexOf(keyObj.key);
  charLength = keyObj.key.length;
  // 创建位图
  bitmap = new Bitmap(new BitmapData(text.width, text.height, true, 0));
  bitmap.x = text.x;
  bitmap.y = text.y;
  bitmap.filters = [new GlowFilter (keyObj.boardColor, 1, 2, 2, 3, 3)];
  addChild(bitmap);
  // 为每个字符绘制描边
  for (var i:int = index; i < index + charLength; i++)
  {
    rect = text.getCharBoundaries(i);
    bitmap.bitmapData.draw(text, null, null, null, rect);
  }
}

结果

效果截图