react如何获取option的下标和值_js react根据几个颜色点计算区间任意数值对应颜色...

一般用于生成地图上点颜色的。

示例：

const cm=new ColorRangeMaker({color:[[80,163,186],[234,199,54],[217,78,93]],value:[0,200]});

const color=cm.make(100);

console.log(color);

源码

class ColorRangeMaker{

option={};

constructor(option){

let vRange=option.value[1]-option.value[0];

if(option.color.length==2){//仅有两个颜色

let rA=(option.color[1][0]-option.color[0][0])/vRange;

let gA=(option.color[1][1]-option.color[0][1])/vRange;

let bA=(option.color[1][2]-option.color[0][2])/vRange;

this.option={vRange,rA,gA,bA,option};

}else{//两个以上颜色

const makers=[];

let vA=vRange/(option.color.length-1);

for(let i=1;i

const maker=new ColorRangeMaker({color:[option.color[i-1],option.color[i]],

value:[option.value[0]+vA*(i-1),

option.value[0]+vA*i]});

makers.push(maker);

}

this.option={makers,vA,option};

}

}

make(value){

const {makers,vRange,rA,gA,bA,vA,option}=this.option;

if(value

return option.color[0];

}else if(value>option.value[option.value.length-1]){

return option.color[option.color.length-1];

}else{

if(option.color.length==2){//仅有两个颜色

let color=option.color[0].map(a=>a);

let vATmp=value-option.value[0];

color[0]+=parseInt(rA*vATmp);

color[1]+=parseInt(gA*vATmp);

color[2]+=parseInt(bA*vATmp);

return color;

}else{

for(let i=1;i

if(value<=option.value[0]+vA*i){

return makers[i-1].make(value);

}

}

}

}

}

}

export default ColorRangeMaker;