Flex 拾色器改变背景

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>