Flex TextArea - 如何突出显示光标下的行/行？

Question

有一个TextArea，我可以通过textField.getLineIndexAtPoint(event.localX, event.localY)找到行索引。如何设置所选行的背景颜色？一种行/行突出显示。谢谢！

Answer 1

好的，这很可能不是您正在寻找的解决方案，因为我的解决方案是针对标准 Flash 核心 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);