Flex 4 - 如何绘制形状以用作 ButtonBarButton 的外观

发布于 11-18 18:13 字数 2372 浏览 4 评论 0原文

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

简短的解释是,我想要一个选项卡导航器,其选项卡如下所示:

First TabMiddle Tabs

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

只要我得到我想要的结果,我想我并不真正关心它是 mx 还是 Spark。我尝试这样做:

Main App:

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

CSS File:

.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);
        }

    }
}

这应该意味着第一个按钮将是红色的,并且右上角有一个非常圆的角。相反,我只得到默认按钮。不确定我在那里做错了什么,但如果这不是最好的解决方案,我希望得到一些帮助。谢谢!

I'm using Flash Builder 4 and am in the process of learning.

The short and simple explanation is, I want a tab navigator that has tabs that look like this:

First TabMiddle Tabs

I know I could do this using an image-based skin, but I figured (and could be wrong) that programmatically drawing the shape would be better in terms of scalability.

As long as I get the result I'm looking for, I guess I don't really care if it's mx or spark. I tried doing this:

Main App:

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

CSS File:

.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);
        }

    }
}

This should mean that the first button will be red and will have a very round top-right corner. Instead, I just get the default button. Not sure what I'm doing wrong there, but if that's not the best solution, I would love some help. Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

新人笑2024-11-25 18:13:47

首先,看看 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>

First, have a look at http://www.adobe.com/devnet/flex/articles/flex4_skinning.html

Then, you should realize, you'll be better off creating first skins for your ButtonBarButtons and make sure your button bar uses them for its buttons.

Also, you can create the shapes with the Path class. Following is an example that creates similar shapes to yours:

<?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>

UPDATE:
If you want scaling, you can put the Path element into a Graphic element, and setup its scaleGrid properties:

<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>
两人的回忆2024-11-25 18:13:47

如果这就是您想要实现的目标 - 难道您不能只在 CSS 样式中指定圆角半径值并继续前进(无需自定义皮肤)吗?

:)

If that is all you want to achieve - can't you just specify the corner radius values in the CSS style and move on (without a custom skin)?

:)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文