当前位置: 首页 > java >正文

react-color-palette源码解析

项目中用到了react-color-palette组件,以前对第三方组件都是不求甚解,这次想了解一下其实现细节。

简介

react-color-palette 是一个用于创建颜色调色板的 React 组件。它提供了一个简单易用的接口,让开发者可以轻松地创建和管理颜色调色板。该组件很轻量,仅依赖React、Typescript。先来看一下实例:

代码结构

项目有几个核心目录:

  • components
  • css
  • hooks
  • services
  • utils
  • rcp.ts

1、rcp.ts对外暴露的组件和方法,供开发者使用

2、utils提供平台无关的工具函数,比如在Vue中也可使用

3、services提供相对完整的模块工具,也具有平台无关性,以类的形式封装了Color相关的工具函数

4、hooks 提供基于React的hook工具函数,这些工具只能在React组件中使用

5、components存放各个子组件

6、css存放组件样式,这样方便将css打包成独立的文件

各司其职的组件

颜色选择器组件由多个独立组件组合而成,各个组件各司其职,相互协作,共同完成颜色选择器的功能。

  •  Interactive:交互组件,用于处理用户的交互操作、提供鼠标位置信息,如鼠标移动、点击等。
  • Saturation:饱和度组件,基于interactive提供的鼠标位置信息计算颜色的饱和度和明度。
  • Hue:色相组件,基于interactive提供的鼠标x坐标计算颜色的色相。
  • Alpha:透明度组件,基于interactive提供的鼠标x坐标计算颜色的透明度。
  • Fields:输入框组件,用于输入颜色的 RGB、HEX 等格式。

HSV

在具体分析各组件之前,我们先了解一下 HSV 色彩模型。

HSV是一种基于人类视觉感知的色彩模型,用于直观描述和操作颜色,它将颜色分为色相(Hue)、饱和度(Saturation)和明度(Value)三个维度。

HSV色彩模型的主要特点

  • 色相(Hue):表示颜色的种类,取值范围为0到360度。色相的变化通常是从红色开始,依次经过黄色、绿色、青色、蓝色和品红色,最后回到红色。
  • 饱和度(Saturation):表示颜色的纯度或浓度,取值范围为0到100%。饱和度取决于该色中含色成分和消色成分(灰色)的比例。含色成分越大,饱和度越大;消色成分越大,饱和度越小。饱和度为0时,颜色为灰度色;饱和度为100%时,颜色为纯色。
  • 明度(Value):表示颜色的亮度,取值范围为0到100%。明度为0时,颜色为黑色;明度为100%时,颜色为白色。

Saturation组件

在饱和度组件中我们重点关注两个点:

  1. 根据鼠标位置计算颜色的饱和度明度
  2. 可视化地表达颜色的饱和度明度

1、计算饱和度和明度的代码片段

// saturation.component.tsx
const nextColor = ColorService.convert("hsv", {...color.hsv,s: (x / width) * 100,//饱和度计算:0%-100%之间,0%为灰色,100%为最鲜艳的颜色v: 100 - (y / height) * 100,//明度计算:100%-0%之间,从顶部到底部
});

2、可视化地表达颜色的饱和度和明度

/* src/css/rcp.css */
.rcp-saturation {cursor: all-scroll;width: 100%;position: relative;/** 模拟饱和度和明度渐变效果* 实现原理:两层线性渐变背景,一层从上到下,一层从左到右* linear-gradient(to bottom, transparent, black):从上到下,透明到黑色,模拟出明度从高到低的变化* linear-gradient(to right, white, transparent):从左到右,白色到透明,模拟出饱和度从左到右的变化*/background-image: linear-gradient(to bottom, transparent, black), linear-gradient(to right, white, transparent);border-radius: 10px 10px 0 0;
}
// src/components/saturation/saturation.component.tsx
<div ref={saturationRef} style={{ height, backgroundColor: `hsl(${hsl})` }} className="rcp-saturation"><divstyle={{ left: position.x, top: position.y, backgroundColor: `rgb(${rgb})` }}className="rcp-saturation-cursor"/>
</div>

