滤镜和渐变颜色不能同时应用于按钮皮肤

Question

我已经在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> 

有什么建议？

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

Answer 1

好了，终于我都做到了......

与代码玩过，发现这个代码工作正常需要什么：

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

Answer 2

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

下面介绍一下GlowFilter documentation说了knockout属性：对象

指定是否具有挖空效果。淘汰效果 使对象的填充透明，并显示文档的背景颜色 。值true指定了淘汰赛效果; 默认值为false（没有挖空效应）。