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<option.color.length;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<option.value[0]){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<option.color.length;i++){if(value<=option.value[0]+vA*i){return makers[i-1].make(value);}}}}}
}
export default ColorRangeMaker;

js react根据几个颜色点计算区间任意数值对应颜色相关推荐

Js获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。
Js获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解.插件. **应用场景:**在很多时候,前端开发过程中需要动态的获取图片的主要的颜色值,并根据主色调去调整主题样式的颜色或者模拟 ...
js Date 类型的取值、计算、格式化与 moment.js
js Date 类型的取值.计算.格式化与 moment.js 前言笔者工作多年,作为一个爱思考的程序员,一直在想一个问题:究竟怎样才可以让自己变的更强.. 对不起各位,说的太中二了,让我们重新 ...
Node.js + React + MongoDB 实现 TodoList 单页应用
之前用 Ant Design 开发了一个项目,因此对 React 的特性有了一定的了解,React 使用封装组件的思想,组件各自维护自己的状态和 UI, 组件之间通过 props 传递数据和方法.当状 ...
js中点击按钮时变色，松开后恢复原来的颜色
js中点击按钮时变色,松开后恢复原来的颜色 // class.active{background: #1AB394;}//js<script type="text/javascript ...
uniapp+egg.js+react实现全栈笔记App
软件介绍这是一个笔记App,主要使用的技术是uniapp+egg.js+react 软件预览图片: 首页: 编辑页面.png 编辑和登录页面编辑页面2.png 项目地址: https://gith ...
计算机中的颜色——快速计算颜色的色相值
在之前的文章中,给定一个颜色,它的色相值计算如下: 由公式可知,计算色相时要分为六种情况,计算略显复杂.有没有简单的计算方法呢?来看看下面这个图上面这个图,表示纯色的色相分布,把纯色分为六个部分.仔 ...
vue.js 实现全选，单选，计算商品总价格，商品件数
vue.js 实现全选,单选,计算商品总价格,商品件数 1.标签 <div id="main-body" class="box"> <div ...
js实现按钮点击变色，其他的按钮恢复默认颜色
JavaScript实现按钮点击变色,其他的按钮恢复默认颜色,则需通过循环实现,当有按钮点击的时候,先将所有的按钮的颜色,更改为空,然后在针对,鼠标点击的相应的按钮,进行更改按钮颜色: onclick ...
使用Node.js+React+EUI快速搭建网页应用
0. 起因老板要搞个Log分析工具,数据存储选用的是Elasticsearch,起初想法是做个Kibana的插件,后来觉得依靠Kibana太庞大,而且后期想要把代码直接部署在GitHub page上 ...

js react根据几个颜色点计算区间任意数值对应颜色

js react根据几个颜色点计算区间任意数值对应颜色相关推荐

最新文章

热门文章