Question

我正在尝试在flex移动应用程序中显示已调整大小的图像，但我无法正确显示它。当设置为width =“100％”时，它看起来没问题。（图1）当我将它缩小到由Flex（scaleMode =“letterbox”）表示30％时，它会缩小，但图像上方和下方的组件仍保持与Image控件的距离，因为它是100％高度。（图2）

我尝试了从autolayout = true到动态缩放元素的几十个布局技巧，但找不到解决方案。我做错了什么？

（我在64位Win 7机器上使用Flash Builder 4.7，Flex 4.6和Air SDK 13.0。）

Image 1 - 100% Image 2 - 30%

Answer 1

感谢您的回答，真的很感激！然而，遗憾的是，这不是解决方案，因为它只是将高度设置为与宽度相同。在这种情况下，两个标签更接近图像，但不在他们应该去的地方。

与此同时，我可以找到一种方法来正确调整图像的大小及其边界框。主要思想是将图像放入容器中，并根据容器大小除以原始图像大小的比例调整图像大小。

然后图像将完全填满容器，然后我可以通过调整容器的宽度来设置所需的缩放比例。

这是我的代码完美无缺，我真的希望它能帮助其他人：

<?xml version="1.0" encoding="utf-8"?>

<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        import spark.components.Image;

        private var img:Image = new Image();

        private function init():void {
            drawImg("assets/image.png");                
        }

        private function drawImg(src:String):void {
            img.source = src;
            img.scaleMode = "letterbox";
            img.smooth = true;
            imgHolder.addElement(img);
            img.addEventListener(FlexEvent.READY, imgStatus);

        }

        private function imgStatus(e:FlexEvent):void {
            var imgw:Number = e.currentTarget.bitmapData.width;
            var imgh:Number = e.currentTarget.bitmapData.height;
            var ratio:Number = Number(imgHolder.width/imgw);
            img.width = imgw*ratio
            img.height = imgh*ratio
        }

    ]]>
</fx:Script>

<s:VGroup width="100%" horizontalAlign="center">
    <s:Label text="Foo" />
    <s:HGroup id="imgHolder" width="30%" />
    <s:Label text="Bar" />
</s:VGroup>

首先我总是得到一个null对象，所以我发现我需要监听图像是否已经完全加载，现在它可以完美地运行。

同样，可以在容器上设置所需的width属性，而不是图像。

以下是结果截图。

Solution

Answer 2

仅通过设置图像宽度，图像的高度确实保持不变。如果在图像周围绘制一个矩形，您将始终看到具有相同大小的边界框。

您可以像下面这样修改代码，以获得动态高度，并根据需要定位标签：

<s:VGroup width="100%"
          horizontalAlign="center">

    <s:Label verticalAlign="bottom"
             text="Foo" />

    <s:Image id="img"
             source="test.gif"
             width="30%"
             height="{img.width}"
             scaleMode="letterbox" />

    <s:Label verticalAlign="top"
             text="Bar" />

</s:VGroup>

Flex移动调整大小的图像布局

2 个答案: