Нарисуйте слова красным в окне чата (spark.components.Label или mx.controls.Text) - PullRequest
Новая
       34

Нарисуйте слова красным в окне чата (spark.components.Label или mx.controls.Text)

1 голос
/ 05 декабря 2011

Я пытаюсь изменить цвет всех четырехбуквенных слов в spark.components.Label .

Это программа, похожая на чат, в которой пользователь вводит слова в поле TextInput, нажимает клавишу ВВОД и строки добавляются к метке (или Text или TextArea или RichText - все, что здесь подходит).

Я подготовил этот простой тестовый пример ниже, он мгновенно запустится в вашей Flash Build 4.6, и код для поиска слов и их индексов уже существует.

Моя проблема заключается в том, чтобы выяснить, как программно изменять цвет частей текста (т. Е. С помощью ActionScript 3), и я просто не могу этого понять, несмотря на то, что читает документы снова и снова.

Скриншот:

screenshot

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 + приведенный ниже код, предложенный Георгием, и вижу, что замена шаблона сработала (глядя на вывод trace () ), но получите ошибку:

Ошибка типа: ошибка # 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 исчезнет. Но мне нужно добавить текст как-то ...

1 Ответ

2 голосов
/ 05 декабря 2011

Я не думаю, что это возможно с s:Label компонентом.Вы можете попробовать использовать s:RichText (который, к счастью, не сильно отличается от s:Label) с соответствующим форматированием HTML.Вам придется сохранить созданный HTML-код и каждый раз устанавливать textFlow, сначала используя 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" в регулярном выражении, чтобы соответствовать все четырехбуквенные слова.

...