78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
/** 混入颜色透明度 */
|
||
/**
|
||
*
|
||
* @param color #000 ｜ #000000
|
||
* @param opacity 0～1
|
||
* @returns rgba-color []
|
||
*/
|
||
export function convertRgbaColor(color: string, opacity: number | number[], theme: 'dark' | 'light' = 'light'): string[] {
|
||
const hexColorRegex = /^#([A-Fa-f0-9]{3}){1,2}$/;
|
||
if (!hexColorRegex.test(color)) {
|
||
console.error("Invalid color format. Please use '#RGB' or '#RRGGBB'.");
|
||
return [];
|
||
}
|
||
|
||
// 如果颜色值是 "#RGB" 格式，则将其转换为 "#RRGGBB" 格式
|
||
if (color.length === 4) {
|
||
color = color.replace(/^#(.)(.)(.)$/, '#$1$1$2$2$3$3');
|
||
}
|
||
if (Array.isArray(opacity)) {
|
||
return opacity.map(o => {
|
||
// 确保透明度值在有效范围 [0, 1] 内
|
||
return convertRgba(hydrateColor(color, o, theme), o);
|
||
});
|
||
} else {
|
||
return [convertRgba(hydrateColor(color, opacity, theme), opacity)];
|
||
}
|
||
}
|
||
|
||
function hydrateColor(color: string, opacity: number, theme: 'dark' | 'light' = 'light'): string {
|
||
let mergeColor;
|
||
if (theme === 'dark') {
|
||
mergeColor = '#000000';
|
||
} else {
|
||
mergeColor = '#ffffff';
|
||
};
|
||
const weight = Math.max(Math.min(Number(opacity), 1), 0);
|
||
const r1 = Number.parseInt(color.substring(1, 3), 16);
|
||
const g1 = Number.parseInt(color.substring(3, 5), 16);
|
||
const b1 = Number.parseInt(color.substring(5, 7), 16);
|
||
const r2 = Number.parseInt(mergeColor.substring(1, 3), 16);
|
||
const g2 = Number.parseInt(mergeColor.substring(3, 5), 16);
|
||
const b2 = Number.parseInt(mergeColor.substring(5, 7), 16);
|
||
const r = Math.round(r1 * (1 - weight) + r2 * weight);
|
||
const g = Math.round(g1 * (1 - weight) + g2 * weight);
|
||
const b = Math.round(b1 * (1 - weight) + b2 * weight);
|
||
const _r = (`0${(r || 0).toString(16)}`).slice(-2);
|
||
const _g = (`0${(g || 0).toString(16)}`).slice(-2);
|
||
const _b = (`0${(b || 0).toString(16)}`).slice(-2);
|
||
return `#${_r}${_g}${_b}`;
|
||
}
|
||
|
||
function convertRgba(color: string, opacity: number) {
|
||
const r = Number.parseInt(color.slice(1, 3), 16);
|
||
const g = Number.parseInt(color.slice(3, 5), 16);
|
||
const b = Number.parseInt(color.slice(5, 7), 16);
|
||
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
|
||
}
|
||
|
||
/**
|
||
* 根据颜色计算亮度值，用于判断深色还是浅色
|
||
* @param color 16进制颜色
|
||
* @returns
|
||
*/
|
||
export function rgbToLum(color: string) {
|
||
let r = Number.parseInt(color.slice(1, 3), 16);
|
||
let g = Number.parseInt(color.slice(3, 5), 16);
|
||
let b = Number.parseInt(color.slice(5, 7), 16);
|
||
const gamma = (value) => {
|
||
value = value / 255;
|
||
return value <= 0.03928 ? value / 12.92 : Math.pow((value + 0.055) / 1.055, 2.4);
|
||
};
|
||
|
||
r = gamma(r);
|
||
g = gamma(g);
|
||
b = gamma(b);
|
||
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
||
}
|