D3.js绘制 颜色:RGBHSL和插值 (V3版本)

Posted 2021-11-28 littlespill

颜色和插值

 

计算机中的颜色，常用的标准有RGB和HSL。

 

RGB：色彩模式是通过对红(Red)、绿(Green)、蓝(Blue)三个颜色通道相互叠加来得到额各式各样的颜色。三个通道的值得范围都是0~255，因此总共能表示16777216(255*255*255)种，即一千六百多万种颜色。几乎包括了人类所能识别的所有颜色，是应用最广泛的色彩模式。

HSL：色彩模式是通过色相(Hue)、饱和度(Saturation)、明度(Lightness)三个通道的相互叠加来得到各种颜色的。其中，色相的范围为0°~360°，饱和度的范围为0~1，明度的范围为0~1.色相的取值是一个角度，每个角度可以代表之中的一种颜色，需要记住的是0°或360°代表红色，120°代表绿色，240°代表蓝色。饱和度的数值越大，颜色越鲜艳，灰色越少。明度值用于控制色彩的明暗变化，值越大，越明亮，越接近于白色。值越小，越暗，越接近黑色。

 

RGB颜色和HSL颜色可以相互转换。

 

一 、D3中提供了RGB颜色的创建、调整明暗、转换为HSL模式的方法，方法如下:

 

d3.rgb(r,g,b)

//分别输出r、g、b值来创建颜色，范围都为[0,255]。

 

d3.rgb(color)

//输入相应的字符串来创建颜色，例如:

(1)RGB的十进制值；"rgb(255,255,255)"。

(2)HSL的十进制值: "hsl(120,0.5,0.5)"。

(3)RGB的十六进制值: "#ffeeaa"。

(4)RGB的十六进制值得缩写形式:"#fea"。

(5)颜色的名称: "red","white"。

 

rgb.brighter([k])

//颜色变得更明亮。RGB各通道的值乘以0.7^-k。如果k省略，k的值为1.只有当某通道的值得范围在30~255之间时，才会进行相应的计算。

 

rgb.darker([k])

//颜色变得更暗。RGB各通道的值乘以0.7^k。

 

rgb.hsl()

//返回该颜色对应的HSL值。

 

rgb.toString()

//以字符串形式返回该颜色的值，如"#ffeeaa"。

brighter()和darker()返回一个新的颜色对象，不会改变当前颜色对象。hsl()返回当前颜色对应的HSL值，也是一个新的对象。举个例子:

 

 1 //RGB
 2         var color1 = d3.rgb(40,80,0)
 3         var color2 = d3.rgb("red")
 4         var color3 = d3.rgb("rgb(0,255,255)")
 5 
 6         //将color1的颜色变亮
 7         console.log(color1.brighter(2))         //返回值的颜色为{r: 81, g: 163, b: 0}
 8         console.log(color1)                     //原颜色值不变依然返回{r: 40, g: 80, b: 0}
 9 
10         //将color2的颜色变亮
11         console.log(color2.darker(2))           //返回值的颜色为{r: 124, g: 0, b: 0}
12         console.log(color2)                     //原颜色值不变依然返回{r: 255, g: 0, b: 0}
13 
14         //输出color3颜色的HSL值
15         console.log(color3.hsl())               //返回值{h: 180, s: 1, l: 0.5}
16 
17         console.log(color3.toString())          //返回#00ffff

 

 

二 、HSL颜色的创建和使用与d3.rgb几乎一样，只是各颜色通道的意义不同。

 

d3.hsl(h,s,l)

//根据h、s、l的值来创建HSL颜色。

 

d3.hsl(color)

//根据字符串来创建HSL颜色。

 

hsl.beighter([k])

//变得更亮

 

hsl.darker([k])

//变得更暗

 

hsl.rgb()

//返回对应的RGB颜色。

 

hsl.toString()

//以RGB字符串形式输出该颜色。

 

对于HSL颜色来说，brighter()和darker()更好理解，因为HSL的"L"就是明亮度。也就是说，应用brighter()或darker()后，只有h、s、l中的第三个颜色通道"l"发生变化。举个例子:

 

 1 //HSL
 2         var hsl = d3.hsl(120,1.0,0.5);
 3 
 4         //变得更亮
 5         console.log(hsl.brighter())             //输出{h: 120, s: 1, l: 0.7142857142857143}
 6 
 7         //变得更暗
 8         console.log(hsl.darker())               //输出 {h: 120, s: 1, l: 0.35}
 9 
10         //返回对应的rgb值
11         console.log(hsl.rgb())                  //输出{r: 0, g: 255, b: 0}
12 
13         console.log(hsl.toString())             //输出#00ff00

 

一般来说，编程人员喜欢使用RGB颜色，比较好理解。美术人员更喜欢使用HSL颜色，方便调整饱和度和亮度。

 

 

三 、插值

 

如果要计算介于两个颜色之间的颜色，需要用到插值(Interpolation)。D3提供了d3.intrerpolateRgb()来处理RGB颜色之间的插值运算，d3.interpolateHsl()来处理HSL颜色之间的插值运算。更方便的是使用d3.interpolate()，它会自动判断颜色的类型。d3.interpolate()也可以处理数值、字符串等之间的插值。举个例子:

 

 1 //插值
 2         var a = d3.rgb(255,0,0)                 //红色
 3         var b = d3.rgb(0,255,0)                 //绿色
 4         var compute = d3.interpolate(a,b)
 5 
 6         console.log(compute(0))                 //输出#ff0000
 7         console.log(compute(0.2))               //输出#cc3300
 8         console.log(compute(0.5))               //输出#808000
 9         console.log(compute(1))                 //输出#00ff00
10 
11         console.log(compute(2))                 //输出#00ff00
12         console.log(compute(-1))                //输出#ff0000

 

这段代码里，定义了两个RGB颜色：红(255,0,0)和绿(0,255,0)。然后，以这两个颜色对象作为d3.interpolate(a,b)的参数。d3.interpolate返回一个函数，保存在变量compute里。于是，compute可当做函数使用，参数是一个数值。

当数值为0时，返回红色。

当数值为1时，返回绿色。

当数值为0~1之间的值时，返回介于红色和绿色之间的颜色。

如果数值超过1，则返回绿色：数值小于0，则返回红色。