flex的边框渐变

最新推荐文章于 2025-04-22 15:00:35 发布

转载最新推荐文章于 2025-04-22 15:00:35 发布 · 1.9k 阅读

文章标签：

#flex #application #encoding #matrix

flex 专栏收录该内容

82 篇文章

订阅专栏

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

类文件

GradientBorder.as

    Flex代码  
   
  
 /**  
  * 背景渐变色  
  * 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();  
                   
         }  
           
     }  
 }  

调用示例

    Mxml代码  
   
  
 <?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>  