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

更正一处书写错误。

Browse Source
This commit is contained in:
徐涛
2025-01-02 09:23:05 +08:00
parent 1772d6e047
commit 118b6605d7
1 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/Harmonies.tsx
View File

@@ -11,7 +11,7 @@ import styles from './Harmonies.module.css';
export function Harmonies() {
const { colorFn } = useColorFunction();
const [seletedColor, setSelectedColor] = useAtom(currentPickedColor);
const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
const [selectedMode, setSelectedMode] = useState('complementary');
const generatedColors = useMemo(() => {
try {
@@ -19,49 +19,49 @@ export function Harmonies() {
switch (selectedMode) {
case 'complementary':
{
colors.push({ color: seletedColor, ratio: 65 });
const compColor = colorFn?.complementary(seletedColor) ?? '000000';
colors.push({ color: selectedColor, ratio: 65 });
const compColor = colorFn?.complementary(selectedColor) ?? '000000';
colors.push({ color: compColor, ratio: 35 });
}
break;
case 'analogous':
{
colors.push({ color: seletedColor, ratio: 60 });
const analogousColors = colorFn?.analogous_30(seletedColor) ?? [];
colors.push({ color: selectedColor, ratio: 60 });
const analogousColors = colorFn?.analogous_30(selectedColor) ?? [];
colors.push({ color: analogousColors[0], ratio: 30 });
colors.push({ color: analogousColors[1], ratio: 10 });
}
break;
case 'analogous_with_complementary':
{
colors.push({ color: seletedColor, ratio: 55 });
const analogousColors = colorFn?.analogous_30(seletedColor) ?? [];
colors.push({ color: selectedColor, ratio: 55 });
const analogousColors = colorFn?.analogous_30(selectedColor) ?? [];
colors.push({ color: analogousColors[0], ratio: 35 });
colors.push({ color: analogousColors[1], ratio: 10 });
const compColor = colorFn?.complementary(seletedColor) ?? '000000';
const compColor = colorFn?.complementary(selectedColor) ?? '000000';
colors.push({ color: compColor, ratio: 10 });
}
break;
case 'triadic':
{
colors.push({ color: seletedColor, ratio: 60 });
const triadicColors = colorFn?.triadic(seletedColor) ?? [];
colors.push({ color: selectedColor, ratio: 60 });
const triadicColors = colorFn?.triadic(selectedColor) ?? [];
colors.push({ color: triadicColors[0], ratio: 30 });
colors.push({ color: triadicColors[1], ratio: 10 });
}
break;
case 'split_complementary':
{
colors.push({ color: seletedColor, ratio: 60 });
const splitCompColors = colorFn?.split_complementary(seletedColor) ?? [];
colors.push({ color: selectedColor, ratio: 60 });
const splitCompColors = colorFn?.split_complementary(selectedColor) ?? [];
colors.push({ color: splitCompColors[0], ratio: 30 });
colors.push({ color: splitCompColors[1], ratio: 10 });
}
break;
case 'tetradic':
{
colors.push({ color: seletedColor, ratio: 55 });
const tetradicColors = colorFn?.tetradic(seletedColor) ?? [];
colors.push({ color: selectedColor, ratio: 55 });
const tetradicColors = colorFn?.tetradic(selectedColor) ?? [];
colors.push({ color: tetradicColors[0], ratio: 35 });
colors.push({ color: tetradicColors[1], ratio: 10 });
colors.push({ color: tetradicColors[2], ratio: 10 });
@@ -69,23 +69,23 @@ export function Harmonies() {
break;
case 'flip_tetradic':
{
colors.push({ color: seletedColor, ratio: 55 });
const color120 = colorFn?.shift_hue(seletedColor, 120) ?? '000000';
colors.push({ color: selectedColor, ratio: 55 });
const color120 = colorFn?.shift_hue(selectedColor, 120) ?? '000000';
colors.push({ color: color120, ratio: 35 });
const compColor = colorFn?.complementary(seletedColor) ?? '000000';
const compColor = colorFn?.complementary(selectedColor) ?? '000000';
colors.push({ color: compColor, ratio: 10 });
const color240 = colorFn?.shift_hue(seletedColor, 240) ?? '000000';
const color240 = colorFn?.shift_hue(selectedColor, 240) ?? '000000';
colors.push({ color: color240, ratio: 10 });
}
break;
case 'square':
{
colors.push({ color: seletedColor, ratio: 55 });
const color90 = colorFn?.shift_hue(seletedColor, 90) ?? '000000';
colors.push({ color: selectedColor, ratio: 55 });
const color90 = colorFn?.shift_hue(selectedColor, 90) ?? '000000';
colors.push({ color: color90, ratio: 35 });
const compColor = colorFn?.complementary(seletedColor) ?? '000000';
const compColor = colorFn?.complementary(selectedColor) ?? '000000';
colors.push({ color: compColor, ratio: 10 });
const color270 = colorFn?.shift_hue(seletedColor, 270) ?? '000000';
const color270 = colorFn?.shift_hue(selectedColor, 270) ?? '000000';
colors.push({ color: color270, ratio: 10 });
}
break;
@@ -97,7 +97,7 @@ export function Harmonies() {
console.error('[Generate Color Series]', error);
}
return [] as HarmonyColor[];
}, [seletedColor, selectedMode]);
}, [selectedColor, selectedMode]);
return (
<div className={cx('workspace', styles.harmonies_workspace)}>
@@ -109,7 +109,7 @@ export function Harmonies() {
<aside className={styles.function_side}>
<div>
<h5>Basic color</h5>
<ColorPicker color={seletedColor} onSelect={(color) => setSelectedColor(color)} />
<ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
</div>
<div className={styles.mode_navigation}>
<h5>Color selection method</h5>