flex背景渐变色

backgroundGradientColors="[#dddddd,#ffffff]"



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> 


转载自http://www.iteye.com/topic/419429