如何根据 contentHeight 持续更新图片？答案

【问题标题】：How to continuously update an image based on contentHeight?如何根据 contentHeight 持续更新图片？
【发布时间】：2014-04-21 05:00:01
【问题描述】：

我正在尝试在图像后面绘制纯色背景色。该图像是一个横幅，它将占据我画布顶部的 33%，除非它超出了它的纵横比。这就是背景颜色的来源；在图像填充其最大宽度后，背景颜色会填充到剩余部分的右侧，而不会超出其 33% 的高度或纵横比。

我的问题是，使用下面的代码，它只检查 contentHeight 一次，因此，如果图像高度低于最初加载的高度，我的背景颜色可以在图像下方看到（不需要）。我不能使用我的图像高度，因为有时我的图像高度超过了实际显示的高度（因为维护AspectRatio）。

有谁知道如何始终获得与内容而不是容器匹配的图像的一致（和可绑定）高度？

我可以完全接受我也以错误的方式处理这个问题，因此非常感谢任何具有相同预期结果的方法的替代方案。

组件：

<mx:Canvas id="mainCanvas" width="100%" height="100%">
    <mx:HBox x="0" y="0" backgroundColor="{myBgColor}" width="100%" height="{Math.min(myImg.contentHeight, mainCanvas.height * 0.33)}" />
    <mx:Image id="myImg" source="{myImageSrc}" maintainAspectRatio="true" width="100%" height="33%"/>
</mx:Canvas>

【问题讨论】：

标签： actionscript-3 apache-flex layout

【解决方案1】：

我的（未经测试的）建议是使用Image 的complete 处理程序（火花，而不是mx）：

<fx:Script>
<![CDATA[

function myComplete(event:Event) {
    myBox.height = Math.min(myImg.contentHeight, mainCanvas.height * 0.33);
}

]]>
</fx:Script>

<mx:Canvas id="mainCanvas" width="100%" height="100%">
    <mx:HBox id="myBox" x="0" y="0" backgroundColor="{myBgColor}" width="100%" />
    <s:Image id="myImg" complete="myComplete(event)" source="{myImageSrc}" maintainAspectRatio="true" width="100%" height="33%"/>
</mx:Canvas>

另外我不明白你为什么使用 HBox 而不是 Image 的backgroundColor...

【讨论】：

我不能使用图像的背景颜色，因为当保持纵横比时它会包含整个容器，导致它在实际图像下方着色。

【解决方案2】：

最终不得不在我的图像上使用调整大小处理程序，因为完整的处理程序从未为我的嵌入式图像源触发。我仅限于使用 Flex 3，因此没有可用的火花组件。

解决方法如下：

protected function resizeHandler(event:ResizeEvent):void
{
    var newHeight = Math.round(Math.min(myImg.contentHeight, mainCanvas.height * 0.33)) - 1; // Magic -1 because image had a bottom white padding
    blueBg.height = newHeight;
}

【讨论】：