Создание заголовка Flex Panel с градиентом - PullRequest
Новая
       20

Создание заголовка Flex Panel с градиентом

1 голос
/ 01 августа 2009

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

Два верхних угла должны оставаться закругленными, поэтому градиент должен также заполнять эти округлые области.

На данный момент у меня есть панель mx: со следующими стилями: 

Panel {
   borderColor: #ffffff;
   borderAlpha: 1;
   borderThickness: 13;
   borderThicknessLeft: 0;
   borderThicknessTop: 0;
   borderThicknessBottom: 11;
   borderThicknessRight: 0;
   roundedBottomCorners: true;
   cornerRadius: 16;
   headerHeight: 50;
   backgroundAlpha: 1;
   highlightAlphas: 0.29, 0;
   headerColors: #999999, #ffffff;
   backgroundColor: #ffffff;
   dropShadowEnabled: false;
}

Как видите, есть одна крошечная однопиксельная линия, которая пересекает заголовок. Если бы я мог просто избавиться от этой однопиксельной линии, это было бы прекрасно! Я попытался изменить свойство borderStyle на «solid» и до сих пор не могу получить правильную комбинацию стилей, чтобы избавиться от этой линии.

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

Любая помощь будет принята с благодарностью!

Ответы [ 3 ]

2 голосов
/ 18 августа 2009

Следующий css избавляет от строки, но не позволяет использовать градиентный заголовок. 

.richTextEditor
{
    titleBackgroundSkin: ClassReference("mx.skins.ProgrammaticSkin"); /** Gets rid of the line that was there **/
}
2 голосов
/ 26 января 2010

Преступник для строки под строкой заголовка - это по умолчанию titleBackgroundSkin, связанный с компонентом Panel (mx.skins.halo.TitleBackground). Если вы посмотрите на источник метода updateDisplayList, вы увидите раздел, в котором он рисует фон, содержащий следующие строки: 

            g.lineStyle(0, colorDark, borderAlpha);
            g.moveTo(0, h);
            g.lineTo(w, h);
            g.lineStyle(0, 0, 0);

Если вы создаете свою собственную реализацию, которая делает все то же самое, за исключением этих строк, вы должны получить то, что вам нужно. По крайней мере, я сделал это в моем ограниченном тестовом примере с градиентным заголовком.

0 голосов
/ 03 августа 2009

Я не нашел решения конкретной проблемы Panel выше, но нашел общее решение, которое работает для любого контейнера: установите фоновое изображение с помощью bitmapFill и закруглите углы.

Вот что у меня сработало (используя программный скин):

[styles.css] 

HBox {
    borderSkin:                 ClassReference("assets.programmatic.GradientHeaderSkin");   
}

[GradientHeaderSkin.as] 

package assets.programmatic
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import mx.skins.ProgrammaticSkin;

    public class GradientHeaderSkin extends ProgrammaticSkin
    {
        [Embed(source="../imgs/panelHeaderGradient.png")]
        private var _backgroundImageClass:Class;
        private var _backgroundBitmapData:BitmapData;
        private var _backgroundImage:Bitmap;
        private var _backgroundColor:uint;

        public function GradientHeaderSkin()
        {
            super();

            _backgroundImage = new _backgroundImageClass();
            _backgroundBitmapData = new BitmapData(_backgroundImage.width, _backgroundImage.height);
        }

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

            _backgroundBitmapData.draw(_backgroundImage);
            graphics.clear();
            graphics.beginBitmapFill(_backgroundBitmapData, null, false, false);

            // specify corner radius here
            this.graphics.drawRoundRectComplex(0, 0, this.width, this.height, 20, 20, 20, 20);
        }

    }
}

Вот также пример, который загружает внешнее изображение: http://books.google.com/books?id=7fbhB_GlQEAC&pg=PA106&lpg=PA106&dq=flex+filling+rounded+corners+with+graphic&source=bl&ots=HU_jainH4F&sig=F793bjL0a4nU5wx5wq608h_ZPr0&hl=en&ei=GQd3Spi-OYiYMcLDyLEM&sa=X&oi=book_result&ct=result&resnum=1#v=onepage&q=&f=false

...