颜色处理之color.js

颜色处理之color.js

技术杂谈小彩虹2021-07-13 23:46:2680A+A-
1,介绍

颜色具有三个特性,即色相,明度和饱和度。颜色的这三个特性及其相互关系可以用三度空间的颜色立体来说明。

Color.js是一个能加强前端开发中对颜色处理的第三方库。

假设你已经基本了解色彩通道、色彩空间、色相、饱和度、亮度、不透明度等概念。当然了,相信这些概念难不到你。

2,轻松管理颜色---color.js库

Color.js为前端开发者提供了一个简单的颜色管理的API。使用Color.js,你可以创建一个Color对象来方便的进行一系列的颜色操作,如格式转换、获取单一通道值等,而不用管具体的颜色模型以及相应的转换关系。

color.js库支持RGB、HSV和HSL颜色模型,以及它们各自的alpha通道。它支持CSS中表示颜色的字符串,因此非常方便。如果你的主要关注点是和人眼感知有关的色彩空间的管理(比如你涉及到了Lab模式),而不是颜色处理与转换方面的话,或许colorspace.js会是一个更好的选择。当然,其实平时开发Color.js就已经够用了,至少我还没听过哪个网站使用到了Lab之类的色彩模式。

Color对象是不可变对象(immutable objects,指在被创造之后,它的状态就不可以被改变的对象),API中提供的所有操作都会返回它本身,因此你可以采用链式调用。

3.使用color.js

文档地址:www.npmjs.com/package/col…

当你在你的项目中使用了这个库的时候,你可以从公共命名空间net.brehaut中获取Color。也许你想把它导入到你自己的命名空间里,比如:

image

Color会根据你导入的参数(对象、字符串或是数组)创建一个新对象。需要注意的是,这是一个工厂函数而不是一个构造函数,当然如果你用了new关键字一样会返回新对象。 下面是几种可行的方式:

image

对上述的一个颜色使用API提供的库时,它会返回一个颜色(或者一组颜色),或是一个值。你可以把很多个操纵方法chain起来一起使用。比如:

image

一个常见的场景是为页面中的元素进行一系列的计算,然后,你就能用toCSS方法来把值变成一个合理的CSS颜色格式,像下面的代码一样:

image

API提供的方法大致可分为三类:

  1. Accessor Methods 读取和设置值(例如getHue/setHue);
  2. Color Methods 处理颜色并返回一个新的color对象(比如shiftHue),或者是返回一个数组(比如splitComplementaryScheme)
  3. Conversion and Construction 起到转换或构造作用的方法(比如toCSS)

所有的值都是0-1的浮点数,除了Hue是一个0-360的值(你应该已经了解了基础的色相轮)。

4,Accessor Methods
  • 这类方法是由API自动生成,用于读取或者设置对象的值。
  • getRed() 返回红色通道的值,0~1的浮点数。
  • getBlue()返回蓝色通道的值,0~1的浮点数。
  • getGreen()返回绿色通道的值,0~1的浮点数。
  • setRed(newRed) 设置红色通道的值,返回一个新的color。
  • setGreen(newGreen) 设置蓝色通道的值,返回一个新的color。
  • setBlue(newBlue)设置绿色通道的值,返回一个新的绿色的color。
  • getHue() 返回色相值。
  • setHue(newHue) 设置色相值。
  • getSaturation() 返回饱和值。
  • setSaturation(newSaturation) 设置饱和值。
  • getValue() 返回明度值。
  • setValue(newValue)设置明度值。
  • getLightness()返回亮度值。
  • setLightness(newLightness) 设置亮度值。
  • getAlpha() 返回Alpha值。
  • setAlpha(newAlpha)设置Alpha值。
  • getLuminance() 返回一个0~1的值,表示这个颜色在传统的显示器上显示时,人眼会觉得它有多亮。
5.Color Methods
  • shiftHue(degrees) 参数是一个数值,表示颜色在色相轮上转过的角度,可以是一个负数。比如

  • darkenByAmount(amount) 降低颜色的亮度值,即减少HSL色彩模式的颜色的lightness值。

  • darkenByRadio(radio) 按照一定的比例减少HSL色彩模式的颜色的lightness值。

  • lightenByAmount(amount) 与darkenByAmount()相反。
  • lightenByRatio(amount) 与darkenByRatio()相反
  • devalueByAmount(amount) 减少HSV色彩模式的颜色的明度值。
  • devalueByRatio(ratio) 按一定比例减少HSV色彩模式的颜色的明度值。
  • valueByAmount(amount) 与devalueByAmount()相反。
  • valueByRatio(ratio) 与devalueByRatio()相反。
  • desaturateByAmount(amount)
  • desaturateByRatio(ratio)
  • saturateByAmount(amount)
  • saturateByRatio(ratio)
  • blend(color,alpha) 返回一个混合了的颜色。比如black.blend(white,0)返回的是黑色,black.blend(white,0.5)返回的是灰色,black.blend(white,1)返回的是白色。
6.转换和构造
  • toHSV()转换为HSV色彩模式
  • toRGB()转换为RGB色彩模式
  • toHSL()转换为HSL色彩模式
  • toCSS()css中表示颜色的16进制值。可以有参数,表示返回的颜色每个通道的位数,默认值为2。比如:

  • toString() 返回this.toCSS()。主要是为了给color对象部署一个toString方法,这样会在一些操作,比如进行字符串加法时默认调用。

GitHub地址:github.com/brehaut/col…

Copyright 2017 往逝之因

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们