Adobe Flex - 如何在圖像的「窗口」中嵌入組件？

我有一張圖片，我們稱之爲「StageSkin.png」。這是一個實際上只是邊框的圖像，圖像的中間部分是「窗口化」的，這意味着它的目的是顯示其中的其他信息。它內部的信息是以組件的形式（基於畫布組件，可以稱之爲「Gauge」）。Adobe Flex - 如何在圖像的「窗口」中嵌入組件？

我想創建一個'StageSkin'圖像和'Gauge'組件，它允許我用'Gauge'組件停留在StageSkin窗口內部來調整組件大小。我對此進行了搜索，並獲得了下面的代碼，但嵌入式組件僅覆蓋整個圖像。我需要做什麼？

<mx:Style> 
    .nineSliceScalingBackground 
    { 
     background-image: Embed("assets/StageSkin.png", 
     scaleGridTop="53", scaleGridBottom="523", 
     scaleGridLeft="20", scaleGridRight="485"); 

     background-size:"100%"; 
    } 
</mx:Style>

來源

2009-09-02 Seidleroni

您的意思是StageSkin.png沒有縮放到正確的尺寸？如在，它顯示，但不是在父組件的寬度/高度。 – 2009-09-02 14:56:32

StageSkin正在調整大小，但嵌入式組件不會停留在StageSkin圖像的「窗口」內。（即StageSkin圖像中的組件應該適合的窗口內） – Seidleroni 2009-09-02 15:24:28

我不是100％確定這是你的問題，但它聽起來像你只需要填充你的容器。

<mx:Style> 
    .nineSliceScalingBackground 
    { 
     background-image: Embed("assets/StageSkin.png", 
     scaleGridTop="53", scaleGridBottom="523", 
     scaleGridLeft="20", scaleGridRight="485"); 

     background-size:"100%"; 

     paddingTop: 53; 
     paddingLeft: 20; 
    } 
</mx:Style>

令人討厭的一件事是填充不適用於Canvas組件。這意味着您需要使用Container作爲您的基類（或者如果您的用例需要，請使用VBox/HBox）。

填充確定父級邊緣和子級邊緣之間的空間量。

您可能還必須明確設置子元素的width以匹配窗口寬度（585-20 = 565）。你不能在CSS中執行此操作，但MXML或ActionScript將起作用。您也可以設置paddingRight並將組件的寬度設置爲100％。

來源

2009-09-02 15:37:02

組件（及其子組件）是否設置了背景顏色？如果是這樣，那麼這些可能會在背景圖片的頂部繪圖，導致它不顯示。

來源

2009-09-02 14:42:04 Herms

否，它沒有設置背景顏色。該圖像正在繪製，但我可以看到，在它的頂部組件被繪製（組件是部分透明的，這就是爲什麼我可以看穿它）。 – Seidleroni 2009-09-02 14:45:22

Adob​​e Flex - 如何在圖像的「窗口」中嵌入組件？

回答

相關問題

Adobe Flex - 如何在圖像的「窗口」中嵌入組件？