缩放和调整 flex 组件的大小答案

【问题标题】：Scaling and resizing flex component缩放和调整 flex 组件的大小
【发布时间】：2011-03-30 08:14:57
【问题描述】：

我有从 UIComponent 继承的自定义 flex 组件（已编译，没有源代码访问权限）。它具有固定的宽高比，并且是可扩展的。如果我将它的宽度和高度设置为100%，它试图适应父级的大小，但它保持宽高比例，所以如果它的比例不等于父级的比例，在调整父级时，这个组件附近可能会出现空白。

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

【问题讨论】：

标签： apache-flex actionscript-3 resize scale uicomponents

【解决方案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 的宽度，这将为您解决所有问题。

希望对你有帮助

【讨论】：

+1。喜欢这个。一直在寻找 Flex 中的“ViewBox”。这让我很开心。

【解决方案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;
        }
    }
}

应该这样做。

【讨论】：

【解决方案3】：

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

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

【讨论】：