Home/ Questions/Q 140237
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T07:34:43+00:00

How do I scale an Image in Flex to fit a Canvas? My code

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 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>
    • 0