0

私は Flash Builder 4 を使用しており、学習中です。

短く簡単な説明は、次のようなタブを持つタブ ナビゲーターが必要です。

最初のタブ中タブ

画像ベースのスキンを使用してこれを行うことができることはわかっていますが、プログラムで形状を描画する方がスケーラビリティの点で優れていると考えました (そして間違っている可能性があります)。

探している結果が得られる限り、それが mx であるかスパークであるかはあまり気にしないと思います。私はこれをやってみました：

メインアプリ:

<mx:ButtonBar dataProvider="{vsTabNav}" firstButtonStyle="firstButtonStyle"/>

CSS ファイル:

.firstButtonStyle { skinClass:ClassReference("assets.skins.ButtonBarFirstButtonSkin"); }

ButtonBarFirstButtonSkin.as:

package assets.skins
{
    import flash.display.Graphics;
    import mx.skins.halo.ButtonBarButtonSkin;
    import mx.graphics.RectangularDropShadow;

    public class ButtonBarFirstButtonSkin extends ButtonBarButtonSkin
    {
        private var dropShadow:RectangularDropShadow;

        public function ButtonBarFirstButtonSkin()
        {
            super();
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            var cornerRadius:Number = getStyle("cornerRadius");
            var backgroundColor:int = getStyle("backgroundColor");
            var backgroundAlpha:Number = getStyle("backgroundAlpha");
            graphics.clear();

            cornerRadius = 10;
            backgroundColor = 0xFF0000;
            backgroundAlpha = 1;

            // Background
            drawRoundRect(0, 0, unscaledWidth, unscaledHeight, {tl:1, tr:cornerRadius, bl:1, br:1}, backgroundColor, backgroundAlpha);

            // Shadow
            if (!dropShadow)
                dropShadow = new RectangularDropShadow();

            dropShadow.distance = 8;
            dropShadow.angle = 45;
            dropShadow.color = 0;
            dropShadow.alpha = 0.4;
            dropShadow.tlRadius = 1;
            dropShadow.trRadius = cornerRadius;
            dropShadow.blRadius = 1;
            dropShadow.brRadius = 1;
            dropShadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight);
        }

    }
}

これは、最初のボタンが赤くなり、右上隅が非常に丸くなることを意味します。代わりに、デフォルトのボタンを取得します。何が間違っているのかわかりませんが、それが最善の解決策ではない場合は、助けていただければ幸いです。ありがとう！

4

2 に答える 2

1

まず、http: //www.adobe.com/devnet/flex/articles/flex4_skinning.html をご覧ください。

次に、ButtonBarButtons の最初のスキンを作成し、ボタン バーがそれらをボタンに使用することを確認する方がよいことに気付くはずです。

また、Path クラスを使用して形状を作成することもできます。以下は、あなたと同様の形状を作成する例です。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <s:Path x="10" y="10"
            data="M 0 2 V 18 H 200 Q 190 3 170 0 H 2 L 0 2 Z" 
            width="200" height="20"  >
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" />
                <s:GradientEntry color="0xFDFDFD" ratio="0.6" />
                <s:GradientEntry color="0x8A8A8A" ratio="1" />
            </s:LinearGradient>
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="0x000000" />
        </s:stroke>
    </s:Path>

    <s:Path x="215" y="10"
            data="M 30 0 Q 10 0 0 20 H 200 Q 190 3 170 0 H 30 Z" 
            width="200" height="20"  >
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x8f8f8f" />
                <s:GradientEntry color="0x878787" ratio="0.6" />
                <s:GradientEntry color="0x5d5d5d" ratio="1" />
            </s:LinearGradient>
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="0x000000" />
        </s:stroke>
    </s:Path>
</s:Application>

更新: スケーリングが必要な場合は、Path 要素を Graphic 要素に配置し、その scaleGrid プロパティを設定できます。

<s:Graphic scaleGridTop="1" scaleGridBottom="19" scaleGridLeft="10" scaleGridRight="170"
           width="150" height="15"
           x="10" y="10" 
           >
    <s:Path 
            data="M 0 2 V 18 H 200 Q 190 3 170 0 H 2 L 0 2 Z" 
            width="200" height="20" >
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" />
                <s:GradientEntry color="0xFDFDFD" ratio="0.6" />
                <s:GradientEntry color="0x8A8A8A" ratio="1" />
            </s:LinearGradient>
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="0x000000" />
        </s:stroke>
    </s:Path>
</s:Graphic>
于 2011-07-08T14:52:54.100 に答える
0

それがあなたが達成したいすべての場合 - CSS スタイルで角の半径の値を指定して先に進むことはできませんか? (カスタム スキンなしで)

:)

于 2011-07-07T22:46:07.777 に答える