Question

我需要一个白色的盒子（我使用的是Panel，因为我非常接近，但它可以是任何东西），所有四个角都是圆角的，盒子的顶部需要有一个渐变开始颜色（比方说灰色）最终为背景颜色（白色）。渐变不会在整个框中下移。

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

到目前为止我所拥有的是具有以下样式的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

以下css删除了该行，但阻止您使用渐变标题。

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

Answer 2

标题栏下的行的罪魁祸首实际上是与Panel组件关联的默认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 3

我没有找到上述特定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

使用渐变创建Flex Panel标头

3 个答案: