关于颜色渐变的把控

这要说到最近一次的客户需求了，我遇到了一个问题，地图呈现数据的时候用颜色来表达数值大小。这里用户只要提供2个区间峰值，然后我要根据这个值来获取区间内的某一个色调。

 

代码如下 

 

 

　　

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			
			#color {
				display: flex;
				width: 300px;
			}
		</style>
	</head>
	<body>
	
		
		<div id='color'></div>
	</body>
	<script>
		var toColor = {
			
			toNum (c1 , c2 ,num){
				var ary = []
				num = num - 1;
				for( var i = 0; i < num ; i++ ){
					ary.push(this.to(c1,c2,i/num));
				}
				ary.push(c2);
				return ary;
			},
			
			to: function(c1, c2, v) {

				c1 = this.colorToArray(c1);

				c2 = this.colorToArray(c2);

				if (typeof v === "string" && v.indexOf("%") > 0) {

					v = parseInt(v) / 100;

				}

				c1[0] += parseInt((c2[0] - c1[0]) * v);
				c1[1] += parseInt((c2[1] - c1[1]) * v);
				c1[2] += parseInt((c2[2] - c1[2]) * v);

				return this.ArrayToColor(c1);

			},

			colorToArray: function(color) {

				if (typeof color === "string" && color.indexOf("#") > -1) {

					return this.hexToArray(color);

				}

			},

			hexToArray: function(color) {

				var i = 1;
				var a, b, c;

				a = parseInt("0x" + color.substring(i, i += 2));
				b = parseInt("0x" + color.substring(i, i += 2));
				c = parseInt("0x" + color.substring(i, i += 2));

				return [a, b, c];

			},

			ArrayToColor: function(array) {

				var a, b, c;
				
				a = array[0].toString(16);
				b = array[1].toString(16)
				c = array[2].toString(16);
				if( a.length == 1 ){ a = "0" + a; }
				if( b.length == 1 ){ b = "0" + b; }
				if( c.length == 1 ){ c = "0" + c; }
				return "#" + a + b + c;

			}

		}
	
		var ca = toColor.toNum("#008000","#ff0000",100);
		
		for( var a in ca ){
			var div = document.createElement("div");
			div.style.cssText = "width:15px;height:15px;background: "+ca[a]+";";
			color.appendChild(div);
		}
		
	</script>
</html>

　　

 

这里面开放了一个函数  toColor.to( c1,c2,v );

c1 是指最低值 

c2 是指最高值 （其实就是2个峰值）

v 是靠近度  这是一个百分比值  区间为 0 - 1  允许输入的格式是  '10%' or 0.5

posted @ 2017-10-12 10:45  blurs  阅读(135)  评论(0)    收藏  举报