Flex TextArea - how to highlight a line / line under the cursor?

There is a TextArea, and I can find the row index through textField.getLineIndexAtPoint (event.localX, event.localY). How to set the background color of the selected line? Sort line / line. Thank!

+3
source share
2 answers

Well, this is most likely not exactly the solution you are looking for, because my solution focuses on the standard TextField core class, and not on a specific Flex component. But I think, looking at the code, you should understand what is happening and pass it on to the component.

Basically what I did is that I always check where the current cursor uses the selection, then I get the response lines and draw a selection in the background highlighting the current lines. Please note that I did this quite easily, just relying on one font, so the line height will always be the same. However, you can do this job for different fonts in the same text field by using the class TextLineMetricsand more accurately calculating the actual offsets. Since this is a lot more work, and highlighting probably only makes sense for one font environment, I left it. In my example below, Courier is used, but it should automatically work with any font of any size.

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;
            }
        }
    }
}

You can also see this solution on Wonderfl along with a working demo.

+2

, Spark, textAreaFormat, backgroundColor. .

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

All Articles