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 - 如何在图像的“窗口”中嵌入组件？