0

我正在使用 Flash Builder 4 并且正在学习中。

简短的解释是，我想要一个标签导航器，其标签如下所示：

第一个标签中间标签

我知道我可以使用基于图像的皮肤来做到这一点，但我认为（并且可能是错误的）以编程方式绘制形状在可扩展性方面会更好。

只要我得到我正在寻找的结果，我想我真的不在乎它是 mx 还是 spark。我试过这样做：

主应用：

<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 回答