Apache flex 使用渐变创建柔性面板标题

我需要一个白色的盒子（我使用一个面板，因为我离得很近，但它可以是任何东西），四个角都是圆形的，盒子的顶部需要有一个渐变，从一种颜色（比如说灰色）开始，最后作为背景色（白色）。渐变不会沿整个长方体向下移动

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

到目前为止，我拥有的是一个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; } 面板{ 边框颜色：#ffffff； α：1； 边界厚度：13； borderThicknessLeft:0； 边界厚度上限：0； 边界厚度底部：11； borderThicknessRight:0； 圆角底角：真； 转弯半径：16； 人头：50； 背景α：1； highlightAlphas:0.29,0； 头部颜色：#999999，#ffffff； 背景颜色：#ffffff； dropShadowEnabled:false； } 正如你所看到的，有一条很小的单像素线穿过标题。如果我能去掉那条单像素线，那就太完美了！我已尝试将borderStyle属性更改为“solid”，但仍然无法获得正确的样式组合以消除该线条

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

---

任何帮助都将不胜感激

我没有找到上述特定面板问题的解决方案，但我确实找到了一个适用于任何容器的总体解决方案：使用位图填充和圆角设置背景图像

这就是我的工作原理（使用编程皮肤）：

[styles.css]

HBox { borderSkin: ClassReference("assets.programmatic.GradientHeaderSkin"); } HBox{ borderSkin:ClassReference（“assets.programmated.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); } } } 程序包资产 { 导入flash.display.Bitmap； 导入flash.display.BitmapData； 导入mx.skins.ProgrammaticSkin； 公共类GradientHeaderSkin扩展了ProgrammaticSkin { [Embed（source=“../imgs/panelHeaderGradient.png”）] 私有var_backgroundImageClass:类； 私有变量\u backgroundBitmapData:BitmapData； 私有变量背景图像：位图； 私有变量背景颜色：uint； 公共职能梯度领导者 { 超级（）； _backgroundImage=new_backgroundImageClass（）； _backgroundBitmapData=新的BitmapData（_backgroundImage.width，_backgroundImage.height）； } 重写受保护的函数updateDisplayList（unscaledWidth:Number，unscaledHeight:Number）：无效 { super.updateDisplayList（unscaledWidth、unscaledHeight）； _backgroundBitmapData.draw（_backgroundImage）； graphics.clear（）； graphics.beginBitmapFill（_backgroundBitmapData，null，false，false）； //在此处指定角半径 this.graphics.drawRoundRectComplex（0,0，this.width，this.height，20,20,20）； } } } 以下是加载外部图像的示例：

---

我没有找到上述特定面板问题的解决方案，但我确实找到了适用于任何容器的总体解决方案：使用位图填充和圆角设置背景图像

这就是我的工作原理（使用编程皮肤）：

[styles.css]

HBox { borderSkin: ClassReference("assets.programmatic.GradientHeaderSkin"); } HBox{ borderSkin:ClassReference（“assets.programmated.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); } } } 程序包资产 { 导入flash.display.Bitmap； 导入flash.display.BitmapData； 导入mx.skins.ProgrammaticSkin； 公共类GradientHeaderSkin扩展了ProgrammaticSkin { [Embed（source=“../imgs/panelHeaderGradient.png”）] 私有var_backgroundImageClass:类； 私有变量\u backgroundBitmapData:BitmapData； 私有变量背景图像：位图； 私有变量背景颜色：uint； 公共职能梯度领导者 { 超级（）； _backgroundImage=new_backgroundImageClass（）； _backgroundBitmapData=新的BitmapData（_backgroundImage.width，_backgroundImage.height）； } 重写受保护的函数updateDisplayList（unscaledWidth:Number，unscaledHeight:Number）：无效 { super.updateDisplayList（unscaledWidth、unscaledHeight）； _backgroundBitmapData.draw（_backgroundImage）； graphics.clear（）； graphics.beginBitmapFill（_backgroundBitmapData，null，false，false）； //在此处指定角半径 this.graphics.drawRoundRectComplex（0,0，this.width，this.height，20,20,20）； } } } 以下是加载外部图像的示例：

---

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

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

---

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

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

---

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

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

---

如果您创建了自己的实现，除了这些行之外，所有的功能都是相同的，那么您应该可以得到您所需要的。至少我在使用渐变标题的有限测试用例中做到了这一点。

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

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

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

这确实消除了