How to continuously update an image based on contentHeight?

0
votes

I'm trying to draw a solid background color behind an image. The image is a banner that is to take up 33% of the top of my canvas unless that puts it outside of it's aspect ratio. That's where the background color comes in; the background color fills in the right-side of what's remaining after the image fills in it's maximum width without breaking outside of it's 33% height or aspect ratio.

My problem is, with the code below, it only checks the contentHeight once and therefore, if the image height is reduced below what was initially loaded, my background color can be seen below the image (undesired). I can't use my image height since sometimes the height of my image exceeds what is actually shown (because of maintainAspectRatio).

Does anyone know how to obtain a consistent (and bindable) height of the image at all times that is matched to the content and not the container?

I could fully accept that I'm approaching this the wrong way as well so any alternatives to this method that have the same desired result would be much appreciated.

Component:

<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>
2
actionscript-3apache-flexlayout

2 Answers

0
votes

My (untested) suggestion is to use the complete handler of Image (spark, not 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>

Also I don't understand why you use HBox and not Image's backgroundColor...

0
votes

Eventually had to use a resize handler on my image since the complete handler never fired for my embedded image source. I was limited to using Flex 3 so no spark components are available.

Solution below:

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