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 17:28:58 +08:00
parent d48f007af7
commit 2c3233b519
1 changed files with 99 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
src/pages/Harmonies.tsx
View File

@ -1,9 +1,104 @@
import cx from 'clsx';
import { Outlet } from 'react-router-dom';
import { useMemo, useState } from 'react';
import { useColorFunction } from '../ColorFunctionContext';
import { ColorPicker } from '../components/ColorPicker';
import { VSegmentedControl } from '../components/VSegmentedControl';
import { HarmonyColor } from '../models';
import { HarmonyPreview } from '../page-components/harmonies/HarmonyPreview';
import styles from './Harmonies.module.css';
export function Harmonies() {
const { colorFn } = useColorFunction();
const [seletedColor, setSelectedColor] = useState('000000');
const [selectedMode, setSelectedMode] = useState('complementary');
const generatedColors = useMemo(() => {
try {
console.debug('[Mode]', selectedMode);
const colors: HarmonyColor[] = [];
switch (selectedMode) {
case 'complementary':
{
colors.push({ color: seletedColor, ratio: 65 });
const compColor = colorFn?.complementary(seletedColor) ?? '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: 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: analogousColors[0], ratio: 35 });
colors.push({ color: analogousColors[1], ratio: 10 });
const compColor = colorFn?.complementary(seletedColor) ?? '000000';
colors.push({ color: compColor, ratio: 10 });
}
break;
case 'triadic':
{
colors.push({ color: seletedColor, ratio: 60 });
const triadicColors = colorFn?.triadic(seletedColor) ?? [];
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: 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: tetradicColors[0], ratio: 35 });
colors.push({ color: tetradicColors[1], ratio: 10 });
colors.push({ color: tetradicColors[2], ratio: 10 });
}
break;
case 'flip_tetradic':
{
colors.push({ color: seletedColor, ratio: 55 });
const color120 = colorFn?.shift_hue(seletedColor, 120) ?? '000000';
colors.push({ color: color120, ratio: 35 });
const compColor = colorFn?.complementary(seletedColor) ?? '000000';
colors.push({ color: compColor, ratio: 10 });
const color240 = colorFn?.shift_hue(seletedColor, 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: color90, ratio: 35 });
const compColor = colorFn?.complementary(seletedColor) ?? '000000';
colors.push({ color: compColor, ratio: 10 });
const color270 = colorFn?.shift_hue(seletedColor, 270) ?? '000000';
colors.push({ color: color270, ratio: 10 });
}
break;
default:
break;
}
console.debug('[Generated colors]', colors);
return colors;
} catch (error) {
console.error('[Generate Color Series]', error);
}
return [] as HarmonyColor[];
}, [seletedColor, selectedMode]);
return (
<div className={cx('workspace', styles.harmonies_workspace)}>
<header>
@ -14,10 +109,12 @@ export function Harmonies() {
<aside className={styles.function_side}>
<div>
<h5>Basic color</h5>
<ColorPicker onSelect={setSelectedColor} />
</div>
<div className={styles.mode_navigation}>
<h5>Color selection method</h5>
<VSegmentedControl
onChange={setSelectedMode}
options={[
{ label: 'Complementary', value: 'complementary' },
{ label: 'Analogous', value: 'analogous' },
@ -32,7 +129,7 @@ export function Harmonies() {
</div>
</aside>
<div className={styles.preview_side}>
<Outlet />
<HarmonyPreview colors={generatedColors} />
</div>
</section>
</div>