ant-design/5d80df49-async.6de3bdc6.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["5d80df49"],{"5d80df49":function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"texts",{enumerable:!0,get:function(){return o;}}),t("3d74b8ed");let o=[{value:"Hello everyone, I'm ",paraId:0},{value:"Redjue",paraId:0},{value:", and I'm honored to have the opportunity to contribute the ",paraId:0},{value:"ColorPicker",paraId:1},{value:" component to ",paraId:0},{value:"Ant Design",paraId:0},{value:" this year. It's been a great learning experience and has given me a deeper understanding of the development process of ",paraId:0},{value:"Ant Design",paraId:0},{value:". In this article, I will share the specific implementation process.",paraId:0},{value:"Before we start implementing, we need to understand a concept: color models. A color model is a mathematical model used to describe colors. Common color models include ",paraId:2,tocIndex:0},{value:"RGB",paraId:2,tocIndex:0},{value:", ",paraId:2,tocIndex:0},{value:"HSV",paraId:2,tocIndex:0},{value:", ",paraId:2,tocIndex:0},{value:"HEX",paraId:2,tocIndex:0},{value:", etc. Among these color models, ",paraId:2,tocIndex:0},{value:"RGB",paraId:2,tocIndex:0},{value:" is the most common and easiest to understand, so let's start with the ",paraId:2,tocIndex:0},{value:"RGB",paraId:2,tocIndex:0},{value:" color model.",paraId:2,tocIndex:0},{value:"The ",paraId:3,tocIndex:1},{value:"RGB",paraId:3,tocIndex:1},{value:" color model represents colors by the combination of three primary colors (red, green, and blue). The value range of each primary color is 0-255, and the combination of the three primary colors can represent 256",paraId:3,tocIndex:1},{value:"3",paraId:3,tocIndex:1},{value:" colors. These colors can form a cube, as shown in the following figure: ",paraId:3,tocIndex:1},{value:"In the ",paraId:4,tocIndex:1},{value:"RGB",paraId:4,tocIndex:1},{value:" color model, each color can be represented by a triplet ",paraId:4,tocIndex:1},{value:"(R, G, B)",paraId:4,tocIndex:1},{value:", where ",paraId:4,tocIndex:1},{value:"R",paraId:4,tocIndex:1},{value:" represents the value of red, ",paraId:4,tocIndex:1},{value:"G",paraId:4,tocIndex:1},{value:" represents the value of green, and ",paraId:4,tocIndex:1},{value:"B",paraId:4,tocIndex:1},{value:" represents the value of blue. For example, red can be represented as ",paraId:4,tocIndex:1},{value:"rgb(255, 0, 0)",paraId:4,tocIndex:1},{value:", green can be represented as ",paraId:4,tocIndex:1},{value:"rgb(0, 255, 0)",paraId:4,tocIndex:1},{value:", and blue can be represented as ",paraId:4,tocIndex:1},{value:"rgb(0, 0, 255)",paraId:4,tocIndex:1},{value:".",paraId:4,tocIndex:1},{value:"The ",paraId:5,tocIndex:2},{value:"HSV",paraId:5,tocIndex:2},{value:" color model represents colors by hue, saturation, and value. The value range of hue is 0-360, and the value range of saturation and value is 0-100. The ",paraId:5,tocIndex:2},{value:"HSV",paraId:5,tocIndex:2},{value:" color model can be represented by a cone, as shown in the following figure: ",paraId:5,tocIndex:2},{value:"In the ",paraId:6,tocIndex:2},{value:"HSV",paraId:6,tocIndex:2},{value:" color model, each color can be represented by a triplet ",paraId:6,tocIndex:2},{value:"(H, S, V)",paraId:6,tocIndex:2},{value:", where ",paraId:6,tocIndex:2},{value:"H",paraId:6,tocIndex:2},{value:" represents the value of hue, ",paraId:6,tocIndex:2},{value:"S",paraId:6,tocIndex:2},{value:" represents the value of saturation, and ",paraId:6,tocIndex:2},{value:"V",paraId:6,tocIndex:2},{value:" represents the value of value. For example, red can be represented as ",paraId:6,tocIndex:2},{value:"hsv(0, 100, 100)",paraId:6,tocIndex:2},{value:", green can be represented as ",paraId:6,tocIndex:2},{value:"hsv(120, 100, 100)",paraId:6,tocIndex:2},{value:", and blue can be represented as ",paraId:6,tocIndex:2},{value:"hsv(240, 100, 100)",paraId:6,tocIndex:2},{value:".",paraId:6,tocIndex:2},{value:"The ",paraId:7,tocIndex:3},{value:"HEX",paraId:7,tocIndex:3},{value:" color model represents colors by hexadecimal numbers. The first two digits represent the value of red, the middle two digits represent the value of green, and the last two digits represent the value of blue. For example, red can be represented as ",paraId:7,tocIndex:3},{value:"#FF0000",paraId:7,tocIndex:3},{value:", green can be represented as ",paraId:7,tocIndex:3},{value:"#00FF00",paraId:7,tocIndex:3},{value:", and blue can be represented as ",paraId:7,tocIndex:3},{value:"#0000FF",paraId:7,tocIndex:3},{value:". As shown in the following figure: ",paraId:7,tocIndex:3},{value:"This is also the most common way of representing colors because it can be used directly in CSS. Moreover, the representation is very simple, just convert the three numbers in the RGB color model to hexadecimal numbers.",paraId:8,tocIndex:3},{value:"Different algorithms are needed for the conversion of color models. There are many mature libraries on the market that can be selected. In the implementation, we chose the library ",paraId:9,tocIndex:4},{value:"tinycolor",paraId:9,tocIndex:4},{value:", which supports the conversion of multiple color models such as ",paraId:9,tocIndex:4},{value:"RGB",paraId:9,tocIndex:4},{value:", ",paraId:9,tocIndex:4},{value:"HSL",paraId:9,tocIndex:4},{value:", ",paraId:9,tocIndex:4},{value:"HSV",paraId:9,tocIndex:4},{value:", ",paraId:9,tocIndex:4},{value:"HEX",paraId:9,tocIndex:4},{value:", etc. Moreover, its size is very small, only about 10KB, which is very suitable for use in browsers.",paraId:9,tocIndex:4},{value:"Since we need to implement a color picker, we need to choose a color model to represent colors. In terms of complexity, the ",paraId:10,tocIndex:5},{value:"RGB",paraId:10,tocIndex:5},{value:" color model is the simplest because it only needs three numbers to represent a color, and its value range is 0-255, which is very easy to understand. However, the disadvantage of the ",paraId:10,tocIndex:5},{value:"RGB",paraId:10,tocIndex:5},{value:" color model is also very obvious. Its color space is a cube, and the color change at the edge of the cube is very obvious. This color space is not suitable for human visual perception.",paraId:10,tocIndex:5},{value:"Therefore, we need to choose a color model that is more suitable for human visual perception. Here we chose the ",paraId:11,tocIndex:5},{value:"HSV",paraId:11,tocIndex:5},{value:" color model, which represents colors through hue, saturation, and value. This color space is more in line with human visual perception, and the color change at the edge of the color space is not too obvious.",paraId:11,tocIndex:5},{value:"The implementation mainly consists of three parts: the color panel, the selection anchor, and sliders.",paraId:12,tocIndex:6},{value:"Since we are using the ",paraId:13,tocIndex:7},{value:"HSV",paraId:13,tocIndex:7},{value:" color model, we need to represent hue, saturation, and value on the panel.",paraId:13,tocIndex:7},{value:"Hue",paraId:14,tocIndex:7},{value:"background-color: rgb(0, 106, 255);\n",paraId:15,tocIndex:7},{value:"This way we get a blue color with both saturation and brightness set to 100% ",paraId:16,tocIndex:7},{value:"Add brightness overlay",paraId:17,tocIndex:7},{value:"background-color: rgb(0, 106, 255);\nbackground-image: linear-gradient(0deg, rgb(0, 0, 0), transparent);\n",paraId:18,tocIndex:7},{value:"After adding the brightness overlay, we get a blue color with brightness variation ",paraId:19,tocIndex:7},{value:"Add saturation overlay",paraId:20,tocIndex:7},{value:"background-color: rgb(0, 106, 255);\nbackground-image: linear-gradient(0deg, rgb(0, 0, 0), transparent),\n  linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0));\n",paraId:21,tocIndex:7},{value:"After adding the saturation overlay, we get a blue color with brightness variation ",paraId:22,tocIndex:7},{value:"So far, we have obtained a color panel with complete hue, saturation, and brightness.",paraId:23,tocIndex:7},{value:"The implementation of the selection anchor is relatively simple. We only need to correspond the offset position of the anchor to the saturation and brightness of the color panel.",paraId:24,tocIndex:8},{value:"...\nconst { width, height } = containerRef.current.getBoundingClientRect();\nconst { width: targetWidth, height: targetHeight } = targetRef.current.getBoundingClientRect();\nconst centerOffsetX = targetWidth / 2;\nconst centerOffsetY = targetHeight / 2;\n// Saturation\nconst saturation = (offset.x + centerOffsetX) / width;\n// Brightness\nconst bright = 1 - (offset.y + centerOffsetY) / height;\n",paraId:25,tocIndex:8},{value:"The logic is the same as above, we just need to correspond the offset position of the sliders to the hue or alpha of the color.",paraId:26,tocIndex:9},{value:"...\nconst { width, height } = containerRef.current.getBoundingClientRect();\nconst { width: targetWidth, height: targetHeight } = targetRef.current.getBoundingClientRect();\nconst centerOffsetX = targetWidth / 2;\nconst centerOffsetY = targetHeight / 2;\n// Hue\nconst hue = ((offset.x + centerOffsetX) / width) * 360;\n// Opacity\nconst alpha = (offset.x + centerOffsetX) / width;\n",paraId:27,tocIndex:9},{value:"So far, we have obtained a color picker with complete hue, saturation, and brightness, as shown in the following figure: ",paraId:28,tocIndex:9},{value:"Through this development journey, I have gained a deeper understanding of color models and the development process of Ant Design. Thanks to the Ant Design team for giving me this opportunity, and thank you all for reading. If you are interested in the implementation details, you can check out the source code implementation at ",paraId:29,tocIndex:10},{value:"@rc-component/color-picker",paraId:29,tocIndex:10},{value:".",paraId:29,tocIndex:10},{value:"https://zh.wikipedia.org/wiki/%E4%B8%89%E5%8E%9F%E8%89%B2%E5%85%89%E6%A8%A1%E5%BC%8F#/media/File:RGB_color_solid_cube.png",paraId:30,tocIndex:11},{value:"https://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4#/media/File:HSV_cone.png",paraId:30,tocIndex:11},{value:"https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E9%A2%9C%E8%89%B2#/media/File:Web_Color_Charts.svg",paraId:30,tocIndex:11}];}}]);