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)，用上述公式进行计算就是： RStep1=RA=RA+(BA-RA)/Step*N=200+(50-200)/3*1=200-50=150 GStep1=GA=GA+(GA-GA)/Step*N=50+(200-50)/3*1=50+50=100 BStep1=BA=BA+(BA-BA)/Step*N=0 因此RGBStep1=(150,100,0)，同样的方法可以求出RGBStep2=(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);
}
}

 

转载于:https://www.cnblogs.com/myssh/archive/2010/06/23/1763546.html