0

我在 flash builder 4 中使用 Flex 4 创建了一个示例桌面应用程序，其中我在 BorderContainer 中使用了一个按钮。我已将皮肤应用于按钮，其中包括下拉阴影、发光滤镜、斜面滤镜和渐变颜色。

但是我面临同时使用滤镜和渐变填充的问题。使用过滤器时，渐变填充不显示，反之亦然。请让我知道我在哪里犯错。

这是 main.mxml 代码：

<s:BorderContainer backgroundColor="#003C7B" verticalCenter="0" horizontalCenter="0" height="350" width="450">
    <s:Button id="btn" label="Select" color="white" verticalCenter="0"  skinClass="BlueButtonSkin" horizontalCenter="0"/>
</s:BorderContainer>

滤镜和渐变填充的皮肤类代码如下：

<s:Rect id="backgroundAndShadow" left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5"
        topLeftRadiusX="5" topLeftRadiusY="5" topRightRadiusX="5" topRightRadiusY="5"
        bottomLeftRadiusX="5" bottomLeftRadiusY="5" bottomRightRadiusX="5" bottomRightRadiusY="5">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry  color="#00366E"/>
            <s:GradientEntry color="#013A8B" />
        </s:LinearGradient>
    </s:fill>
    <s:filters>
        <s:GlowFilter alpha="0.9"  color="#ffffff" inner="false"  knockout="true"  blurX="8" blurY="8" />
        <s:BevelFilter angle="270" distance="5" />
    </s:filters>
</s:Rect>

<s:RectangularDropShadow id="dropShadow" blurX="8" blurY="8" alpha="0.5" distance="5" tlRadius="5" trRadius="5" blRadius="5" brRadius="5"
                         angle="45" color="#000000" left="2" top="0" right="0" bottom="0"/>
<s:Rect id="border" left="0" right="0" top="0" bottom="0" width="75" height="15" 
        topLeftRadiusX="5" topLeftRadiusY="5" topRightRadiusX="5" topRightRadiusY="5"
        bottomLeftRadiusX="5" bottomLeftRadiusY="5" bottomRightRadiusX="5" bottomRightRadiusY="5">
    <s:stroke>
        <s:SolidColorStroke joints="bevel" caps="round" color="#84C2F2" weight="0.3" alpha="0.3"/>
    </s:stroke>
</s:Rect>


<s:Label id="labelDisplay"
         textAlign="center" 
         verticalAlign="middle" 
         maxDisplayedLines="2" 
         horizontalCenter="0" verticalCenter="0"
         left="10" right="10" top="2" bottom="2">
</s:Label>

对此有何建议？

我附上了所需的查找按钮以供参考：

供参考的按钮图像

4

2 回答 2

0

在您的<s:GlowFilter />中，您已将knockout属性设置为true. 因此，在应用该过滤器时，它实际上会剔除应用过滤器的项目的内容。完全删除该属性，或者您可以将其设置为 false，这是默认设置。

以下是GlowFilter 文档对该属性的knockout说明：

指定对象是否具有剔除效果。挖空效果使对象的填充透明并显示文档的背景颜色。值 true 指定击倒效果；默认值为 false（无淘汰效果）。

于 2013-02-28T18:57:27.100 回答
0

好吧，我终于做到了……

玩过代码，发现这段代码可以很好地满足要求：

<s:Rect id="backgroundAndShadow2" left="0" right="0" top="0" bottom="0" 
        topLeftRadiusX="5" topLeftRadiusY="5" topRightRadiusX="5" topRightRadiusY="5"
        bottomLeftRadiusX="5" bottomLeftRadiusY="5" bottomRightRadiusX="5" bottomRightRadiusY="5">
    <s:fill>
        <s:SolidColor color="#4B7CB6" alpha="0.5"/>
    </s:fill>
    <s:filters>
        <s:DropShadowFilter blurX="5" blurY="5" quality="3" strength="0.65" distance="4" />
        <s:GlowFilter blurX="7" blurY="7" quality="3" color="#004DAF"/>
        <s:BevelFilter blurX="1" blurY="1" quality="3" strength="2" highlightColor="#9FC7F5" angle="60" distance="1"/>
        <s:BlurFilter blurX="1.5" blurY="1.5"/>
    </s:filters>
</s:Rect>

<s:Rect id="backgroundAndShadow" left="1.5" right="1.5" top="1.5" bottom="1.5" 
        topLeftRadiusX="5" topLeftRadiusY="5" topRightRadiusX="5" topRightRadiusY="5"
        bottomLeftRadiusX="5" bottomLeftRadiusY="5" bottomRightRadiusX="5" bottomRightRadiusY="5">
    <s:fill>
        <s:LinearGradient scaleX="51" rotation="90">
            <s:GradientEntry ratio="0" color="#013465"/>
            <s:GradientEntry ratio="0.32156863" color="#013A7F"/>
            <s:GradientEntry ratio="1" color="#003990"/>
        </s:LinearGradient>
    </s:fill>
    <s:filters>
        <s:DropShadowFilter inner="true" angle="-130" blurX="2" blurY="0.8" strength="0.5" color="#00275C" alpha="0.8"/>
    </s:filters>
</s:Rect>

<s:Label id="labelDisplay"
         textAlign="center" 
         verticalAlign="middle" 
         maxDisplayedLines="2" 
         horizontalCenter="0" verticalCenter="0"
         left="10" right="10" top="2" bottom="2">
</s:Label>

修改了skinclass，得到了结果！

于 2013-03-02T07:04:14.590 回答