一、前言

ReactColor 是一个优秀的 React 颜色选择器组件,官方给了多种布局供开发者选择。

笔者常用的主题为 Sketch,这种主题涵盖了颜色面板推荐色块RGB颜色输入等功能,比较完善。但是最近在写一个富文本编辑器,编写过程中遇到了一些问题,比如用户在点击推荐色块时,编辑器会失去焦点,无法对字体颜色进行更改。如果是编辑器自有的组件,可以使用以下代码

event.preventDefault();

该代码可以禁止浏览器默认行为,比如点击推荐色块之后只将色值向上传递,而不改变浏览器当前 focus 状态。但是 ReactColor 并没有暴露该事件,故 clone 了源码,在编辑器内集成了该组件,实现功能的同时也能够减少打包体积。

二、实现原理

本章节主要介绍 ReactColor 的实现原理,以比较有代表性的 Sketch 主题为例。

由上图可以看到,整个颜色选择器面板由这六个部分组成,分别是亮度与饱和度调节面板色相 Hue 调节面板透明度调节面板当前颜色的 RGBA 与 Hex 值推荐色块以及颜色实时预览。下面的部分就来介绍其原理实现。

2.1 HSV 色彩模型

与颜色相关的几个属性分别为亮度、饱和度、色相与透明度,与我们平时用到的 RGB 色彩模型不同,ReactColor 中用的是 HSV 色彩模型,其具体含义如下:

下面是维基百科对 HSV 色彩模型的介绍:

HSV即色相饱和度明度(英语:Hue, Saturation, Value),又称HSB,其中B即英语:Brightness。

  • 色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色黄色等。
  • 饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取0-100%的数值。
  • 明度(V),亮度(L),取0-100%。

至于为什么选用 HSV 色彩模型而不是直接使用 RGB,大家在使用 ReactColor 的过程中应该会发现,只要在下方的 色相 Hue 调节面板上选中了颜色,亮度与饱和度调节面板就会呈现什么颜色。举个例子:你选择了黄色,那么最上方调节面板呈现的就是黄色,差别也只是饱和度与明度不同而已。这就是使用 HSV 色彩模型的优势,让用户选择的颜色变成可预知并且方便调节的。


RGB 颜色空间利用三个颜色分量的线性组合来表示颜色,任何颜色都与这三个分量有关,而且这三个分量是高度相关的,所以连续变换颜色时并不直观,想对图像的颜色进行调整需要更改这三个分量才行。自然环境下获取的图像容易受自然光照、遮挡和阴影等情况的影响,即对亮度比较敏感。而 RGB 颜色空间的三个分量都与亮度密切相关,即只要亮度改变,三个分量都会随之相应地改变,而没有一种更直观的方式来表达,而这就是 HSV 色彩模型的优势所在。

2.2 HSV 转 RGB

上面提到,在日常的前端开发过程中还是普遍使用 RGB 色彩模型进行颜色表示,在用户设置好 HSV 值后我们需要将其转为 RGB 值,公式如下(该公式来自维基百科):










这样在用户选择完成后就可以对色彩空间实时转换,通过 onChange 回调返回给用户。

2.3 HSV 色彩模型在 ReactColor 中的实现

既然使用了 HSV 色彩模型就要考虑一下如何表示这三个变量,下面我们分两部分来讲。

2.3.1 Hue 色相

颜色名称 红绿蓝含量 角度 代表物体
红色 R255,G0,B0 血液草莓
橙色 R255,G128,B0 30° 橙子
黄色 R255,G255,B0 60° 香蕉杧果
黄绿 R128,G255,B0 90° 柠檬
绿色 R0,G255,B0 120° 树叶
青绿 R0,G255,B128 150° 军装
青色 R0,G255,B255 180° 水面天空
靛蓝 R0,G128,B255 210° 水面天空
蓝色 R0,G0,B255 240° 墨水
紫色 R128,G0,B255 270° 葡萄茄子
品红 R255,G0,B255 300° 桃子
紫红 R255,G0,B128 330° 墨水

如何横向表示色相呢,只需要一行 CSS 代码:

background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);

这样即可大致表达出 0-360 度的色相值,效果如下:

根据鼠标拖动的位置距离左边界的距离就可以计算出色相值。

/**
* 在颜色值发生变化时实时计算相应的色相值
* @param event
*/
const handleChange = (event: any) => {
if (!ref.current) {
return;
}
const clientRect = ref.current.getBoundingClientRect();
const { width: containerWidth } = clientRect;
const x: number = typeof event.pageX === 'number' ? event.pageX : event.touches[0].pageX;
const left = x - (clientRect.left + window.pageXOffset); let innerHue;
// 处理边界值
if (left < 0) {
innerHue = 0;
} else if (left > containerWidth) {
innerHue = 359;
} else {
const percent = (left * 100) / containerWidth;
innerHue = (360 * percent) / 100;
}
setHue(innerHue);
props.onChange({ h: innerHue });
};

2.3.2 Saturation 饱和度与 Value 明度

饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取0-100%的数值。明度(V)颜色的亮度,不同的颜色具有不同的明度。

在 ReactColor 中按照如下方式来表示饱和度与明度。

