我正在尝试更改spark.components.Label中所有4个字母单词的颜色。
这是一个类似聊天的程序,用户在TextInput字段中输入单词,按ENTER键,附加行到Label(或Text或TextArea或RichText - 这里适用的任何内容)
我已经准备好了下面这个简单的测试用例,它会立即在你的Flash Build 4.6中运行,并且找到单词及其索引的代码已经存在。
我的问题是弄清楚如何以编程方式(即通过ActionScript 3)重复更改文本部分的颜色,并且我反复尝试reading the docs,我无法弄清楚它。
截图:
Test.mxml:
<?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"
minWidth="400" minHeight="300">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
private const WORD:RegExp = /\b[a-z]{4}\b/i;
public function chat(event:FlexEvent):void {
var line:String = _input.text;
var start:int = 0;
do {
var rest:String = line.substr(start);
var found:int = rest.search(WORD);
// no more 4-letter words found
if (found < 0)
break;
var word:String = rest.substr(found, 4);
trace('word=' + word + ' @ index=' + (start + found));
start += found + 4;
} while (start + 4 <= line.length);
_output.text += (line + "\n");
_input.text = '';
}
]]>
</fx:Script>
<s:Label id="_output" left="4" top="4" right="4" bottom="24" backgroundColor="0xFFFFCC" />
<s:TextInput id="_input" bottom="4" right="4" enter="chat(event)" />
</s:Application>
更新:我正在尝试使用RichText + Georgi建议的下面的代码,看看模式替换是否有效(通过查看 trace()输出) ,但得到错误:
TypeError:错误#1034:类型强制失败:无法将“[object TextFlow] [object TextFlow]”转换为flashx.textLayout.elements.TextFlow。
<?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"
minWidth="400" minHeight="300">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import flashx.textLayout.conversion.TextConverter;
private const WORD:RegExp = /\b[a-z]{4}\b/ig;
public function chat(event:FlexEvent):void {
var line:String = _input.text.replace(WORD, '<font color="#FF0000">$&</font>') + '<br>';
trace('line=' + line);
// XXX how to append text here? XXX
_output.textFlow += TextConverter.importToFlow(line, TextConverter.TEXT_FIELD_HTML_FORMAT);
_input.text = '';
}
]]>
</fx:Script>
<s:RichText id="_output" left="4" top="4" right="4" bottom="24" />
<s:TextInput id="_input" bottom="4" right="4" enter="chat(event)" />
</s:Application>
更新2:如果我使用上面的 _output.textFlow = ,那么TypeError就会消失。但我需要以某种方式追加文本......
答案 0 :(得分:2)
我认为使用s:Label
组件是不可能的。您可以尝试使用s:RichText
(幸运的是,与s:Label
没有太大区别)使用适当的HTML格式。您必须首先使用textFlow
来保留生成的HTML并每次都设置TextConverter
。像这样:
<?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"
minWidth="400" minHeight="300">
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
import mx.events.FlexEvent;
private const WORD:RegExp = /\b([a-z]{4})\b/ig;
private var output:String = "";
public function chat(event:FlexEvent):void {
output += _input.text.replace(WORD, '<font color="0xFF0000">$1</font>') + '<br>';
_output.textFlow = TextConverter.importToFlow(output, TextConverter.TEXT_FIELD_HTML_FORMAT);
_input.text = "";
}
]]>
</fx:Script>
<s:RichText id="_output" left="4" top="4" right="4" bottom="24" backgroundColor="0xFFFFCC" />
<s:TextInput id="_input" bottom="4" right="4" enter="chat(event)" />
</s:Application>
上面的代码并不完美,但似乎足以证明这个概念。
编辑: 请注意正则表达式中的“g”标记,以匹配所有四个字母的单词。