調整大小組件擴展

我SampleComponent：調整大小組件擴展

<?xml version="1.0" encoding="utf-8"?> 
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx" 
     resizeMode="scale"> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 

    <s:Image source="@Embed('assets/images/soLogo.jpg')" width="100%" height="100%" scaleMode="stretch" /> 

</s:Group>

，設有隻是拉伸以填充整個部件區域的圖像，該組件resizeMode設置爲「規模」。

我把這個組件到應用程序中與下面的代碼：

<local:SampleComponent id="sample" 
         width="100%" 
         height="{sample.width * 0.2961165048543689}" />

寬度被設定爲應用程序寬度的100％。在我嘗試正確縮放組件時，我將高度設置爲寬度的百分比。

當調整應用程序窗口，它看起來像這樣：

Resizing to scale

最後的形象在這裏是我的問題，它超過了應用的範圍。

如何在不超出父容器邊界的情況下調整組件大小？
是否有更加正確的縮放組件的方法？

來源

2013-04-16 Drahcir

是否要保持圖像寬高比？（scaleMode =「letterbox」）爲什麼不能簡單地將組件的高度設置爲100％？ – NTyler

關鍵是要保持比例，但也要確保組件不超出應用程序的範圍。另外，問題是關於維護組件的比例，而不是圖像，組件可以包含任何東西 – Drahcir

我想我已經想通了，這樣做的更好的辦法：

將組件的resizeMode設置爲scale
在偵聽器中爲updateComplete事件添加一個偵聽器，操作mx_internal命名空間的$scaleX和$scaleY屬性。

實施例：

<s:Group id="myContainer" resizeMode="scale"> 
    <!-- Some children, images etc... --> 
    <s:updateComplete> 
    <![CDATA[ 
      import mx.core.mx_internal; 

      myContainer.mx_internal::$scaleX = Math.min(myContainer.mx_internal::$scaleX, myContainer.mx_internal::$scaleY); 
      myContainer.mx_internal::$scaleY = myContainer.mx_internal::$scaleX; 
    ]]> 
    </s:updateComplete> 
</s:Group>

這種方式是較好的監守...

它允許不預先知道的縱橫比。
它也允許複雜的佈局和許多兒童的比例可以在運行時改變。

如果經常使用，則可以創建庫函數。

來源

2013-05-14 13:02:35 Drahcir

This post與this library

回答我想你很可能也像這樣做：

width="{Math.min(container.width, container.height * ratio)}" 
height="{Math.min(container.height, container.width/ratio)}"

來源

2013-04-16 19:34:24 NTyler

謝謝，我認爲Math.min會起作用，但是當我下一次使用CS6時，該庫看起來很有用，而不是柔性。 – Drahcir

調整大小組件擴展

回答

相關問題