在加载的图像调整大小后调整布局答案

【问题标题】：Resize layout after a loaded image gets resized在加载的图像调整大小后调整布局
【发布时间】：2011-06-02 16:07:59
【问题描述】：

所以我在这个 mx:Image manteinAspectRatio 中加载了一张非常大的图片，启用了高度限制，但像往常一样它不起作用（Flex 绝对不适合我）：

<?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx">

        <s:Rect top="0" right="0" bottom="0" left="0">
            <s:fill>
                <mx:SolidColor color="#000000"/>
            </s:fill>
        </s:Rect>

        <s:VGroup id="a" top="0" right="0" bottom="0" left="0" horizontalAlign="center" verticalAlign="middle">

            <s:Group id="b">

                <s:Rect id="c" top="0" right="0" bottom="0" left="0" radiusX="10" radiusY="10">
                    <s:fill>
                        <mx:SolidColor color="#cccccc"/>
                    </s:fill>
                </s:Rect>

                <s:VGroup id="d" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">

                    <mx:Image id="e" source="big.jpg" maxHeight="300" maintainAspectRatio="true" />

                </s:VGroup>

            </s:Group>

        </s:VGroup>

    </s:Application>

big.jpg 的宽度大于高度，因此当调整大小时，包装容器会获得正确的新高度，但它们仍然具有旧宽度。

我尝试在每个元素上调用 validateNow()、invalidate、callLater()、resize event、competit event...我是一个厌倦 AS 3.0 的菜鸟

更新：

阅读 J_A_X 答案后，我得出了这个结论：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[

        import flash.events.Event;
        import mx.controls.Image;

        private function fix(event:Event):void {

            var img:Image = event.target as Image;
            var h:uint = 300;

            img.width *= h / img.height;
            img.height = h;
            img.removeEventListener("updateComplete", fix);

        }

        ]]>
    </fx:Script>

    <s:Rect top="0" right="0" bottom="0" left="0">
        <s:fill>
            <mx:SolidColor color="#000000"/>
        </s:fill>
    </s:Rect>

    <s:VGroup top="0" right="0" bottom="0" left="0" horizontalAlign="center" verticalAlign="middle">

        <s:Group>

            <s:Rect top="0" right="0" bottom="0" left="0" radiusX="10" radiusY="10">
                <s:fill>
                    <mx:SolidColor color="#cccccc"/>
                </s:fill>
            </s:Rect>

            <s:VGroup paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">

                <mx:Image source="big.jpg" maintainAspectRatio="false" updateComplete="fix(event)" />

            </s:VGroup>

        </s:Group>

    </s:VGroup>

</s:Application>

我希望这可以帮助另一个处理 Flex 的人。

【问题讨论】：

我没有尝试过您的代码，但也许您应该尝试不使用这么多容器。其中之一可以调整您的图像大小。
我不明白什么不起作用。什么是包装容器？您为什么期望容器自行调整大小？您的代码中没有任何内容让我认为应该这样做。您是在调整图像大小，还是保持原样？这是你的完整代码吗？

标签： apache-flex layout actionscript

【解决方案1】：

查看图像后，它似乎需要明确的高度/宽度，否则它不会正确缩小。不缩放到 maxHeight 有点愚蠢，但您始终可以使用 Flex 4.5 Image 类，或者创建自己的类来处理最大高度/宽度。

【讨论】：