日记：色斑图制作之 kriging.js 颜色算法修改回忆记录

关联文章：色板图制作及后端无人值守自动出图kriging.js+chrome+html2canvas.js+DOS+BIGEMAP超低成本实现气象要素色斑图_jessezappy的博客-CSDN博客

当初改了几版，没有记录，现在看不懂了，赶快回忆记录一下：

回忆记录一下 kriging.js 的修改要点：

原版绘图，不能根据值来指定颜色,如下算法：

                z = (grid[i][j]-grid.zlim[0])/range[2];
                if(z<0.0) z = 0.0;
                if(z>1.0) z = 1.0;
                ctx.fillStyle = colors[Math.floor((colors.length-1)*z)]; 

            其仅将计算得到的值锁定在 0 到 1 区间，根据值在这个区间的比例，取得对应比例在色卡数组中的位数以该位数颜色为其颜色。
            也就是说，若你设定的值范围是 0 到 10 ，那么如果最后计算的点中有超过 10 的值，那么其最大值将取代 10 成为颜色定义的上限值
            这样就无法指定值与颜色的关系，所以这里必须修改。
            
一、  修改为，增加一个判断单点值位于设定值具体位置的函数：

                getaidx = function(v,d) {
                    for(let i=0;i<d.length;i++)
                        if(v<=d[i]){
                            return i;//根据值来选定颜色索引号，小于等于
                        }
                    return d.length;
                };

            绘图时的值计算为 Z 值范围也需要修改为直接使用具体值：                

kriging.plot = function(canvas, grid, xlim, ylim, colors,idx) //将设定值数组 idx 传入 
//原始:kriging.plot = function(canvas, grid, xlim, ylim, colors)
                    ....
z =grid[i][j];//  原始:(grid[i][j]-grid.zlim[0])/range[2];//此处可用值直接设置颜色编号20201210 
// if(z<0.0) z = 0.0;
// if(z>1.0) z = 1.0;//z=0.5;
ctx.fillStyle =colors[getaidx(z,idx)];//根据值来选定颜色索引号，小于等于// 原始:colors[Math.floor((colors.length-1)*z)];

            如此即可实现绘图值与颜色的准确对应关系，而不是象原先的设定值范围无效。
            调用方法也做对应调整，增加传入设定值数组：

kriging.plot(canvas, grid,[extent[0], extent[2]], [extent[1], extent[3]], params.colors,params.idx);
//原始:kriging.plot(canvas, grid,[extent[0], extent[2]], [extent[1], extent[3]], params.colors);  

二、同时，为了用两个点之间的渐变颜色作为全图绘图颜色，还可增加另一个颜色算法：

                function getaidx2(v,d,c){
                    if(v<d[0]){return c[0];}
                    if(v>d[1]){return c[c.length-1];}//数组最大值为c.length-1
                    return c[Math.round((c.length-1)*(v-d[0])/(d[1]-d[0]))];//直接返回颜色值，因此渐变颜色为100个起步，故用此算法提高运算速度，不再象 getaidx 的使用循环
                }

            颜色选择处同样修改为

                kriging.plot = function(canvas, grid, xlim, ylim, colors,idx)
                    ...
                z =grid[i][j];//原始: (grid[i][j]-grid.zlim[0])/range[2];//此处可用值直接设置颜色编号20201210 
                // if(z<0.0) z = 0.0;
                // if(z>1.0) z = 1.0;//z=0.5;
                ctx.fillStyle=getaidx2(z,idx,colors);

            同时，色卡设置为渐变色的起点和终点，设定值也改为起点和终点，不再是一组数值序列：

var ctb=[{"v":[6,17],"c":["#C5FCC5","#008000"]},
         {"v":[6,17],"c":["#cef7ef","#00804e"]},
         {"v":[28,39],"c":["#ffff84","#6b0400"]},
         {"v":[0.9,1.6],"c":["#efffce","#548000"]},
         {"v":[101,128],"c":["#ffcece","#aa0000"]},
         {"v":[16,23],"c":["#ffebce","#aa5000"]}
        ];//自定义色板
    ...
//cid为Url传入参数，对应绘图类型。
carr=colorSplit(ctb[cid].c,100);//    colorSplit 用于将两个点之间的颜色分为指定渐变层次的颜色数组 //   ctb[cid].c;
params.colors=carr;
valarr=ctb[cid].v;
params.idx=valarr; 

             
            同样调用方法也做对应调整，增加传入设定值数组：

kriging.plot(canvas, grid,[extent[0], extent[2]], [extent[1], extent[3]], params.colors,params.idx);

三、 下一步，考虑在一那样的指定多点颜色之间进行渐变

先附上颜色渐变算法，

function colorSplit(c,n){
	var c0="",c1="";
	var sR=0,sG=0,sB=0;
	var eR=0,eG=0,eB=0;
	var R=0,G=0,B=0;
	var sctmp="";
	var f=1/3;
	var cs=[];
	c0=c[0];c1=c[1];
	c0=vreplace(c0,"#","");c1=vreplace(c1,"#","");
    sR = parseInt("0x" + mid(c0, 1, 2))
    sG = parseInt("0x" + mid(c0, 3, 2))
    sB = parseInt("0x" + mid(c0, 5, 2))
    
    eR = parseInt("0x" + mid(c1, 1, 2))
    eG = parseInt("0x" + mid(c1, 3, 2))
    eB = parseInt("0x" + mid(c1, 5, 2))
	R=eR-sR;G=eG-sG;B=eB-sB;
	for(var i=0;i<=n;i++){
		f=i/n;
		sctmp="#"+ right("00"+(Math.round(sR+f*R)).toString(16),2)+right("00"+(Math.round(sG+f*G)).toString(16),2)+ right("00"+(Math.round(sB+f*B)).toString(16),2);
		//console.log(sctmp);
		cs.push(sctmp);
	}
	//console.log(cs);
	return cs;
}

多点颜色渐变算法等得闲再补充：