Question

我在Flash Builder 4中使用Flex 4创建了一个示例桌面应用程序，其中我在BorderContainer中使用了一个按钮。我已将皮肤应用于按钮，其中包括Dropdownshadow，发光滤镜，斜角滤镜和渐变颜色。

但我遇到了同时使用滤镜和渐变填充的问题。使用滤镜时，渐变填充不会显示，反之亦然。请让我知道我在哪里弄错了。

这是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>

对此有何建议？

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

Button image for Reference

Answer 1

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

以下是GlowFilter documentation对knockout属性所说的内容：

指定对象是否具有挖空效果。淘汰效应使对象的填充透明并显示背景颜色该文件。值true指定挖空效果;该默认值为false（无敲门效果）。

Answer 2

好吧，最后我做到了......

使用代码，发现此代码可以正常工作：

<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并得到了结果！

滤色器和渐变颜色不会同时应用于按钮外观

2 个答案: