diff --git a/src/app/page.tsx b/src/app/page.tsx
index bdfb055..1afe10e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1903,14 +1903,14 @@ export default function Home() {
- 使用右上角悬浮调色盘进行上色操作
+ 使用右上角菜单操作
|
-
Ctrl/Cmd+滚轮缩放
+
推荐电脑操作,上色更精准
@@ -2204,6 +2204,7 @@ export default function Home() {
onClearSelection={() => setMagnifierSelectionArea(null)}
isFloatingActive={activeFloatingTool === 'magnifier'}
onActivateFloating={handleActivateMagnifier}
+ highlightColorKey={highlightColorKey}
/>
{/* 放大镜选择覆盖层 */}
diff --git a/src/components/MagnifierTool.tsx b/src/components/MagnifierTool.tsx
index 71242c6..f8ec49d 100644
--- a/src/components/MagnifierTool.tsx
+++ b/src/components/MagnifierTool.tsx
@@ -15,6 +15,7 @@ interface MagnifierToolProps {
onClearSelection: () => void;
isFloatingActive: boolean;
onActivateFloating: () => void;
+ highlightColorKey?: string | null;
}
interface SelectionArea {
@@ -34,7 +35,8 @@ const MagnifierTool: React.FC = ({
selectionArea,
onClearSelection,
isFloatingActive,
- onActivateFloating
+ onActivateFloating,
+ highlightColorKey
}) => {
// 计算初始位置,确保在屏幕中央
const getInitialPosition = () => ({
@@ -102,6 +104,17 @@ const MagnifierTool: React.FC = ({
magnifiedCellSize
);
+ // 如果有高亮颜色且当前像素不是目标颜色,添加灰度蒙版
+ if (highlightColorKey && pixel.color.toUpperCase() !== highlightColorKey.toUpperCase()) {
+ ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'; // 60% 透明度的黑色蒙版,与预览画布一致
+ ctx.fillRect(
+ canvasCol * magnifiedCellSize,
+ canvasRow * magnifiedCellSize,
+ magnifiedCellSize,
+ magnifiedCellSize
+ );
+ }
+
// 绘制网格线
ctx.strokeStyle = '#e0e0e0';
ctx.lineWidth = 1;
@@ -114,7 +127,7 @@ const MagnifierTool: React.FC = ({
}
}
}
- }, [selectionArea, mappedPixelData, getSelectionDimensions]);
+ }, [selectionArea, mappedPixelData, getSelectionDimensions, highlightColorKey]);
// 处理放大视图点击
const handleMagnifiedClick = useCallback((event: React.MouseEvent) => {