0

我遇到了一个让我发疯的问题。显然按钮标签在 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>

谢谢。

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()，或创建自定义 Canvas：

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 回答