Question

here i need the text width according to font size and font width of input text control and it should calculate the dynamic width of the entered text.  
i have tried with the following code but it is not getting updated for the text width.

对于任何字体大小的第一次，它将给出正确的文本宽度。在达到文本宽度350之后，我需要减小字体大小，并且此时文本宽度不会更新。反之亦然。请分享答案。

  protected function init(event:FlexEvent):void
                {
                    cmpTextLabel.inputComponent.addEventListener(Event.CHANGE, handleInputComponentChange);
                }


    private function handleInputComponentChange(e:Event):void
                {
                    var tm:TextLineMetrics = cmpTextLabel.measureText(cmpTextLabel.text);

            var txtWidth:int =tm.width; 
                                    cmpTextLabel.maxWidth=cmpTextLabel.width;
                    cmpTextLabel.maxHeight=cmpTextLabel.height;

                    if(txtWidth>350)
                    {
                        var i:int=TemplateModel.getInstance().getFontSizeIndexFromDictionary(cmpTextLabel.compFontSize);

                        i=i-1;
                        if(i>=0)
                            cmpTextLabel.compFontSize=TemplateModel.getInstance().getFontSizeFromDictionary(i);
                        else
                            cmpTextLabel.compFontSize=TemplateModel.getInstance().getFontSizeFromDictionary(0);
                    }
                    if(txtWidth<350 && cmpTextLabel.compFontSize<24)
                    {
                        var j:int=TemplateModel.getInstance().getFontSizeIndexFromDictionary(cmpTextLabel.compFontSize);
                        j=j+1;
                        cmpTextLabel.compFontSize=TemplateModel.getInstance().getFontSizeFromDictionary(j);
                    } 

    <singlelinetext:CmpSLTruncateLabel id="cmpTextLabel"  skinClass="com.presentation.components.home.templates.comps.singlelinetext.SkinSLTruncateLabel"
                                  width="{dataModel.width}" height="{dataModel.height}" useHandCursor="false" buttonMode="false"/>

Answer 1

在此示例中，inputComponent的宽度根据labelComponent的文本宽度。

<fx:Script><![CDATA[
    import mx.events.FlexEvent;

    import spark.events.TextOperationEvent;

    [Bindable]
    private var tm:TextLineMetrics;

    private function labelComponent_changeHandler(event:TextOperationEvent):void {
        tm = labelComponent.measureText(labelComponent.text);
    }

    private function creationCompleteHandler(event:FlexEvent):void {
        tm = labelComponent.measureText(labelComponent.text);
    }
    ]]></fx:Script>

<s:HGroup>
    <s:TextInput id="labelComponent"
                 text="Hello world"
                 fontSize="15" fontFamily="Arial"
                 change="labelComponent_changeHandler(event)"/>
    <s:TextInput id="inputComponent"
                 borderVisible="true"
                 width="{tm.width}" focusSkin="{null}"
                 contentBackgroundColor="0xffffff"
                 fontSize="15" fontFamily="Arial"/>
</s:HGroup>

如何获得输入控件中输入的动态文本宽度

1 个答案: