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

Question

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

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

То, что я до сих пор является тм: панель со следующими стилями:

 
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» и по-прежнему не могу получить правильную комбинацию стилей, чтобы избавиться от этой строки.

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

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

Answer 1

Я не нашел решения для конкретной проблемы 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

Answer 2

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

.richTextEditor 
{ 
    titleBackgroundSkin: ClassReference("mx.skins.ProgrammaticSkin"); /** Gets rid of the line that was there **/ 
} 

Answer 3

Виновник линия под строкой заголовка фактически 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); 

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