Question

我遇到了一个让我疯狂的问题。显然按钮标签在flex中没有适当缩放，或者我只是没有正确地进行调整。下面是一个简单的可运行测试用例。

问题： The Issue

在测试用例中，您可以看到按钮标签在最后以多种不同的窗口大小被切断，但有时它会“弹出”到一个新的字体级别，它看起来是正确的吗？这是为什么？

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

代码检查后，检测到缩放画布时，按钮不更新显示列表，按钮调用intsting方法为textField：truncateToFit（）;对于修复bug，创建自定义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（），或者创建custon 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>

防止应用程序规模切断Flex 3中的按钮标签

1 个答案: