Ajustement de l'image Flex dans Canvas

Question

Comment redimensionner une image dans Flex pour l'adapter à un canevas? Mon code suivant:

<?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> 

Je suis en train d'obtenir l'image: SmoothImage dans PictureBox et mise à l'échelle vers le bas.

Remarque SmoothImage dérive de l'image.

Answer 1

vous devez vous assurer que vous avez défini

image.scaleContent = true; 
image.maintainAspectRatio = false; 

Cela devrait échelle le contenu à la taille du chargeur swf et distortin si elle remplit toute la surface de l'élément d'image.

Voici une version rapide de fonctionner

 <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>