一个只有一个圆角和渐变背景的VBox

Question

我正在使用Flex 3.4 SDK.

我正在尝试以编程方式(是的,必须是这样的)样式/皮肤VBox,使其右上角是圆形的,并且它获得了两种颜色的渐变色底.

我在周围找到的修改示例能够完成两种效果(角落和背景),但只能单独完成:

VBox并非圆角:http://livedocs.adobe.com/flex/3/html/help.html？content = skinning_6.html

具有渐变背景的VBox:http://butterfliesandbugs.wordpress.com/2007/06/08/generic-background-gradient-for-containers/

但我需要做的是同时应用两者.到目前为止,我所有的编码尝试都是默默无闻的.

谁会知道如何正确地做到这一点？

Answer 1

我的博客上有一篇关于如何在这里制作这个精确组件的帖子.

您创建一个基本的自定义MXML组件(在这种情况下扩展为VBox).您可以指定编程外观,即应用斜角和渐变的位置.

程序化皮肤在updateDisplayList函数中完成所有绘制.

以下是一些代码(其余部分在我的博客上,带有演示)

   var g:Graphics = graphics;
   var cn:Number = this.getStyle("cornerRadius");
   var crtl:Number = this.getStyle("cornerRadiusTopLeft") > 0 ? this.getStyle("cornerRadiusTopLeft") : cn;
   var crtr:Number = this.getStyle("cornerRadiusTopRight") > 0 ? this.getStyle("cornerRadiusTopRight") : cn;
   var crbl:Number = this.getStyle("cornerRadiusBottomLeft") > 0 ? this.getStyle("cornerRadiusBottomLeft") : cn;
   var crbr:Number = this.getStyle("cornerRadiusBottomRight") > 0 ? this.getStyle("cornerRadiusBottomRight") : cn;
   var gradFrom:Number = this.getStyle("gradientFrom");
   var gradTo:Number = this.getStyle("gradientTo");

   var b:EdgeMetrics = borderMetrics;
   var w:Number = unscaledWidth - b.left - b.right;
   var h:Number = unscaledHeight - b.top - b.bottom;
   var m:Matrix = verticalGradientMatrix(0, 0, w, h);

   g.clear();
   g.beginGradientFill("linear", [gradFrom, gradTo], [1, 1], [0, 255], m);
   g.lineStyle(1,borderColor,1,true,LineScaleMode.NORMAL,CapsStyle.ROUND,JointStyle.ROUND);
   GraphicsUtil.drawRoundRectComplex(g, b.left, b.top, w, h, crtl, crtr, crbl, crbr);
   g.endFill();
  }

对于演示,请看这里.希望这可以帮助.