缩放和调整flex组件的大小

Question

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

我需要的是将我的组件完全适合父母的大小。有什么好办法吗？我可以听父母的resize事件，并使用组件的scaleX和scaleY，但可能有更好的方法来解决我的问题（任何属性？）。感谢。

Answer 1

一个好方法是使用greensock's AutoFitArea。 编码就像以下一样简单

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

从那里开始限制给定尺寸(300,100)内部的任何内容，你可以改变area的宽度，这将为你找到全部。

希望有所帮助

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

组件应保持其比例吗？如果没有，你可以正如你所说，听取父级的resize事件，并将宽度和高度设置为组件值。

如果组件应保持其比例，您可以调整组件的背景，使其符合父项大小，并以其单独的比例调整组件的内容。