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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何根据contentHeight不断更新图像?相关的知识,希望对你有一定的参考价值。

我正试图在图像后面绘制一个坚实的背景色。图像是一个横幅,占据我画布顶部的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>
答案

我(未经测试)的建议是使用completeImage处理程序(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 ......

另一答案

最终必须在我的图像上使用调整大小处理程序,因为完整的处理程序从未为我的嵌入式图像源触发。我只能使用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不断更新图像?的主要内容,如果未能解决你的问题,请参考以下文章

如何根据不断更新的状态触发一次通知

如何将图像拖放到容器中,然后根据拖放到容器中的内容更新容器?

根据 UISlider 值不断更新标签

getPixel-method - 如何获得RGB的R值?

mongodb常用基本命令(根据工作需要,不断更新)

Jfreechart - 根据不断变化的数据刷新图表