In Flex, how do you put an Image inside a Canvas without it overflowing?

Question

I have an Image nested inside a Canvas.

<mx:Canvas>
<mx:Image source="@Embed(source='assets/library.swf', symbol='Waves')" />
</mx:Canvas>

I'd like the Image not to overflow the bounds of Canvas. But when I set width and height on the Canvas, my Image disappears. Canvas also doesn't seem to respect horizontalScrollPolicy.

Seems easy enough, but as the official Flex documentation is down at the moment, I thought I'd turn to SO.

Answer 1

your canvas should have a width and a height and you can use the autoscale/maintainaspectratio properties to make the image behave.

<mx:Canvas width="500" height="250"
        verticalScrollPolicy="off" horizontalScrollPolicy="off" 
        backgroundColor="#000000">

        <mx :Image id="theimage"
            maintainAspectRatio="true"
 scaleContent="true"
            width="500" height="250"
            source="your image" />
</mx:Canvas>

you can also check out this post if you wish to center the image. it's a bit more tricky than it should.

Answer 2

The problem was my own fault. I'd set the drawing reference point of the clip to be about the height of the stage, and had set the height of the Canvas to be the height of the clip sans mark.

In the end, tweaking the reference point in Flash and using the following code solved it:

<mx:Canvas width="100%" height="200" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image source="@Embed(source='assets/library.swf', symbol='Waves')" />
</mx:Canvas>

TheBrain's answer is correct as a rule, though.