Flex 4 - Как нарисовать фигуру для использования в качестве обложки для ButtonBarButton - PullRequest
Новая
       50

Flex 4 - Как нарисовать фигуру для использования в качестве обложки для ButtonBarButton

0 голосов
/ 08 июля 2011

Я использую Flash Builder 4 и нахожусь в процессе обучения.

Краткое и простое объяснение: я хочу навигатор по вкладкам, который имеет вкладки, которые выглядят следующим образом:

First TabMiddle Tabs

Я знаю, что мог бы сделать это, используя скин на основе изображений, но я подумал (и могу ошибаться), что программное рисование формы будет лучше с точки зрения масштабируемости.

До тех пор, пока я получаю результат, который я ищу, я думаю, мне все равно, мкс или искра.Я пытался сделать это:

Главное приложение: 

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

    }
}

Это должно означать, что первая кнопка будет красной и будет иметь очень круглый верхний правый угол.Вместо этого я просто получаю кнопку по умолчанию.Не уверен, что я делаю не так, но если это не лучшее решение, я бы хотел помочь.Спасибо!

Ответы [ 2 ]

1 голос
/ 08 июля 2011

Во-первых, взгляните на http://www.adobe.com/devnet/flex/articles/flex4_skinning.html

Затем, вы должны понимать, что вам лучше будет создать первые скины для кнопок ButtonBarButton и убедиться, что ваша панель кнопок использует их для своих кнопок.

Также вы можете создавать фигуры с помощью класса 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>
0 голосов
/ 08 июля 2011

Если это все, чего вы хотите достичь - не могли бы вы просто указать значения углового радиуса в стиле CSS и двигаться дальше (без пользовательского скина)?

:)

...