软硬度:在链接的文本区域监听“悬停”软硬、文本、区域、链接

2023-09-08 13:42:14 作者:无处告别

我试图找出当一个链接在文本区域显示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?

感谢

推荐答案

这是一个非常有趣的问题。用岛的建议下,我想到了一个,将返回矩形对象的阵列的方法,coresponding到的位置文本。我使用的是复数,因为可以有多个矩形需要,如果文本字敲击。

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);
}

假设我们创建了文本字段像这样:

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%的α,所以它们是看不见的。

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();
}

然后添加事件侦听器鼠标悬停

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'));
}

由于我们previously设置 buttonMode 属性,鼠标会改变光标,行为正是因为它本来如果在文本中的链接会起作用。

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.

我定义了很多的变量,以保持code更容易理解。在code可以缩短和优化,但它应该工作的罚款只是因为它是也。

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.

这是一个解决方法最简单的任务的地狱,但它的作品。希望这是Userful公司。

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