Adob​​e Flex - 自動更改字體大小以適應其容器的任何方式？

Question

我在Flex中有一個組件，並且該組件的一部分是一個標籤。有沒有辦法自動調整字體大小以適應其容器？

Answer 1

不自動（至少不是我所知道的），沒有設置某種事件處理程序，並對發生某些事件採取行動。以下是一個演示一種方法簡單的AIR應用程序 - 在這種情況下，調整大小事件觸發標籤的fontSize的變化：

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="this_creationComplete()"> 

    <mx:Script> 
     <![CDATA[ 

      import mx.binding.utils.BindingUtils; 
      import mx.binding.utils.ChangeWatcher; 

      [Bindable] 
      public var myValue:int = 0; 

      private function this_creationComplete():void 
      { 
       setSize(); 

       addEventListener(Event.RESIZE, handleResize); 
      } 

      private function handleResize(event:Event):void 
      { 
       setSize(); 
      } 

      private function setSize():void 
      { 
       lbl.setStyle("fontSize", this.height/2); 
      } 

     ]]> 
    </mx:Script> 

    <mx:Label id="lbl" text="Hello, world!" /> 

</mx:WindowedApplication> 

這裏，當應用進行了調整，標籤的fontStyle屬性，都會改變應用程序高度的一半;擴大和縮小它，你會看到它是如何工作的。與往常一樣，其他方法當然也有其他方法，但由於我們正在處理樣式而不是可綁定屬性，所以最有可能需要一點自定義編碼。希望能幫助到你！

Answer 2

如果您的意思是單行標籤，那麼這是可以幫助您的組件。考慮到它只能縮小字體大小（作爲對容器寬度縮減的反應）。

import flash.events.Event; 
import flash.text.TextLineMetrics; 

import mx.controls.Label; 
import mx.events.FlexEvent; 

public class ElasticLabel extends Label { 
    private static const EXTRA_SPACE:Number = 2; 

    private static const MIN_FONT_SIZE:Number = 6; 

    private var fontResizeRequired:Boolean = false; 

    public function ElasticLabel() { 
     super(); 

     addEventListener("explicitMaxWidthChanged", triggerFontResize); 
     addEventListener(FlexEvent.VALUE_COMMIT, triggerFontResize); 
    } 

    private function triggerFontResize(event:Event):void { 
     fontResizeRequired = true; 
    } 

    private function get currentWidth():Number { 
     var textMetrics:TextLineMetrics = measureText(text); 
     var textWidth:Number = textMetrics.width; 
     var paddings:Number = 0; 
     var paddingLeft:Number = getStyle("paddingLeft"); 
     if (!isNaN(paddingLeft)) paddings += paddingLeft; 
     var paddingRight:Number = getStyle("paddingRight"); 
     if (!isNaN(paddingRight)) paddings += paddingRight; 
     return textWidth + paddings + EXTRA_SPACE; 
    } 

    private function resizeFont():void { 
     if (!isNaN(maxWidth) && maxWidth > 0) { 
      var fontSize:Number = getStyle("fontSize") as Number; 
      while (maxWidth < currentWidth 
        && fontSize > MIN_FONT_SIZE) { 
       fontSize -= 0.5; 
       setStyle("fontSize", fontSize); 
      } 
     } 
    } 

    override protected function updateDisplayList(unscaledWidth:Number, 
      unscaledHeight:Number):void { 
     super.updateDisplayList(unscaledWidth, unscaledHeight); 

     if (fontResizeRequired) { 
      resizeFont(); 
      fontResizeRequired = false; 
     } 
    } 
}