フレックス：「ホバー」をテキストエリアのリンクで聞く

Question

htmlテキストを表示するテキストエリアで、リンクが「ホバーオーバー」されているかどうかを調べようとしています。 私は、カーソルの種類のイベントをリッスンするのが邪魔になるのではないかと思います。私はドキュメントで何かを見つけることができません。 ここで私が聞くことができるイベントは誰にもありますか？

ありがとうございました

Answer 1

これは非常に興味深い問題です。 Cayの提案を使用して、ArrayのRectangleオブジェクトを返し、テキストの場所に対応するメソッドを考えました。テキストが単語ラップされている場合、複数の矩形が必要なので、私は複数を使用しています。

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.'; 

さて、イベントリスナーを持つために、我々はオブジェクトを作成する必要がありますし、実際のテキストの上に長方形を描く：

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を作成したと仮定しましょう。四角形はアルファベットで描かれているため、見えません。

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

を、それがされているだろうと我々は以前、マウスが正確に動作し、そのカーソルを変更しますtrueにbuttonMode属性を設定しているので、テキスト内のリンクを希望の場合働いています。

コードをわかりやすくするために、多くの変数を定義しました。コードを短縮して最適化することもできますが、それだけでもうまくいくはずです。

これは非常に簡単な作業の回避策ですが、機能します。ユーザーフレンドリーであることを願っています。

Answer 2

AFAIKこれはできません。 CSSを使用してロールオーバー時にリンクのスタイルを設定することもできますが、これは別の痛みですが、ロールオーバーをASイベントとして取得することはできません。 LINKイベントを使用してリンクのクリックをキャプチャできます。

Answer 3

リスナーを割り当てることはできませんが、回避策として、マウスの位置を確認してテキストの一部をホバリングしているかどうかを判断できます。リンクの矩形を特定したら（TextField.getCharBoundaries ））イベントを聞く小さなスプライトを作成するか、rectFrameにPoint（mouseX、mouseY）が含まれているかどうかを確認することができます。

Answer 4

イベントはTextEvent.LINKです。モバイルappclicationsに実装に従ってください：

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 
}