濾鏡和漸變顏色不能同時應用於按鈕皮膚

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（沒有挖空效應）。