注意.rcp-saturation中的background-imagesaturationRefbackgroundColor,background-image在上,backgroundColor在下,渐变过程两相叠加,展现出颜色在饱和度和明度两个纬度的渐变效果:

最终颜色 = (渐变颜色 × 渐变alpha) + (背景色 × (1 - 渐变alpha))

Hue组件

色相组件也是两点:

  1. 如何根据鼠标x坐标计算颜色的色相
  2. 可视化地表达颜色的色相

1、计算色相的代码片段

// src/components/hue/hue.component.tsx
const nextColor = ColorService.convert("hsv", {...color.hsv,h: (x / width) * 360,//色相计算:0-360度之间,0度为红色,360度为红色
});

2、可视化地表达颜色的色相

.rcp-hue {cursor: ew-resize;position: relative;width: 100%;height: 12px;/** 借助线性渐变模拟色相渐变效果* 实现原理:* 一层线性渐变背景,从左到右,颜色从红色->黄色->绿色->青色->蓝色->品红->红色,* 模拟出色相从左到右的变化*/background-image: linear-gradient(to right,rgb(255, 0, 0),/*红色,对应色相0度*/rgb(255, 255, 0),/*黄色,对应色相60度*/rgb(0, 255, 0),/*绿色,对应色相120度*/rgb(0, 255, 255),/*青色,对应色相180度*/rgb(0, 0, 255),/*蓝色,对应色相240度*/rgb(255, 0, 255),/*品红,对应色相300度*/rgb(255, 0, 0)/*回到红色,对应色相360度*/);border-radius: 10px;
}

Alpha组件

同样两点:

1、计算透明度

2、显示透明度效果

重要的工具 

src/services/color/color.service.ts提供了颜色转换的重要方法,使得可以在HSV、RGB、HEX等数据形式间相互转换。在任何其他项目中都可以使用其中的方法。

思考

代码不是一串生硬的字符,它需要带有现实的意义,它要能更好的去帮人们解决现实的问题

http://www.xdnf.cn/news/9703.html

相关文章:

  • Unity 快捷键
  • Python 字符串入门指南
  • 循环神经网络(RNN)模型
  • vue3 + WebSocket + Node 搭建前后端分离项目 开箱即用
  • 执行npm命令报在此系统禁止运行脚本
  • 多模态大语言模型arxiv论文略读(九十九)
  • 【深度学习】11. Transformer解析: Self-Attention、ELMo、Bert、GPT
  • 【深度学习:进阶篇】--2.3.深度学习正则化
  • 通过远程桌面连接Windows实例提示“出现身份验证错误,无法连接到本地安全机构”错误怎么办?
  • 【Python零基础入门系列】第6篇:Python 的数据结构世界(列表、字典、集合、元组)
  • 深入解析ThreadPoolExecutor设计精髓
  • 数字孪生数据监控如何提升汽车零部件工厂产品质量
  • EasyRTC音视频实时通话助力微信小程序:打造低延迟、高可靠的VoIP端到端呼叫解决方案
  • 园区智能化集成平台汇报方案
  • uniapp 实现腾讯云 IM 消息已读回执
  • Ubuntu Zabbix 钉钉报警
  • 职坐标AI算法实战:TensorFlow/PyTorch深度模型
  • 【案例分享】蓝牙红外线影音遥控键盘:瑞昱RTL8752CJF
  • Python量化交易12——Tushare全面获取各种经济金融数据
  • LVS + Keepalived高可用群集
  • LVS-Keepalived高可用群集
  • 【unity游戏开发——编辑器扩展】EditorApplication公共类处理编辑器生命周期事件、播放模式控制以及各种编辑器状态查询
  • 算法-js-子集
  • 【论文精读】2024 CVPR--Upscale-A-Video现实世界视频超分辨率(RealWorld VSR)
  • 【计算机常识】--环境变量
  • 双路物理CPU机器上安装Ubuntu并部署KVM以实现系统多开
  • k8s上运行的mysql、mariadb数据库的备份记录
  • 低代码——表单生成器Form Generator详解(二)——从JSON配置项到动态渲染表单渲染
  • vscode调试stm32,Cortex Debug的配置文件lanuch.json如何写,日志
  • 《P2324 [SCOI2005] 骑士精神》