Question

所以我在这个mx中加载一个非常大的图片：图像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（），调整大小事件，竞争事件......我是一个厌倦了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。

Answer 1

在查看Image之后，它似乎需要明确的高度/宽度，否则它将无法正确缩小。不扩展到maxHeight有点愚蠢，但你总是可以使用Flex 4.5 Image类，或者只是创建自己的处理最大高度/宽度。

加载图像调整大小后调整布局大小

1 个答案: