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>