Question

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

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

有没有人知道如何在与内容而不是容器匹配的任何时候获得图像的一致（和可绑定）高度？

我完全可以接受，我也是以错误的方式接近这一点，所以我们非常赞赏这种具有相同预期结果的替代方法。

组件：

<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>

Answer 1

我（未经测试）的建议是使用Image的complete处理程序（spark，而不是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 ...

Answer 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;
}

如何根据contentHeight不断更新图像？

2 个答案: