Как создать вертикальный градиент в flex - PullRequest
Новая
       11

Как создать вертикальный градиент в flex

1 голос
/ 03 апреля 2010

Как создать вертикальный градиент в flex.

В настоящее время у меня есть горизонтальный градиент цвета. И работает нормально. Но я не могу понять, как я должен сделать это вертикально (какой курс является требованием)

Я использую styleName = "chatWindowLeftGradient" 

<mx:VBox id="chatTabBarVBox" height="100%" styleName="chatWindowLeftGradient">

</mx:VBox>

И таблица стилей выглядит так: 

<mx:Style>
        .chatWindowLeftGradient{                        
            backgroundImage: ClassReference("custom.GradientBackground");
            backgroundSize: "100%";
            fillColors: #6db263, #a4d9a1;
            fillAlphas: 1, 1;                           
        }

    </mx:Style>

Это дает градиент сверху вниз. Как я могу сделать слева направо ??

С уважением Zeeshan

Ответы [ 3 ]

3 голосов
/ 05 апреля 2010

Это не просто подключится к вашему CSS, но вертикальный градиент в Flex 4 mxml выглядит так: 

<s:Rect right="0" top="0" width="170" bottom="0">
    <s:fill>
        <mx:LinearGradient rotation="90">
            <mx:entries>
                <mx:GradientEntry color="#64574A"/>
                <mx:GradientEntry color="#FFFFCC"/>
            </mx:entries>
        </mx:LinearGradient>
    </s:fill>
</s:Rect>

Вы пытались добавить вращение = "90" в свой стиль?

1 голос
/ 04 февраля 2011

В Flex 3 самый простой способ применить градиент к элементу - это использовать Degrafa и его превосходный класс CSSSkin. Вот несколько хороших примеров его гибкости: Хорошие и простые градиенты с CSSSkin

1 голос
/ 03 апреля 2010

Вы можете сделать это с помощью программного скина.

  1. Создайте новый класс, который наследуется от Border.

  2. Переопределите updateDisplayList примерно так:

    super.updateDisplayList (ш, ч);
    var g: Graphics = this.graphics;

    g.clear ();

    var m: Matrix = new Matrix (); m.createGradientBox (ш, ч); g.lineStyle (0,0,0); g.beginGradientFill (GradientType.LINEAR, [color1, color2], [alpha1, alpha2], [0,0xFF], m); g.drawRect (0,0, ж, з); g.endFill ();

  3. Ссылка на этот класс в качестве темы оформления с использованием ClassReference в разделе стилей.

...