Flex移動調整大小的圖像佈局

我試圖在Flex移動應用程序中顯示調整大小的圖像，我無法正確顯示它。當設置爲寬度=「100％」時，它看起來很好。（圖片1）當我縮小到讓我們說Flex的30％（scaleMode =「letterbox」）時，它會縮小，但圖像上方和下方的組件仍然保持與Image控件的距離，因爲它是100 ％高度。（圖2）Flex移動調整大小的圖像佈局

我嘗試了從autolayout = true到動態縮放的元素的幾十個佈局技巧，但找不到解決方案。我究竟做錯了什麼？

（我用一個64位的Win 7的機器Flash Builder的4.7，則Flex 4.6和空氣SDK 13.0。）

Image 1 - 100% Image 2 - 30%

來源

2014-04-23 fmarton

謝謝您的回答，真的很感謝！然而，不幸的是這不是一個解決方案，因爲它只是將高度設置爲與寬度相同。在這種情況下，這兩個標籤更接近圖像，但不在他們應該去的地方。

與此同時，我可以找到一種方法來正確調整圖像及其邊界框的大小。主要想法是將圖像放入容器中，並根據容器大小除以原始圖像大小的比例調整圖像大小。

然後圖像將完全填充容器，然後我可以通過調整容器的寬度來設置所需的縮放比率。

這裏是我的代碼完美的作品，我真的希望這將幫助別人的未來：

<?xml version="1.0" encoding="utf-8"?>

<fx:Script> 
    <![CDATA[ 
     import mx.events.FlexEvent; 
     import spark.components.Image; 

     private var img:Image = new Image(); 

     private function init():void { 
      drawImg("assets/image.png");     
     } 

     private function drawImg(src:String):void { 
      img.source = src; 
      img.scaleMode = "letterbox"; 
      img.smooth = true; 
      imgHolder.addElement(img); 
      img.addEventListener(FlexEvent.READY, imgStatus); 

     } 

     private function imgStatus(e:FlexEvent):void { 
      var imgw:Number = e.currentTarget.bitmapData.width; 
      var imgh:Number = e.currentTarget.bitmapData.height; 
      var ratio:Number = Number(imgHolder.width/imgw); 
      img.width = imgw*ratio 
      img.height = imgh*ratio 
     } 

    ]]> 
</fx:Script> 

<s:VGroup width="100%" horizontalAlign="center"> 
    <s:Label text="Foo" /> 
    <s:HGroup id="imgHolder" width="30%" /> 
    <s:Label text="Bar" /> 
</s:VGroup>

首先，我總是得到一個空對象，所以我發現我需要傾聽圖像被完全加載，現在它完美地工作。

同樣，可以在容器上設置所需的寬度屬性，而不是圖像。

下面是結果的截圖。

Solution

來源

2014-04-24 11:17:55 fmarton

圖像的高度確實保持不變僅設置圖像寬度。如果您在圖像周圍畫一個矩形，您將一直看到大小相同的邊界框。

您可以像修改代碼下面有一個動態的高度，並有標籤定位，如你所願：

<s:VGroup width="100%" 
      horizontalAlign="center"> 

    <s:Label verticalAlign="bottom" 
      text="Foo" /> 

    <s:Image id="img" 
      source="test.gif" 
      width="30%" 
      height="{img.width}" 
      scaleMode="letterbox" /> 

    <s:Label verticalAlign="top" 
      text="Bar" /> 

</s:VGroup>

來源

2014-04-24 08:10:21 Jan

Flex移動調整大小的圖像佈局

回答

相關問題