फ्लेक्स: टेक्स्ट क्षेत्र में लिंक पर 'होवर' के लिए सुनना

Question

मैं यह जानने का प्रयास कर रहा हूं कि एक टेक्स्ट क्षेत्र में HTML टेक्स्ट दिखाए जाने पर एक लिंक 'होल्ड ओवर' होता है। मुझे आश्चर्य है कि एक कर्सर को बदलने के लिए घटना का प्रकार बदल सकता है। मुझे दस्तावेज़ों में कुछ भी नहीं मिला। क्या किसी को भी कोई विचार है कि मैं यहां किस घटना को सुन सकता हूं?

धन्यवाद

Answer 1

यह एक बहुत ही रोचक समस्या है। के के सुझाव का उपयोग करके, मैंने एक ऐसी विधि के बारे में सोचा जो ऑब्जेक्ट्स के Array को पाठ के स्थानों से मेल खाता है। मैं बहुवचन का उपयोग कर रहा हूं क्योंकि पाठ शब्द रैप किए जाने पर कई आयताकारों की आवश्यकता हो सकती है।

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% अल्फा में खींचे जाते हैं, इसलिए वे अदृश्य होते हैं।

// 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 यह संभव नहीं है। आप रोलओवर पर लिंक स्टाइल करने के लिए सीएसएस का उपयोग कर सकते हैं (जो स्वयं को एक और दर्द है) लेकिन आप रोलओवर को एएस इवेंट के रूप में कैप्चर नहीं कर सकते हैं। आप LINK ईवेंट का उपयोग कर लिंक के क्लिक को कैप्चर कर सकते हैं।

Answer 3

आप श्रोताओं को असाइन नहीं कर सकते हैं, लेकिन कामकाज के रूप में, आप माउस की स्थिति की जांच कर सकते हैं और यह निर्धारित कर सकते हैं कि यह टेक्स्ट के कुछ हिस्से को कब घुमा रहा है ... एक बार जब आप लिंक के आयत को निर्धारित करते हैं (TextField.getCharBoundaries देखें ()) आप या तो घटनाओं को सुनने के लिए एक छोटा सा स्प्राइट बना सकते हैं, या जांच सकते हैं कि आयताकार में प्वाइंट (माउसएक्स, माउसवाई) में आयत फ्रेम है या नहीं।

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 
}