AS3 Starling 下实现 文本的超链接功能
相信使用Starling开发的，在使用TextField时，会遇到，超链接文件功能不可用的问题；
看一下源码；就知道，毕竟他是在原生的TextField基础上实现的，将TextField draw成Texture然后放到GPU显示；
如果要实现链接功能；
那么有个思路：
1）、获取：超链接文本的显示内容；
2）、获取：超链接文件的链接内容；
3）、使用原生的TextField，计算，第1）点中的，所有显示内容的字符；并计算该所有字符的有效矩形区域；（在Touch或是Mouse交互时，作坐标与矩形区域判断）；
生成类型这样的数据结构，作为触发Link事件数据对象；
如：var data:Object = {rects:Vector.<Rectangle>, linkTxt:第2）点的链接内容}
这样在加上，Touch事件，判断Touch的End阶段事件，的x,y位置是否与上面的：rects有交集，有则触发事件，并将：linkTxt数据传过事件对象中即可；
下面给出一个GitHub国外人写好的一个（关键要看，回贴内容）
Textfields with hyperlinks
其中有个回贴有提供实现的另一种方式
Jave特别提示：Textfield width hyperlinks中的rects都union在一起，该方法最好还是不要联合一起，特别是对那些链接内容遇到换行时，那么矩形区域就会变得不准确；
自己写了个测试程序：
以下实现方式，我没写使用矩形与交互点的碰撞检测方式；
也是使用了，国外代码的写方，直接使用一个可交互的对象：Sprite
如果要使用矩形方式，那些就得对所有的rect都遍历并碰撞检测试；
如果要优化，还可以使用，四叉树，对矩形的合理分布区域，再做高交的选择性检测；
主要代码：
package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.filters.GlowFilter;
import flash.geom.Rectangle;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
/**
* 测试TextField超链接内容自定义的热区交互方式
* @author Jave.Lin
* @date 2013-9-29
**/
[SWF(width="1000", height="600")]
public class RegexpTestingProject extends Sprite
{
private var tf:TextField;
private var txt:String = "<a href='event:test'>测试</a>一下，这是带链接的文件信息，<a href='event:on link click event'>点击这里</a>，就可以超链接到<a href='event:http://www.baidu.com'>百度</a>";
private var hrefRegexp:RegExp = /<a.*?href=[""'](?<url>.*?)[""'].*?>(?<name>.*?)<\/a>|<(.|\n)*?>/g;
private var hotAreaSpArr:Array = [];
public function RegexpTestingProject()
{
stage.color = 0x888888;
stage.frameRate = 60;
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
tf = new TextField();
tf.x = 100;
tf.y = 100;
tf.autoSize = TextFieldAutoSize.LEFT;
var format:TextFormat = tf.defaultTextFormat;
format.color = 0xffffff;
tf.defaultTextFormat = format;
tf.setTextFormat(format);
tf.filters = [new GlowFilter(0, 1, 1.2, 1.2, 10)];
tf.htmlText = txt;
tf.mouseEnabled = false;
addChild(tf);
// 刷新超链接热区
refreshLinkHotArea();
}
private function refreshLinkHotArea():void
{
hotAreaSpArr.length = 0;
var result:Object;
var hrefsIndx:int;
while((result = hrefRegexp.exec(txt)) !== null)
{
const tag:String = String(result[0]);
const tagLength:int = tag.length;
const href:String = String(result[1]);
const value:String = String(result[2]);
trace("href = " + href + " value = " + value);
const data:Object = {href:href, value:value};
var sIdx:int = result.index - hrefsIndx;
var eIdx:int = sIdx + value.length;
var rect:Rectangle;
for (var i:int = sIdx; i < eIdx; i++)
{
rect = tf.getCharBoundaries(i);
if(!rect) continue;
// var key:String = toKey(rect);
// trace("key = " + key);
var hotArea:LinkHotArea = new LinkHotArea(rect, data);
hotArea.x = tf.x + rect.x;
hotArea.y = tf.y + rect.y;
addChild(hotArea);
hotAreaSpArr.push(hotArea);
}
hrefsIndx += tag.length - value.length;
}
}
public static function toKey(rect:Rectangle):String
{
var keyArr:Array = [
rect.x,
rect.y,
rect.width,
rect.height
];
var key:String = keyArr.join("_");
return key;
}
}
}
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
class LinkHotArea extends Sprite
{
public var data:Object;
public var rect:Rectangle;
public function LinkHotArea(rect:Rectangle, data:Object)
{
this.rect = rect;
this.data = data;
this.graphics.beginFill(0x00ff00, .5);//0);//.5);//这里换成.5，即可看到热区的位置，大小
this.graphics.drawRect(0, 0, rect.width, rect.height);
this.graphics.endFill();
buttonMode = true;
addEventListener(MouseEvent.CLICK, onClick);
}
private function onClick(e:MouseEvent):void
{
var rectKey:String = RegexpTestingProject.toKey(rect);
var dataStr:String = "";
for (var key:String in data)
{
dataStr += key + " = " + data[key] + ", ";
}
trace("LinkHotArea trigger : rectKey = " + rectKey + ", " + dataStr );
}
}
运行效果图：
