CRM系统前端
查看 | 历史 | 提交 | 提交对比
Vben
2021-04-10 215d8bab380728164d7fe2958c2d2d1151fce892
提交 | 用户 | age
4baf90 1 /**
V 2  * 判断是否 十六进制颜色值.
3  * 输入形式可为 #fff000 #f00
4  *
5  * @param   String  color   十六进制颜色值
6  * @return  Boolean
7  */
144ab5 8 export function isHexColor(color: string) {
581007 9   const reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-f]{6})$/;
4baf90 10   return reg.test(color);
144ab5 11 }
4baf90 12
V 13 /**
14  * RGB 颜色值转换为 十六进制颜色值.
15  * r, g, 和 b 需要在 [0, 255] 范围内
16  *
17  * @return  String          类似#ff00ff
ecfb70 18  * @param r
V 19  * @param g
20  * @param b
4baf90 21  */
144ab5 22 export function rgbToHex(r: number, g: number, b: number) {
4baf90 23   // tslint:disable-next-line:no-bitwise
V 24   const hex = ((r << 16) | (g << 8) | b).toString(16);
25   return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex;
144ab5 26 }
4baf90 27
V 28 /**
29  * Transform a HEX color to its RGB representation
30  * @param {string} hex The color to transform
31  * @returns The RGB representation of the passed color
32  */
144ab5 33 export function hexToRGB(hex: string) {
7692ff 34   let sHex = hex.toLowerCase();
V 35   if (isHexColor(hex)) {
36     if (sHex.length === 4) {
37       let sColorNew = '#';
38       for (let i = 1; i < 4; i += 1) {
39         sColorNew += sHex.slice(i, i + 1).concat(sHex.slice(i, i + 1));
40       }
41       sHex = sColorNew;
42     }
581007 43     const sColorChange: number[] = [];
7692ff 44     for (let i = 1; i < 7; i += 2) {
V 45       sColorChange.push(parseInt('0x' + sHex.slice(i, i + 2)));
46     }
47     return 'RGB(' + sColorChange.join(',') + ')';
48   }
49   return sHex;
144ab5 50 }
7692ff 51
144ab5 52 export function colorIsDark(color: string) {
7692ff 53   if (!isHexColor(color)) return;
V 54   const [r, g, b] = hexToRGB(color)
55     .replace(/(?:\(|\)|rgb|RGB)*/g, '')
56     .split(',')
57     .map((item) => Number(item));
58   return r * 0.299 + g * 0.578 + b * 0.114 < 192;
144ab5 59 }
4baf90 60
V 61 /**
62  * Darkens a HEX color given the passed percentage
63  * @param {string} color The color to process
64  * @param {number} amount The amount to change the color by
65  * @returns {string} The HEX representation of the processed color
66  */
144ab5 67 export function darken(color: string, amount: number) {
4baf90 68   color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
V 69   amount = Math.trunc((255 * amount) / 100);
70   return `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(
71     color.substring(2, 4),
72     amount
73   )}${subtractLight(color.substring(4, 6), amount)}`;
144ab5 74 }
4baf90 75
V 76 /**
77  * Lightens a 6 char HEX color according to the passed percentage
78  * @param {string} color The color to change
79  * @param {number} amount The amount to change the color by
80  * @returns {string} The processed color represented as HEX
81  */
144ab5 82 export function lighten(color: string, amount: number) {
4baf90 83   color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
V 84   amount = Math.trunc((255 * amount) / 100);
85   return `#${addLight(color.substring(0, 2), amount)}${addLight(
86     color.substring(2, 4),
87     amount
88   )}${addLight(color.substring(4, 6), amount)}`;
144ab5 89 }
4baf90 90
V 91 /* Suma el porcentaje indicado a un color (RR, GG o BB) hexadecimal para aclararlo */
92 /**
93  * Sums the passed percentage to the R, G or B of a HEX color
94  * @param {string} color The color to change
95  * @param {number} amount The amount to change the color by
96  * @returns {string} The processed part of the color
97  */
144ab5 98 function addLight(color: string, amount: number) {
4baf90 99   const cc = parseInt(color, 16) + amount;
V 100   const c = cc > 255 ? 255 : cc;
101   return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
144ab5 102 }
4baf90 103
V 104 /**
105  * Calculates luminance of an rgb color
106  * @param {number} r red
107  * @param {number} g green
108  * @param {number} b blue
109  */
144ab5 110 function luminanace(r: number, g: number, b: number) {
4baf90 111   const a = [r, g, b].map((v) => {
V 112     v /= 255;
113     return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
114   });
115   return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
144ab5 116 }
4baf90 117
V 118 /**
119  * Calculates contrast between two rgb colors
120  * @param {string} rgb1 rgb color 1
121  * @param {string} rgb2 rgb color 2
122  */
144ab5 123 function contrast(rgb1: string[], rgb2: number[]) {
V 124   return (
125     (luminanace(~~rgb1[0], ~~rgb1[1], ~~rgb1[2]) + 0.05) /
126     (luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05)
127   );
128 }
4baf90 129
V 130 /**
131  * Determines what the best text color is (black or white) based con the contrast with the background
132  * @param hexColor - Last selected color by the user
133  */
144ab5 134 export function calculateBestTextColor(hexColor: string) {
4baf90 135   const rgbColor = hexToRGB(hexColor.substring(1));
V 136   const contrastWithBlack = contrast(rgbColor.split(','), [0, 0, 0]);
137
138   return contrastWithBlack >= 12 ? '#000000' : '#FFFFFF';
144ab5 139 }
4baf90 140
V 141 /**
142  * Subtracts the indicated percentage to the R, G or B of a HEX color
143  * @param {string} color The color to change
144  * @param {number} amount The amount to change the color by
145  * @returns {string} The processed part of the color
146  */
144ab5 147 function subtractLight(color: string, amount: number) {
4baf90 148   const cc = parseInt(color, 16) - amount;
V 149   const c = cc < 0 ? 0 : cc;
150   return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`;
144ab5 151 }