xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整颜色分量的计算。

Browse Source
This commit is contained in:
徐涛 2024-12-31 16:16:00 +08:00
parent bfc0d3bab8
commit b7a165691b
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ColorComponentInput.tsx
View File

@ -1,6 +1,6 @@
import { Icon } from '@iconify/react/dist/iconify.js';
import cx from 'clsx';
import { clamp, divide, floor, multiply, trim } from 'lodash-es';
import { clamp, floor, trim } from 'lodash-es';
import { ChangeEvent, useEffect, useState } from 'react';
import { useColorFunction } from '../ColorFunctionContext';
import styles from './ColorComponentInput.module.css';
@ -50,8 +50,8 @@ export function ColorComponentInput({ color, onChange }: ColorComponentInputProp
try {
const [h, s, l] = colorFn?.represent_hsl(colorValue) ?? [0, 0, 0];
setH(floor(h, 1));
setS(floor(multiply(s, 100), 2));
setL(floor(multiply(l, 100), 2));
setS(floor(s * 100, 2));
setL(floor(l * 100, 2));
} catch (e) {
console.error('[Convert HSL]', e);
}
@ -101,7 +101,7 @@ export function ColorComponentInput({ color, onChange }: ColorComponentInputProp
value += 360;
}
try {
const cHex = colorFn.hsl_to_hex(value, divide(s, 100), divide(l, 100));
const cHex = colorFn.hsl_to_hex(value, s / 100, l / 100);
setH(value);
setHex(cHex);
updateRGB(cHex);
@ -113,7 +113,7 @@ export function ColorComponentInput({ color, onChange }: ColorComponentInputProp
const updateS = (evt: ChangeEvent<HTMLInputElement>) => {
const value = clamp(parseInt(evt.target.value, 10), 0, 100);
try {
const cHex = colorFn.hsl_to_hex(h, divide(value, 100), divide(l, 100));
const cHex = colorFn.hsl_to_hex(h, value / 100, l / 100);
setS(value);
setHex(cHex);
updateRGB(cHex);
@ -125,7 +125,7 @@ export function ColorComponentInput({ color, onChange }: ColorComponentInputProp
const updateL = (evt: ChangeEvent<HTMLInputElement>) => {
const value = clamp(parseInt(evt.target.value, 10), 0, 100);
try {
const cHex = colorFn.hsl_to_hex(h, divide(s, 100), divide(value, 100));
const cHex = colorFn.hsl_to_hex(h, s / 100, value / 100);
setL(value);
setHex(cHex);
updateRGB(cHex);
@ -143,8 +143,8 @@ export function ColorComponentInput({ color, onChange }: ColorComponentInputProp
setB(b);
const [h, s, l] = colorFn?.represent_hsl(color) ?? [0, 0, 0];
setH(floor(h, 1));
setS(floor(multiply(s, 100), 2));
setL(floor(multiply(l, 100), 2));
setS(floor(s * 100, 2));
setL(floor(l * 100, 2));
} catch (e) {
console.error('[Convert RGB]', e);
}