Flex:在文本区域中的链接上收听“悬停" [英] Flex: Listening for 'Hover' over Link in text area

问题描述

我试图找出链接何时在显示 html 文本的文本区域中悬停".我想知道是否可以监听光标更改类型的事件.我在文档中找不到任何内容.有人知道我可以在这里收听什么活动吗?

I am trying to find out when a link is 'hovered over' in a text area showing html text. I wonder if listening for a cursor change kind of event might be the way. I can't find anything in the docs. Has anyone any idea what event I could listen for here?

谢谢

推荐答案

这是一个非常有趣的问题.使用 Cay 的建议，我想到了一种方法，该方法将返回 Rectangle 对象的 Array，对应于文本的位置.我使用复数是因为如果文本是重读的话，可能需要多个矩形.

That's a very interesting problem. Using Cay's suggestion, I thought of a method that would return an Array of Rectangle objects, coresponding to the locations of the text. I'm using the plural because there can be multiple rectangles needed, if the text is word rapped.

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:

Let's assume we created the TextField like so:

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 绘制，因此它们不可见.

Now, in order to have an event listener, we must create an object and draw the rectangles over the actual text. The rectangles are drawn in 0% alpha, so they are invisible.

// 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添加事件监听器:

Then add the event listener for MouseOver:

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

不幸的是，因为我们在实际文本上绘制了一些东西，链接变得无效.因此，我们还必须为点击添加事件侦听器:

Unfortunately, because we draw something over the actual text, the links become inactive. Thus, we must add event listeners for click, also:

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

因为我们之前将 buttonMode 属性设置为 true，鼠标将改变其光标，表现得与文本中的链接有效时完全一样.

Because we previously set the buttonMode attribute to true, the mouse will change its cursor, behaving exactly as it would have been if the link in the text would have worked.

我定义了很多变量，以使代码更易于理解.代码可以被缩短和优化，但它也应该可以正常工作.

I've defined lots of variables, to keep the code easier to understand. The code can be shortened and optimized, but it should work fine just as it is, too.

对于最简单的任务来说，这是一种非常糟糕的解决方法，但它确实有效.希望有用.

It's a hell of a workaround for the simplest of tasks, but it works. Hope it's userful.

这篇关于Flex:在文本区域中的链接上收听“悬停"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！