缩放 Flex 组件并调整其大小

Question

我有从 UIComponent 继承的自定义 Flex 组件（已编译，无法访问源代码）。它具有固定的宽高比例，并且可以缩放。如果我将其宽度和高度设置为 100%，它会尝试适应父级的大小，但它会保持宽高比例，因此如果它的比例不等于父级的比例，则在调整父级大小时，该组件附近可能会出现空白空间。

我需要的是使我的组件完全适合父组件的尺寸。有什么好的方法可以做到这一点吗？我可以监听父级的 resize 事件，并使用组件的 scaleX 和 scaleY，但可能存在更好的方法来解决我的问题（任何财产？）。谢谢。

Answer 1

一个很好的方法是使用 greensock AutoFitArea。
编码很简单，如下所示，

var area:AutoFitArea = new AutoFitArea(this, 50, 70, 300, 100);
area.attach(myImage, {scaleMode:ScaleMode.PROPORTIONAL_OUTSIDE, crop:true});

它将限制内部的任何内容从那里开始执行给定的尺寸(300,100)，您只需更改区域的宽度即可将为您解决一切问题。

希望有帮助

Answer 2

就我个人而言，我要做的是将父级中的组件设置为宽度/高度 100%，然后在组件本身中，覆盖 updateDisplayList 函数（返回未缩放的宽度/高度），然后调整您想要的任何子级的大小根据该容器的宽度/高度显示。像这样的事情：

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
    if(this._child!= null)
    {
        if(unscaledWidth > unscaledHeight)
        {
            this._child.height = unscaledHeight;
            this._child.scaleX = this._video.scaleY;
        }else{
            this._child.width = unscaledWidth;
            this._child.scaleY = this._video.scaleX;
        }
    }
}

应该这样做。

Answer 3

组件应该保持其比例吗？如果没有，您可以像您所说的那样，侦听父级的调整大小事件并将宽度和高度设置为组件值。

如果组件应保持其比例，您可以调整组件背景的大小，使其适合父组件的大小，并分别调整组件内容的大小及其比例。