浏览 10419 次
锁定老帖子 主题:Flex背景渐变及边框圆滑样式
精华帖 (0) :: 良好帖 (1) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2009-07-03
最后修改:2009-07-03
flex除了application支持背景渐变色外,其它控制都不支持,近日需要这个功能,在网上搜到些资料整理如下:
类文件 GradientBorder.as /** * 背景渐变色 * whisht * */ package { import flash.display.*; import flash.geom.*; import flash.utils.*; import mx.core.EdgeMetrics; import mx.skins.halo.HaloBorder; import mx.utils.ColorUtil; import mx.utils.GraphicsUtil; public class GradientBorder extends HaloBorder { private var topCornerRadius:Number; // top corner radius private var bottomCornerRadius:Number; // bottom corner radius private var fillColors:Array; // fill colors (two) private var setup:Boolean; private function setupStyles():void { fillColors = getStyle("fillColors") as Array; if (!fillColors) fillColors = [0xFFFFFF, 0xFFFFFF]; topCornerRadius = getStyle("cornerRadius") as Number; if (!topCornerRadius) topCornerRadius = 0; bottomCornerRadius = getStyle("bottomCornerRadius") as Number; if (!bottomCornerRadius) bottomCornerRadius = topCornerRadius; } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); setupStyles(); var g:Graphics = graphics; 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.beginGradientFill("linear", fillColors, [1, 1], [0, 255], m); var tr:Number = Math.max(topCornerRadius-2, 0); var br:Number = Math.max(bottomCornerRadius-2, 0); GraphicsUtil.drawRoundRectComplex(g, b.left, b.top, w, h, tr, tr, br, br); g.endFill(); } } }
调用示例 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundImage="" backgroundColor="white"> <mx:Style> .gradient { border-style: solid; border-thickness: 0; border-skin: ClassReference("GradientBorder"); fill-colors: #0099FF, #000099; corner-radius: 10; drop-shadow-enabled: true; } </mx:Style> <mx:Script> <![CDATA[ private function changeStyle():void { box.setStyle("fillColors", [col1.value, col2.value]); box.setStyle("cornerRadius", corner.value); } ]]> </mx:Script> <mx:VBox id="box" styleName="gradient" width="400" height="300" verticalAlign="middle" horizontalAlign="center"> <mx:FormItem label="Color 1:"> <mx:ColorPicker id="col1" change="changeStyle()" selectedColor="0x0099FF"/> </mx:FormItem> <mx:FormItem label="Color 2:"> <mx:ColorPicker id="col2" change="changeStyle()" selectedColor="0x000099"/> </mx:FormItem> <mx:FormItem label="Corner radius:"> <mx:HSlider id="corner" value="10" minimum="0" maximum="100" change="changeStyle()"/> </mx:FormItem> </mx:VBox> </mx:Application>
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |