Fitting Flex Image in Canvas - apache-flex

Question

How do I scale an Image in Flex to fit a Canvas? My code follows:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
width="100" height="100"
verticalGap="0" borderStyle="solid"
initialize="onLoad()"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:Canvas width="100%" height="100%" id="PictureBox" horizontalScrollPolicy="off"
verticalScrollPolicy="off" />
<mx:Label id="NameLabel" height="20%" width="100%"/>
<mx:Script>
<![CDATA[
private function onLoad():void
{
var image:SmoothImage = data.thumbnail;
image.percentHeight = 100;
image.percentWidth = 100;
this.PictureBox.addChild(image);
var sizeString:String = new String();
if ((data.fr.size / 1024) >= 512)
sizeString = "" + int((data.fr.size / 1024 / 1024) * 100)/100 + " MB";
else
sizeString = "" + int((data.fr.size / 1024) * 100)/100 + " KB";
this.NameLabel.text = data.name + " \n" + sizeString;
}
]]>
</mx:Script>
</mx:VBox>
I am trying to get the image:SmoothImage into PictureBox and scaling it down.
Note SmoothImage derives from Image.

Answer 1

you need to make sure you have set
image.scaleContent = true;
image.maintainAspectRatio = false;
That should scale the content to the size of the swf loader and distortin it so it fills the entire area of the Image component.
Here's a quick version of it working
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
width="100" height="100"
verticalGap="0" borderStyle="solid"
initialize="onLoad()"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:Canvas width="100%" height="100%" id="PictureBox" horizontalScrollPolicy="off"
verticalScrollPolicy="off" />
<mx:Label id="NameLabel" height="20%" width="100%"/>
<mx:Script>
<![CDATA[
import mx.controls.Image;
private function onLoad():void
{
var image : Image = new Image()
image.source = "http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png";
image.scaleContent = true;
image.maintainAspectRatio =false;
image.percentWidth = 100;
image.percentHeight = 100;
PictureBox.addChild(image);
}
]]>
</mx:Script>
</mx:VBox>