0

Flash Builder4でFlex4を使用してサンプルのデスクトップアプリを作成しました。ここでは、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 />設定しました。したがって、そのフィルターを適用すると、フィルターが適用されたアイテムのコンテンツが文字通りノックアウトされます。そのプロパティを完全に削除するか、デフォルトである false に設定できます。knockouttrue

プロパティについて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>

スキンクラスを変更し、結果を取得しました!

于 2013-03-02T07:04:14.590 に答える