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

我的博客上有一篇关于如何制作这个确切组件的帖子Here。

您创建了一个基本的自定义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();
  }

对于演示，请查看Here。希望这会有所帮助。

Answer 2

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

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

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

2 个答案: