Flex 4 - 使用 TextLine 突出显示文本块中的关键字

发布于 2024-09-04 06:07:55 字数 1150 浏览 8 评论 0原文

我有一个搜索和结果页面，我想在结果文本中突出显示搜索的关键字。有人建议我使用 TextLine 来实现此目的，但我无法弄清楚如何使其工作。我启动了一个简单的、可编译的虚拟应用程序，希望有人能给我一些关于如何继续的提示：

<?xml version="1.0" encoding="utf-8"?>
<s:Application
 xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 initialize="initApp();">

 <fx:Script>
  import flash.display.Sprite;
  import flash.text.engine.*;

  private var textLine:TextLine;

  private function initApp():void {

   var normalFormat:ElementFormat = new ElementFormat(null, 12, 0x000000);
   var highlightFormat:ElementFormat = new ElementFormat(null, 14, 0xff0000);

   var textBlock:TextBlock = new TextBlock(new TextElement("This is text that has KEYWORDS. I would like to highlight these KEYWORDS by changing their font color and adding a light yellow background graphic.", normalFormat)); 

   textLine = textBlock.createTextLine();
   textLine.y = 100;

   embeddedFontHolder.addChild(textLine); 
  }
 </fx:Script>

 <mx:UIComponent width="100%" id="embeddedFontHolder" />
</s:Application>

有人有什么想法吗？

干杯，巴兹

原文

I have a search and results page that I would like to highlight the keywords that were searched for, in the text of the results. It was suggested that I use TextLine for this, but I am having trouble figuring out how to make it work. I started a simple, compilable dummy application and was hoping someone could give me some tips on how to continue:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
 xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 initialize="initApp();">

 <fx:Script>
  import flash.display.Sprite;
  import flash.text.engine.*;

  private var textLine:TextLine;

  private function initApp():void {

   var normalFormat:ElementFormat = new ElementFormat(null, 12, 0x000000);
   var highlightFormat:ElementFormat = new ElementFormat(null, 14, 0xff0000);

   var textBlock:TextBlock = new TextBlock(new TextElement("This is text that has KEYWORDS. I would like to highlight these KEYWORDS by changing their font color and adding a light yellow background graphic.", normalFormat)); 

   textLine = textBlock.createTextLine();
   textLine.y = 100;

   embeddedFontHolder.addChild(textLine); 
  }
 </fx:Script>

 <mx:UIComponent width="100%" id="embeddedFontHolder" />
</s:Application>

Anyone have any ideas?

Cheers,
Baz

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

罗罗贝儿 2024-09-11 06:07:55

谢谢 Treur，但我找到了一个更好的方法： setFormatOfRange()

该函数基本上改变了 RichEditableText 组件中一系列字符的格式（背景/前景）。所以我要做的就是：

var highlightFormat:TextLayoutFormat = new TextLayoutFormat();
highlightFormat.backgroundColor = 0xffee66;

var keywordsArray:Array = model.keywords.toLowerCase().split(' ');
var indexOfKeyword:int = 0;
for each (var currentKeyword:String in keywordsArray) {
    while((indexOfKeyword = this.text.toLowerCase().indexOf(currentKeyword, indexOfKeyword)) >= 0) {                
        this.setFormatOfRange(highlightFormat, indexOfKeyword, indexOfKeyword + currentKeyword.length);
        indexOfKeyword++;
    }
}

干净。

Thanks Treur, but I found an even better way: setFormatOfRange()

That function basically changes the format (background/foreground) of a range of characters in a RichEditableText component. So all I have to do is:

var highlightFormat:TextLayoutFormat = new TextLayoutFormat();
highlightFormat.backgroundColor = 0xffee66;

var keywordsArray:Array = model.keywords.toLowerCase().split(' ');
var indexOfKeyword:int = 0;
for each (var currentKeyword:String in keywordsArray) {
    while((indexOfKeyword = this.text.toLowerCase().indexOf(currentKeyword, indexOfKeyword)) >= 0) {                
        this.setFormatOfRange(highlightFormat, indexOfKeyword, indexOfKeyword + currentKeyword.length);
        indexOfKeyword++;
    }
}

Clean.

回复收藏 0 原文