Flex：在文本区域中搜索“悬停”在“链接”上

这是一个非常有趣的问题.使用Cay的建议,我想到了一个方法,它将返回一个Rectangle对象数组,对应于文本的位置.我正在使用复数,因为如果文本是单词敲击,则可能需要多个矩形.

function getPhraseLocation(phrase:String,field:TextField):Array {
    // initialise the return array
    var locations:Array = new Array();
    // find the first and last chars
    var firstChar = field.text.indexOf(phrase);
    var lastChar = firstChar+phrase.length;
    // determine the bounding rectangle of the first char
    var firstCharRect = field.getCharBoundaries(firstChar);
    var crtLocation:Rectangle = new Rectangle(firstCharRect.left,firstCharRect.top,firstCharRect.width,firstCharRect.height);
    // while there are chars left in the string
    var crtChar:uint = firstChar;
    while (++crtChar<lastChar)
        // if they're on the same line,expand the current rectangle
        if (field.getCharBoundaries(crtChar).y==crtLocation.y) crtLocation.width = uint(crtLocation.width)+field.getCharBoundaries(crtChar).width;
        // if they're on the next line,due to word wrapping,create a new rectangle
        else {
            locations.push(crtLocation);
            var crtCharRect = field.getCharBoundaries(crtChar);
            crtLocation = new Rectangle(crtCharRect.left,crtCharRect.top,crtCharRect.width,crtCharRect.height);
        }
    // add the last rectangle to the array
    locations.push(crtLocation);
    // return the array
    return(locations);
}

我们假设我们创建了TextField,如下所示：

var field:TextField = new TextField();
this.addChild(field);
// move the text field to some random coordinates
field.x = 50;
field.y = 50;
// set wordwrap to true,to test the multiline behaviour of our function
field.wordWrap = true;
// set a smaller width than our text
field.width = 300;
// disable selectability,I'm not sure it would work properly,anyway
field.selectable = false;
// fill the textfield with some random html text
field.htmlText = 'Lorem ipsum dolor sit amet,consectetur adipiscing <a href="http://www.stackoverflow.com">elit. Aliquam et</a> elementum lorem. Praesent vitae nunc at mi venenatis auctor.';

现在,为了拥有一个事件监听器,我们必须创建一个对象并在实际文本上绘制矩形.矩形以0％alpha绘制,因此它们是不可见的.

// create a sprite and add it to the display list
var overlay:Sprite = new Sprite();
this.addChild(overlay);
// enable mouse actions on it and make the cursor change on hover
overlay.mouseEnabled = true;
overlay.buttonMode = true;
// call the function that returns the size and position of the bounding boxes
var locationArray:Array = getPhraseLocation('elit. Aliquam et',field);
// draw each rectangle in white transparent fill
for each (var bounds:Rectangle in locationArray) {
    overlay.graphics.beginFill(0xff0000,0);
    overlay.graphics.drawRect(bounds.x+field.x-overlay.x,bounds.y+field.y-overlay.y,bounds.width,bounds.height);
    overlay.graphics.endFill();
}

然后为MouSEOver添加事件侦听器：

overlay.addEventListener(MouseEvent.MOUSE_OVER,mouSEOverHandler);
function mouSEOverHandler(evt:MouseEvent):void {
    trace('mouse over key phrase');
    // do whatever else you want to do
}

不幸的是,因为我们在实际文本上绘制了一些东西,所以链接变得不活跃因此,我们必须添加事件监听器以进行单击,还：

overlay.addEventListener(MouseEvent.CLICK,clickHandler);
function clickHandler(evt:MouseEvent):void {
    navigateToURL(new URLRequest('http://www.stackoverflow.com'));
}

因为我们之前将buttonMode属性设置为true,所以鼠标将更改其光标,其行为与文本中的链接有效时的行为完全相同.

我定义了很多变量,以保持代码更容易理解.代码可以缩短和优化,但它也应该正常工作.

对于最简单的任务来说,这是一个变通方法,但它确实有效.希望它是有用的.