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

时间:2009-08-03 14:29:50

标签: flex actionscript-3

我试图找出链接在显示html文本的文本区域中“悬停”的时间。 我想知道是否可以通过监听游标更改某种事件。我在文档中找不到任何内容。 有谁知道我能在这里听什么活动?

由于

4 个答案:

答案 0 :(得分:3)

这是一个非常有趣的问题。使用Cay的建议,我想到了一种方法,它会返回ArrayRectangle个对象,与文本的位置相对应。我正在使用复数,因为如果文本是单词,那么可能需要多个矩形。

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
}

不幸的是,因为我们在实际文本上绘制了一些东西,所以链接变为非活动状态。因此,我们必须为click点击添加事件监听器:

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

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

我定义了很多变量,以便让代码更容易理解。代码可以缩短和优化,但它也可以正常工作。

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

答案 1 :(得分:2)

您无法分配侦听器,但作为一种变通方法,您可以检查鼠标的位置并确定它何时悬停文本的某些部分......确定链接的矩形后(请参阅TextField.getCharBoundaries()你可以创建一个小精灵来监听事件,或检查矩形是否包含enterFrame上的Point(mouseX,mouseY)。

答案 2 :(得分:1)

AFAIK这是不可能的。您可以使用CSS来设置翻转时的链接样式(这是另一种痛苦)但您无法将翻转捕获为AS事件。您可以使用LINK事件捕获链接的点击。

答案 3 :(得分:1)

您可以使用TextEvent.LINK事件。按照移动应用程序的实现:

while(html.search("http://") != -1){
    html = html.replace("http://.", "event:"); 
    //it's necessary that the link contains the tag "event:" to the TextEvent.LINK event works.
}
StyleableTextField(textArea.textDisplay).htmlText = html;
StyleableTextField(textArea.textDisplay).addEventListener(TextEvent.LINK, link_clickHandler);
private function link_clickHandler(event:TextEvent):void
{
    var url:String = "http://" + event.text;
    // event.text contains the clicked URL
}