缩放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});

这将约束，无论里面是什么，从那里到外面，你可以改变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事件，并将宽度和高度设置为组件的值。

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