只有一个圆角和渐变背景的VBox
问题描述:
我正在使用Flex 3.4 SDK。只有一个圆角和渐变背景的VBox
我试图以编程方式(是的,必须是这种方式)风格/皮肤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/
但我需要做的是同时应用两者。迄今为止,我所有的编码尝试都失败了。
有人会知道如何正确地做这件事吗?
答
我在博客上有一篇关于如何制作这个确切组件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。希望这可以帮助。
非常感谢您! :)我从来没有使用GraphicsUtil,似乎是什么伎俩。 – camurgo 2009-10-05 18:45:54
您不需要GraphicsUtil类。 “drawRoundRectComplex”是图形对象的一个不良记录功能。 http://livedocs.adobe.com/flex/3/html/help.html?content=Drawing_Vector_Graphics_5.html – Glenn 2009-10-05 19:41:10
好点 - 有时Adobe会提供太多的做事方法。这是我的一个旧项目的一些代码 - 我发誓我现在会更好了! - Casp – 2009-10-05 20:22:43