Flex TextArea - как выделить строку / строку под курсором?

Question

Существует TextArea, и я могу найти индекс строки через textField.getLineIndexAtPoint (event.localX, event.localY) .Как я могу установить цвет фона выбранной линии?Сортировка строки / линии подсветки.Спасибо!

Answer 1

Хорошо, это, скорее всего, не совсем то решение, которое вы ищете, потому что мое решение нацелено на стандартный класс TextField ядра ядра, а не на какой-то конкретный компонент Flex.Но я думаю, что, взглянув на код, вы сможете понять, что происходит, и перенести это также на компонент.

В основном я всегда проверял, где текущий курсор использует выделение, затемЯ получаю ответные линии и рисую на заднем плане какое-то выделение, которое выделяет текущие строки.Обратите внимание, что я сделал это довольно просто, просто используя один шрифт, поэтому высота линии всегда будет одинаковой.Однако вы можете заставить это работать для разных шрифтов в одном текстовом поле, используя класс TextLineMetrics и более точно вычисляя фактические смещения.Поскольку это намного больше работы, и выделение, вероятно, имеет смысл только для среды с одним шрифтом, я оставил это.В моем примере ниже используется Courier , но он должен автоматически работать с любым шрифтом любого размера.

package
{
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.text.TextField;
    import flash.text.TextFieldType;
    import flash.text.TextFormat;
    import flash.text.TextLineMetrics;

    public class HighlightedTextField extends Sprite
    {
        private var textField:TextField;
        private var highlighter:Shape;
        private var metrics:TextLineMetrics;        
        private var selectionBegin:int = -1;
        private var selectionEnd:int = -1;
        private var lineBegin:int = -1;
        private var lineEnd: int = -1;

        public function HighlightedTextField()
        {
            this.graphics.beginFill( 0xEEEEEE );
            this.graphics.drawRect( 5, 5, 290, 290 );
            this.graphics.endFill();

            // construct text field            
            textField = new TextField();
            textField.width = 280;
            textField.height = 280;
            textField.x = 10;
            textField.y = 10;
            textField.background = false;
            textField.selectable = true;
            textField.multiline = true;
            textField.defaultTextFormat = new TextFormat( 'Courier', 12 );
            textField.type = TextFieldType.INPUT;

            // construct line highlighter
            highlighter = new Shape();
            highlighter.graphics.beginFill( 0xCCCCCC );
            highlighter.graphics.drawRect( 0, 0, textField.width, 1 );
            highlighter.x = textField.x;
            highlighter.y = textField.y;

            this.addChild( highlighter );
            this.addChild( textField );
            this.addEventListener( Event.ENTER_FRAME, setHighlighter );

            // get line metrics and initialize highlight
            metrics = textField.getLineMetrics( 0 );
            setHighlighter( null );
        }

        private function setHighlighter ( event:Event ):void
        {
            var changed:Boolean = false;

            // cache checks to make sure that the selection has changed
            if ( selectionBegin != textField.selectionBeginIndex )
            {
                selectionBegin = textField.selectionBeginIndex;
                lineBegin = textField.getLineIndexOfChar( selectionBegin );

                // when the caret is at the end of the text, getLineIndexOfChar will return -1
                lineBegin = lineBegin != -1 ? lineBegin : textField.numLines - 1;

                changed = true;
            }

            // same as above
            if ( selectionEnd != textField.selectionEndIndex )
            {
                selectionEnd = textField.selectionEndIndex;
                lineEnd = textField.getLineIndexOfChar( selectionEnd );
                lineEnd = lineEnd != -1 ? lineEnd : textField.numLines - 1;
                changed = true;
            }

            // only move the highlight when something has changed
            if ( changed )
            {
                highlighter.y = textField.y + metrics.height * lineBegin + 2;
                highlighter.height = textField.y + metrics.height * ( lineEnd + 1 ) + 2 - highlighter.y;
            }
        }
    }
}

Вы также можете увидеть это решение на Wonderfl вместе срабочая демонстрация.

Answer 2

Предполагая, что вы используете компонент Spark, определите textAreaFormat, установите для него свойство backgroundColor.Примените формат к определенному диапазону в вашей текстовой области.

var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
textLayoutFormat.fontSize = 12;
textLayoutFormat.color = 0xFF0000;
textLayoutFormat.backgroundColor = 0xFF00FF;
myRET.setFormatOfRange(textLayoutFormat,begin,end);