Flex RGB 颜色渐变

均匀渐变

以下是理论：

渐变(Gradient)是美学中一条重要的形式美法则，与其相对应的是突变。形状、大小、位置、方向、色彩等视觉因素都可以进行渐变。在色彩中，色相、明度、纯度也都可以产生渐变效果，并会表现出具有丰富层次的美感。本文主要讲述两种颜色RGB数值的渐变算法。

已知：A=50，B=200，A、B之间平均分成3份（Step=3），求每份的数值（StepN）分别是多少。

公式：Gradient = A + (B-A) / Step * N

[注]编程时为了提高效率避免浮点运算，往往把除法放在最后面，这样公式就成了：Gradient = A + (B-A) * N / Step

Step=3时，根据公式可以求出Step1=A+(A-B)/3*1=50+(200-50)/3=100，Step2=A+(A-B)/3*2=50+(200-50)/3*2=150。这就是均匀渐变的算法原理了，很简单，小学知识。

两种颜色的渐变就是对两种颜色的RGB通道分别进行这样的计算，例如两种颜色分别是RGB(200,50,0)和RGB(50,200,0)，用上述公式进行计算就是：

R_Step1=R_A=R_A+(B_A-R_A)/Step*N=200+(50-200)/3*1=200-50=150

G_Step1=G_A=G_A+(G_A-G_A)/Step*N=50+(200-50)/3*1=50+50=100

B_Step1=B_A=B_A+(B_A-B_A)/Step*N=0

因此RGB_Step1=(150,100,0)，同样的方法可以求出RGB_Step2=(100,150,0)。

代码中具体实现，我这里用到的GIS栅格话务量的渲染，共分为5渐变种颜色，根据栅格的话务量进行分级，然后根据话务量大小去渐变颜色

效果图如下，由于只是部分测试数据，所以效果不是很明显，在全栅格渲染的时候，看起来还是不错的，目前只有0~157的话务量看起来比较明显了，这个也跟地图底色的反差有关系：

 

var redArr:Array=new Array();
        var greenArr:Array=new Array();
        var blueArr:Array=new Array();

        var redArrEnd:Array=new Array();
        var greenArrEnd:Array=new Array();
        var blueArrEnd:Array=new Array();

        redArr.push(200);
        greenArr.push(218);
        blueArr.push(249);
        redArrEnd.push(0);
        greenArrEnd.push(0);
        blueArrEnd.push(255);

        redArr.push(165);
        greenArr.push(225);
        blueArr.push(250);
        redArrEnd.push(0);
        greenArrEnd.push(255);
        blueArrEnd.push(255);

        redArr.push(150);
        greenArr.push(206);
        blueArr.push(129);
        redArrEnd.push(0);
        greenArrEnd.push(255);
        blueArrEnd.push(0);

        redArr.push(183);
        greenArr.push(235);
        blueArr.push(116);
        redArrEnd.push(255);
        greenArrEnd.push(255);
        blueArrEnd.push(0);

        redArr.push(253);
        greenArr.push(89);
        blueArr.push(0);
        redArrEnd.push(255);
        greenArrEnd.push(0);
        blueArrEnd.push(0);

for (var i:int=0; i < len; i++)
        {
            myGraphic=featureSet.features[i];
            var boolean:Boolean=false;
            for (var j:int=0; j < gridData.length(); j++)
            {
                if (myGraphic.attributes.AREA_ID == gridData[j].GRID_NAME)
                {
                    rgbIndex=gridData[j].TRAFFIC / levelValue;//等级
                    fLevel=(gridData[j].TRAFFIC / (levelValue * (rgbIndex + 1))) * gSize;//计算所占百分比

                    red=redArr[rgbIndex] + (redArrEnd[rgbIndex] - redArr[rgbIndex]) / gSize * fLevel;
                    green=greenArr[rgbIndex] + (greenArrEnd[rgbIndex] - greenArr[rgbIndex]) / gSize * fLevel;
                    blue=blueArr[rgbIndex] + (blueArrEnd[rgbIndex] - blueArr[rgbIndex]) / gSize * fLevel;

                    color=fixedInt(rgbToInt(red, green, blue));
                    myGraphic.toolTip="栅格：" + gridData[j].GRID_NAME + "话务量：" + gridData[j].TRAFFIC;
                    myGraphic.symbol=new SimpleFillSymbol("", Number(color), 0.5);
                    queryGraphicsLayer.add(myGraphic);
                    unionedExtent=unionedExtent.union(Polygon(myGraphic.geometry).extent);
                    delete gridData[j];
                    boolean=true;
                    break;
                }
            }
            if (!boolean)
            {
                red=redArr[0];
                green=greenArr[0];
                blue=blueArr[0];

                color=fixedInt(rgbToInt(red, green, blue));
                myGraphic.symbol=new SimpleFillSymbol("", Number(color), 0.5);
                queryGraphicsLayer.add(myGraphic);
            }
        }