一个只有一个圆角和渐变背景的 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();
  }

，请查看 这里。希望这有帮助。

Answer 2

按照第二个链接中的步骤操作，但您应该能够使用“drawRoundRectComplex”，而不是使用“drawRect”。不过，您可能需要尝试一些矩阵设置。我好像记得有一些问题。

另一种选择是使用 degrafa。可能有一点学习曲线，但它很强大并且可以做到这一点。