Question

我有一张图片，我们称之为“StageSkin.png”。这是一个实际上只是边框的图像，图像的中间是“窗口化”，这意味着它意味着显示其中的其他信息。它内部的信息是一个组件的形式（基于画布组件，我们称之为'Gauge'）。

我想在'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>

Answer 1

我不是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％。

Answer 2

组件（及其子组件）是否设置了背景颜色？如果是这样那么那些可能会在背景图像上绘制，导致它不显示。

Adobe Flex - 如何在图像的“窗口”中嵌入组件？

2 个答案: