Browse Source

refactor(hooks): 简化水印颜色处理逻辑

移除 HSL 转 RGB 的复杂转换逻辑,直接使用 CSS 变量中的 HSL 值
pull/7851/head
Lgf 5 months ago
parent
commit
3fce96a9bf
  1. 35
      packages/effects/hooks/src/use-watermark.ts

35
packages/effects/hooks/src/use-watermark.ts

@ -9,48 +9,19 @@ const activeInstances = ref<number>(0);
const CSS_VAR_FOREGROUND = '--foreground';
function hslToRgb(h: number, s: number, l: number): [number, number, number] {
s /= 100;
l /= 100;
const k = (n: number) => (n + h / 30) % 12;
const a = s * Math.min(l, 1 - l);
const f = (n: number) =>
l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))];
}
function parseHslValue(hslStr: string): { h: number; s: number; l: number } | null {
const trimmed = hslStr.trim();
const match = trimmed.match(/^(\d+(?:\.\d+)?)(?:deg)?\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%$/);
if (match) {
return {
h: parseFloat(match[1]),
s: parseFloat(match[2]),
l: parseFloat(match[3]),
};
}
return null;
}
function getForegroundColorFromCSS(): string {
try {
const computedStyle = getComputedStyle(document.documentElement);
const foregroundValue = computedStyle.getPropertyValue(CSS_VAR_FOREGROUND).trim();
if (foregroundValue) {
const hsl = parseHslValue(foregroundValue);
if (hsl) {
const [r, g, b] = hslToRgb(hsl.h, hsl.s, hsl.l);
return `rgba(${r}, ${g}, ${b}, 1)`;
}
return `hsl(${foregroundValue})`;
}
} catch (e) {
console.warn('Failed to parse CSS variable for watermark color:', e);
console.warn('Failed to get CSS variable for watermark color:', e);
}
return 'rgba(128, 128, 128, 1)';
return 'hsl(0 0% 50%)';
}
function getColorStops(): { color: string; offset: number }[] {

Loading…
Cancel
Save