Fitting Flex Image in Canvas

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>

Answer 2

Is ist possible to set the maintainAspectRatio to true and cut the overflow? I whant the canvas filled with the image.