Flex:缩放图像以使其宽度与contentWidth匹配?

时间:2009-11-13 23:46:44

标签: flex flex3 image-scaling

我有一个动态布局,将图像加载到HBox中:

<mx:HBox ...>
    <mx:Image height="100%" .../>
</mx:HBox>

只在图像上设置图像的高度,以便它可以占用所有可用的垂直空间,而其宽度未定义,我希望宽度与其高度相应地缩放。

事实证明,图像的高度等于其contentHeight,即高度正确;但是,图像的宽度仍然与measuredWidth(图像的原始宽度)相同,并且不会相应缩放。

例如,如果图像的原始尺寸为800x600,如果HBox的高度为300,则图像高度将缩小至300,但其宽度不会缩小到400,而是保持在800。

我尝试添加一个事件监听器来显式设置图像宽度:

<mx:Image id="img" height="100%" updateComplete="img.width=img.contentWidth;" .../>

它仅在第一次加载图像时起作用,之后,如果我使用Image.load()动态加载不同的图像,它将停止工作 - 图像宽度设置为0.

任何帮助/建议都将受到高度赞赏。

4 个答案:

答案 0 :(得分:3)

在Adobe论坛上得到答案。我的解决方案几乎就在那里,只需要使用callLater(),如:

private function scaleImage():void {
    img.width = img.contentWidth;
}

updateComplete="callLater(scaleImage)"

答案 1 :(得分:0)

尝试使用<mx:Box /><mx:Canvas />而不是<mx:HBox />

据我了解,HBox具有灵活的宽度。它稍后将宽度计算为子项的总和。与VBox中的高度相同。

答案 2 :(得分:0)

尝试添加:maintainAspectRatio="true"


更新1 :在回复您的评论时, 您正在寻找的内容,如示例here中所示。保持纵横比意味着保持宽度和宽度之间的关系。高度。

答案 3 :(得分:0)

观察到的行为是一个记录错误,错误的特征 图像类文档告诉图像高度是缩放图像的高度,而图像宽度是未缩放图像的宽度。他的那个应该用于布局 我不知道为什么高度和宽度的处理方式不同以及为什么缩放的图像会浪费其容器中的空间,但这就是它的编码方式。

该行

updateComplete="callLater(function():void{xxx.width=xxx.contentWidth;})"

(不需要单独的脚本功能)治愈这个。但这根本不应该是必要的。