控件背景渐变色

该例子主要适用于没有fillColors属性的控件和需要自定义渐变开始位置的时候。

控件背景渐变色类文件

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;       
        private var bottomCornerRadius:Number;    
        private var fillColors:Array;            


        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, "pad");

            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();

        }

    }
}

borderMetrics为具有四个属性（left、top、right 和 bottom）的边框返回EdgeMetrics 对象。每个属性值等于边框其中一条边的粗细（以像素为单位）。

verticalGradientMatrix(x:Number, y:Number, width:Number, height:Number):Matrix
创建垂直渐变矩阵的实用程序函数。
x:Number — 渐变的左边缘。
y:Number — 渐变的上边缘。
width:Number — 渐变的宽度。
height:Number — 渐变的高度。
horizontalGradientMatrix是创建水平变矩阵的实用程序函数。

beginGradientFill(type:String, colors:Array, alphas:Array, ratios:Array, matrix:Matrix = null, spreadMethod:String = "pad", interpolationMethod:String = "rgb", focalPointRatio:Number = 0):void

type:String — 用于指定要使用哪种渐变类型的 GradientType 类的值：GradientType.LINEAR (线性)或 GradientType.RADIAL（放射性）。

alphas:Array — colors 数组中对应颜色的 alpha 值数组；有效值为 0 到 1。 如果值小于 0，则默认值为 0。如果值大于 1，则默认值为 1。

ratios:Array — 颜色分布比率的数组；有效值为 0 到 255。该值定义 100% 采样的颜色所在位置的宽度百分比。值 0 表示渐变框中的左侧位置，255 表示渐变框中的右侧位置。

spreadMethod:String (default = "pad") — 用于指定要使用哪种 spread 方法的 SpreadMethod 类的值：SpreadMethod.PAD、SpreadMethod.REFLECT 或 SpreadMethod.REPEAT。

interpolationMethod:String (default = "rgb") — 用于指定要使用哪个值的 InterpolationMethod 类的值：InterpolationMethod.LINEAR_RGB 或 InterpolationMethod.RGB

这个函数里需要注意的是alphas和ratios的长度应该和colors的一样。例如当fillColors里有3个颜色时，alphas可以写成[1,1,1]，ratios可以写成[0,125,255]。

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, #FFFFFF, #0000FF;
            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" cornerRadius="9">
        <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:CheckBox styleName="gradien"/>
    </mx:VBox>

</mx:Application>