flex的边框渐变

flex除了application支持背景渐变色外，其它控制都不支持，近日需要这个功能，在网上搜到些资料整理如下：

 

类文件

GradientBorder.as

Flex代码  

1. /**  
2.  * 背景渐变色  
3.  * whisht  
4.  * */  
5. package {  
6.       
7.     import flash.display.*;  
8.     import flash.geom.*;  
9.     import flash.utils.*;  
10.       
11.     import mx.core.EdgeMetrics;  
12.     import mx.skins.halo.HaloBorder;  
13.     import mx.utils.ColorUtil;  
14.     import mx.utils.GraphicsUtil;  
15.       
16.     public class GradientBorder extends HaloBorder   
17.     {  
18.           
19.         private var topCornerRadius:Number;        // top corner radius  
20.         private var bottomCornerRadius:Number;    // bottom corner radius  
21.         private var fillColors:Array;            // fill colors (two)  
22.         private var setup:Boolean;  
23.           
24.   
25.         private function setupStyles():void  
26.         {  
27.             fillColors = getStyle("fillColors") as Array;  
28.             if (!fillColors) fillColors = [0xFFFFFF, 0xFFFFFF];  
29.               
30.             topCornerRadius = getStyle("cornerRadius") as Number;  
31.             if (!topCornerRadius) topCornerRadius = 0;      
32.               
33.             bottomCornerRadius = getStyle("bottomCornerRadius") as Number;  
34.             if (!bottomCornerRadius) bottomCornerRadius = topCornerRadius;      
35.           
36.         }  
37.           
38.           
39.         override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void  
40.         {  
41.             super.updateDisplayList(unscaledWidth, unscaledHeight);      
42.               
43.             setupStyles();  
44.               
45.             var g:Graphics = graphics;  
46.             var b:EdgeMetrics = borderMetrics;  
47.             var w:Number = unscaledWidth - b.left - b.right;  
48.             var h:Number = unscaledHeight - b.top - b.bottom;  
49.             var m:Matrix = verticalGradientMatrix(0, 0, w, h);  
50.           
51.             g.beginGradientFill("linear", fillColors, [1, 1], [0, 255], m);  
52.               
53.             var tr:Number = Math.max(topCornerRadius-2, 0);  
54.             var br:Number = Math.max(bottomCornerRadius-2, 0);  
55.               
56.             GraphicsUtil.drawRoundRectComplex(g, b.left, b.top, w, h, tr, tr, br, br);  
57.             g.endFill();  
58.                   
59.         }  
60.           
61.     }  
62. }  

 

 

调用示例

Mxml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"   
3.     layout="vertical" backgroundImage="" backgroundColor="white">  
4.       
5.     <mx:Style>  
6.           
7.         .gradient  
8.         {  
9.             border-style: solid;  
10.             border-thickness: 0;  
11.             border-skin: ClassReference("GradientBorder");  
12.             fill-colors: #0099FF, #000099;  
13.             corner-radius: 10;  
14.             drop-shadow-enabled: true;  
15.         }  
16.           
17.     </mx:Style>  
18.       
19.     <mx:Script>  
20.         <![CDATA[  
21.             private function changeStyle():void  
22.             {  
23.                 box.setStyle("fillColors", [col1.value, col2.value]);  
24.                 box.setStyle("cornerRadius", corner.value);  
25.             }  
26.         ]]>  
27.     </mx:Script>  
28.       
29.     <mx:VBox id="box" styleName="gradient" width="400" height="300" verticalAlign="middle" horizontalAlign="center">  
30.         <mx:FormItem label="Color 1:">  
31.             <mx:ColorPicker id="col1" change="changeStyle()" selectedColor="0x0099FF"/>  
32.         </mx:FormItem>  
33.         <mx:FormItem label="Color 2:">  
34.             <mx:ColorPicker id="col2" change="changeStyle()" selectedColor="0x000099"/>  
35.         </mx:FormItem>  
36.         <mx:FormItem label="Corner radius:">  
37.             <mx:HSlider id="corner" value="10" minimum="0" maximum="100" change="changeStyle()"/>  
38.         </mx:FormItem>  
39.     </mx:VBox>  
40.       
41. </mx:Application>