我正在尝试在图像后面绘制纯色背景色。 该图像是一幅横幅,它将占据我画布顶部的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>

===============>>#1 票数:0

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

===============>>#2 票数:0

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

解决方案如下:

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

  ask by buddyp450 translate from so

未解决问题?本站智能推荐: