1

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

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

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

控制板 {
   边框颜色：#ffffff；
   边界阿尔法：1；
   边框厚度：13；
   边界厚度左：0；
   边界厚度顶部：0；
   边界厚度底部：11；
   边界厚度右：0；
   roundedBottomCorners：真；
   角半径：16；
   标头高度：50；
   背景阿尔法：1；
   highlightAlphas: 0.29, 0;
   标题颜色：#999999，#ffffff；
   背景颜色：#ffffff；
   dropShadowEnabled：假；
}

如您所见，有一条细小的单像素线穿过标题。如果我能摆脱那条单像素线，那就完美了！我尝试将borderStyle 属性更改为“solid”，但仍然无法获得正确的样式组合来摆脱该行。

我也尝试过使用另一个带有背景图像的容器作为渐变，但圆角成为一个问题。

任何帮助将不胜感激！

4

3 回答 3

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);

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

于 2010-01-26T20:03:39.723 回答
2

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

.richTextEditor
{
    titleBackgroundSkin: ClassReference("mx.skins.ProgrammaticSkin"); /** Gets rid of the line that was there **/
}
于 2009-08-17T20:47:04.220 回答
0

我没有找到上述特定 Panel 问题的解决方案，但我确实找到了适用于任何容器的整体解决方案：使用 bitmapFill 设置背景图像并圆角。

这对我有用（使用程序化皮肤）：

[样式.css]

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

[渐变头皮肤.as]

包 assets.programmatic
{
    导入 flash.display.Bitmap；
    导入 flash.display.BitmapData；
    导入 mx.skins.ProgrammaticSkin；

    公共类 GradientHeaderSkin 扩展 ProgrammaticSkin
    {
        [嵌入(source=".​​./imgs/panelHeaderGradient.png")]
        私有变量_backgroundImageClass：类；
        私有变量 _backgroundBitmapData:BitmapData;
        私有变量_backgroundImage：位图；
        私有变量 _backgroundColor:uint;

        公共函数 GradientHeaderSkin()
        {
            极好的（）;

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

        覆盖受保护的函数 updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

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

            // 这里指定圆角半径
            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

于 2009-08-03T17:45:49.040 回答