0

私は頭がおかしくなるような問題に遭遇しました。どうやらボタンのラベルはフレックスで適切にスケーリングされていないか、正しく行っていません。簡単な実行可能なテスト ケースを以下に示します。

問題：問題

テストケースでは、ボタンラベルが複数の異なるウィンドウサイズで最後に切り取られていることがわかりますが、新しいフォントレベルに「ポップ」することがあり、正しいように見えますか? どうしてこれなの？

<?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>

ありがとう。

4

1 に答える 1

1

コード レビューの結果、キャンバスを拡大縮小すると、ボタンが表示リストを更新せず、ボタンが textField の興味深いメソッドを呼び出すことが判明しました: truncateToFit(); バグを修正するには、カスタム Button クラスを作成し、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() を呼び出すか、カスタム キャンバスを作成します。

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>
于 2013-02-20T09:20:58.130 に答える