其实用 CSS 表示也比较简单,使用渐变色来表示就可以实现该效果。

background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));

与色相的计算方式一样,也是根据鼠标拖动的位置距离左边界和下边界的距离来计算,计算方法可以参考色相的思路

三、总结

大家看完这篇文章应该发现代码部分其实我介绍的不多,更多还是介绍 HSV 色彩模型,以及作者为什么没有使用 RGB 表示。


如果大家去看 react-color 源码就会发现代码其实不难理解,难点还是在 HSV 的应用方法上面,大家如果有需要自己在项目里面定制化颜色选择器的话也可以根据这个思路来,一天之内就可以写出来。

四、参考资料

你知道 react-color 的实现原理吗的更多相关文章

  1. React Native 入门到原理(详解)

    抛砖引玉(帮你更好的去理解怎么产生的 能做什么) 砖一.动态配置 由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题.无论采用何种方式,我们的流程总是可以归结为以下三部曲 ...

  2. 深入理解React:事件机制原理

    目录 序言 DOM事件流 事件捕获阶段.处于目标阶段.事件冒泡阶段 addEventListener 方法 React 事件概述 事件注册 document 上注册 回调函数存储 事件分发 小结 参考 ...

  3. React Hooks 内部实现原理

    React Hooks 内部实现原理 源码分析 // 链表 React Hooks 原理剖析 refs https://reactjs.org/docs/hooks-intro.html https: ...

  4. React Color使用

    需求 - 要在react项目中实现颜色获取器功能 解决方案 - 使用react-color 依赖 - git地址:https://github.com/casesandberg/react-color ...

  5. React 性能调优原理

    一.React影响性能的两个地方 二.调优原理

  6. JavaScript是如何工作的:编写自己的Web开发框架 + React及其虚拟DOM原理

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 19 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  7. 关于React setState的实现原理(二)

    React中的Transaction 大家学过sql server的都知道我们可以批量处理sql语句,原理其实都是基于上一篇我们说的Datch Update机制.当所有的操作均执行成功,才会执行修改操 ...

  8. React同构直出原理浅析

    通常,当客户端请求一个包含React组件页面的时候,服务端首先响应输出这个页面,客户端和服务端有了第一次交互.然后,如果加载组件的过程需要向服务端发出Ajax请求等,客户端和服务端又进行了一次交互,这 ...

  9. 关于React setState的实现原理(三)

    前面提到事务即将结束时,会去调用FLUSH_BATCHED_UPDATES的flushBatchedUpdates方法执行批量更新,该方法会去遍历dirtyComponents,对每一项执行perfo ...

  10. 关于React setState的实现原理(一)

    前言 首先在学习react的时候就对setSate的实现有比较浓厚的兴趣,那么对于下边的代码,可以快速回答吗? class Root extends React.Component { constru ...

随机推荐

  1. CNVD漏洞证书(1)

    之前申请了CNVD原创漏洞,踩了坑,记录一下 有很多师傅写过相关的文章: https://blog.csdn.net/qq1124794084/article/details/82657840 htt ...

  2. v-clickoutsides

    //点击目标元素外侧触发特定事件 使用 v-clickoutsides="clickHandler" import Vue from 'vue' Vue.directive('cl ...

  3. 题解 CF1437G Death DBMS

    这题感觉不是很难,但是既然放在 \(\texttt{EDU}\) 的 \(\texttt{G}\) 题,那么还是写写题解吧. \(\texttt{Solution}\) 首先看到 "子串&q ...

  4. 题解-Happy New Year

    题解-Happy New Year Happy New Year 给定 \(n\),\(m\) 和 \(k\).有一个序列 \(a\{m\}\) 初始值为 \(0\).有 \(n\) 种操作,每种可以 ...

  5. 最简 Spring IOC 容器源码分析

    前言 BeanDefinition BeanFactory 简介 Web 容器启动过程 bean 的加载 FactoryBean 循环依赖 bean 生命周期 公众号 前言 许多文章都是分析的 xml ...

  6. JavaScript:浏览器的本地存储

    cookie.localStorage.sessionStorage的使用 <!DOCTYPE html> <html lang="en"> <hea ...

  7. 10分钟快速入门vue.js

    Vue.js是一个轻巧.高性能.可组件化的MVVM库,一套用于构建用户界面的渐进式框架,上手简单,兼容强大. 官方文档:https://cn.vuejs.org/v2/guide/ 下面我们就直接来使 ...

  8. 【操作系统】页面置换算法(最佳置换算法)(C语言实现)

    [操作系统]页面置换算法(最佳置换算法)(C语言实现) (编码水平较菜,写博客也只是为了个人知识的总结和督促自己学习,如果有错误,希望可以指出) 1.页面置换算法: 在地址映射过程中,若在页面中发现所 ...

  9. CSS文本溢出效果&滚动条样式设置

    一.文本溢出 1.overflow: hidden;  超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...

  10. MySQL02-约束

    1.DQL查询语句 1.1 排序查询 语法:order by 排序字段1 排序方式1 ,  排序字段2 排序方式2... 排序方式: ASC:升序,默认的. DESC:降序. 注意: 如果有多个排序条 ...