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) => {