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

增加Tint和Shade的Mix系数反算。

Browse Source
This commit is contained in:
徐涛
2025-01-14 09:08:43 +08:00
parent 67aca6926f
commit bd3f6d02ba
4 changed files with 120 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/page-components/color-compare/CompareLayout.module.css
View File

@@ -4,6 +4,9 @@
flex-direction: row;
align-items: stretch;
gap: var(--spacing-m);
&:not(:first-of-type) {
margin-top: var(--spacing-s);
}
.element {
display: flex;
flex-direction: row;
@@ -20,6 +23,11 @@
font-size: var(--font-size-xs);
line-height: var(--font-size-xs);
}
.element_value {
align-self: flex-end;
font-size: var(--font-size-s);
line-height: var(--font-size-s);
}
}
}
}

54
src/page-components/color-compare/ShadeScale.tsx Normal file
View File

@@ -0,0 +1,54 @@
import { useMemo } from 'react';
import { MixReversing } from '../../color_functions/color_module';
import { useColorFunction } from '../../ColorFunctionContext';
import styles from './CompareLayout.module.css';
import { CompareMethodProps } from './share-props';
const defaultMixResult: MixReversing = {
r_factor: 0,
g_factor: 0,
b_factor: 0,
average: 0,
};
export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
const { colorFn } = useColorFunction();
const mixFactors = useMemo(() => {
if (!colorFn) {
return defaultMixResult;
}
try {
const factor = colorFn.shade_scale(basic, compare);
return factor;
} catch (e) {
console.error('[Reversing Tint]', e);
}
return defaultMixResult;
}, [basic, compare]);
return (
<div>
<h6>Compare in RGB Shade.</h6>
<div className={styles.elements}>
<div className={styles.element}>
<div className={styles.element_name}>R</div>
<div className={styles.element_value}>{(mixFactors.r_factor * 100).toFixed(2)}%</div>
</div>
<div className={styles.element}>
<div className={styles.element_name}>G</div>
<div className={styles.element_value}>{(mixFactors.g_factor * 100).toFixed(2)}%</div>
</div>
<div className={styles.element}>
<div className={styles.element_name}>B</div>
<div className={styles.element_value}>{(mixFactors.b_factor * 100).toFixed(2)}%</div>
</div>
</div>
<div className={styles.elements}>
<div className={styles.element}>
<div className={styles.element_name}>Average</div>
<div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
</div>
</div>
</div>
);
}

54
src/page-components/color-compare/TintScale.tsx Normal file
View File

@@ -0,0 +1,54 @@
import { useMemo } from 'react';
import { MixReversing } from '../../color_functions/color_module';
import { useColorFunction } from '../../ColorFunctionContext';
import styles from './CompareLayout.module.css';
import { CompareMethodProps } from './share-props';
const defaultMixResult: MixReversing = {
r_factor: 0,
g_factor: 0,
b_factor: 0,
average: 0,
};
export function TintScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
const { colorFn } = useColorFunction();
const mixFactors = useMemo(() => {
if (!colorFn) {
return defaultMixResult;
}
try {
const factor = colorFn.tint_scale(basic, compare);
return factor;
} catch (e) {
console.error('[Reversing Tint]', e);
}
return defaultMixResult;
}, [basic, compare]);
return (
<div>
<h6>Compare in RGB Tint.</h6>
<div className={styles.elements}>
<div className={styles.element}>
<div className={styles.element_name}>R</div>
<div className={styles.element_value}>{(mixFactors.r_factor * 100).toFixed(2)}%</div>
</div>
<div className={styles.element}>
<div className={styles.element_name}>G</div>
<div className={styles.element_value}>{(mixFactors.g_factor * 100).toFixed(2)}%</div>
</div>
<div className={styles.element}>
<div className={styles.element_name}>B</div>
<div className={styles.element_value}>{(mixFactors.b_factor * 100).toFixed(2)}%</div>
</div>
</div>
<div className={styles.elements}>
<div className={styles.element}>
<div className={styles.element_name}>Average</div>
<div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
</div>
</div>
</div>
);
}