防止應用程序按比例切斷Flex 3中的按鈕標籤

Question

我遇到了一個令我瘋狂的問題。顯然，按鈕標籤不能在flex中正確縮放，或者我只是沒有正確地進行調整。下面是一個簡單的可運行測試用例。

問題：

在測試情況下，你可以看到按鈕標籤是在以多個不同的窗口大小結束切斷，但有時「啪啪」到一個新的字體水平似乎和它看起來正確？爲什麼是這樣？

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
    <mx:Script> 
     <![CDATA[    
      import mx.events.ResizeEvent; 

      public var minScale:Number = 0.5; 
      public var baseWidth:Number = 1000; 
      public var baseHeight:Number = 800; 

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

       if(width < baseWidth || height < baseHeight) { 
        var sx:Number = Math.max(minScale, width/baseWidth); 
        var sy:Number = Math.max(minScale, height/baseHeight); 

        var s:Number = Math.min(sx, sy); 

        getChildAt(0).scaleX = s; 
        getChildAt(0).scaleY = s; 
       } 
       else{ 
        getChildAt(0).scaleX = 1; 
        getChildAt(0).scaleY = 1; 
       } 
      } 

     ]]> 
    </mx:Script> 

    <mx:Canvas> 
     <mx:Button label="WWWWWWW" fontSize="12"/> 
    </mx:Canvas> 
</mx:Application> 

謝謝。

Answer 1

代碼複審後，檢測到當您縮放畫布時，按鈕不更新顯示列表，並且按鈕調用textField的intresting方法：truncateToFit（）;對於修復的bug，創建自定義按鈕，並重寫方法的updateDisplayList：

package classes 
{ 
    import mx.controls.Button; 
    import mx.core.IUITextField; 
    import mx.core.UITextField; 
    import mx.core.mx_internal; 

    public class ButtonScale extends Button 
    { 
     public function ButtonScale() 
     { 
      super(); 
     } 

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

      var tf:IUITextField = mx_internal::getTextField() as IUITextField; 
      tf.width = tf.textWidth + UITextField.mx_internal::TEXT_WIDTH_PADDING; 
     } 
    } 
} 

當你將縮放，調用button.invalidateDisplayList（），或創建custon帆布：

package classes 
{ 
    import mx.containers.Canvas; 
    import mx.core.UIComponent; 

    public class CanvasScale extends Canvas 
    { 
     public function CanvasScale() 
     { 
      super(); 
     } 

     override public function set scaleX(value:Number):void 
     { 
      super.scaleX = value; 

      for (var i:uint = 0; i<numChildren; i++) 
      { 
       UIComponent(getChildAt(i)).invalidateDisplayList(); 
      } 
     } 
    } 
} 

主要類：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:classes="classes.*"> 
    <mx:Script> 
     <![CDATA[    
      import mx.events.ResizeEvent; 
      import mx.core.IUITextField; 
      import mx.core.UIComponent; 

      public var minScale:Number = 0.5; 
      public var baseWidth:Number = 900; 
      public var baseHeight:Number = 700; 

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

       var child:UIComponent = getChildAt(0) as UIComponent; 

       if(width < baseWidth || height < baseHeight) 
       { 
        var sx:Number = Math.max(minScale, width/baseWidth); 
        var sy:Number = Math.max(minScale, height/baseHeight); 

        var s:Number = Math.min(sx, sy); 

        child.scaleX = s; 
        child.scaleY = s; 
       } 
       else 
       { 

        child.scaleX = 1; 
        child.scaleY = 1; 
       } 
      } 

     ]]> 
    </mx:Script> 

    <classes:CanvasScale> 
     <classes:ButtonScale label="WWWWWWW" fontSize="12" paddingLeft="10" paddingRight="10"/> 
    </classes:CanvasScale> 
</mx:Application>