在帆布中适合Flex图像

Question

如何在Flex中缩放图像以适合Canvas？我的代码如下：

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

我试图让图像：SmoothImage到PictureBox和缩小它。

注意 SmoothImage派生自Image。

Answer 1

，你需要确保你已经设置

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

这应该缩放内容以SWF加载程序的大小和distortin它，使其充满Image组件的整个区域。

下面是它的工作

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