创建带有渐变的 Flex Panel 标题

Question

我需要一个白色的盒子（我使用的是面板，因为我离得很近，但它可以是任何东西），所有四个角都是圆形的，并且盒子的顶部需要有一个以一种颜色开始的渐变（让我们说灰色）并最终作为背景颜色（白色）。 渐变不会沿着整个盒子下降。

顶部两个角必须保持圆形，因此渐变也必须填充这些圆形区域。

到目前为止，我拥有的是一个具有以下样式的 mx:Panel：

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

标题栏下的线条的罪魁祸首实际上是与面板组件关联的默认 titleBackgroundSkin (mx.skins.halo.TitleBackground)。 如果您查看 updateDisplayList 方法的源代码，您会看到它绘制背景的部分，其中包括以下几行：

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

如果您创建自己的实现，除了这些行之外，它执行所有相同的操作，您应该得到您需要的内容。 至少我在有限的测试用例中使用了渐变标题。

Answer 2

下面的 css 去掉了该行，但阻止您使用渐变标题。

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

Answer 3

我没有找到上述特定面板问题的解决方案，但我确实找到了适用于任何容器的整体解决方案：使用 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