From 6aa250d06e3effe36f6ed22fc099590a133de5cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A2=81=E6=B6=9B?= <work@pandorastudio.cn>
Date: Sun, 14 Sep 2025 03:01:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20=E7=BB=93=E6=9E=9C?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0=E5=AF=B9?=
 =?UTF-8?q?=E9=BC=A0=E6=A0=87=E6=BB=9A=E8=BD=AE=E7=BC=A9=E6=94=BE=E7=9A=84?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ImageCanvas.tsx | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/ImageCanvas.tsx b/src/components/ImageCanvas.tsx
index cd3819f..2e78080 100644
--- a/src/components/ImageCanvas.tsx
+++ b/src/components/ImageCanvas.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { Stage, Layer, Image as KonvaImage, Line } from 'react-konva';
 import { useAppStore } from '../store/useAppStore';
 import { Button } from './ui/Button';
@@ -29,6 +29,11 @@ export const ImageCanvas: React.FC = () => {
   const [isDrawing, setIsDrawing] = useState(false);
   const [currentStroke, setCurrentStroke] = useState<number[]>([]);
 
+  const handleZoom = useCallback((delta: number) => {
+    const newZoom = Math.max(0.1, Math.min(3, canvasZoom + delta));
+    setCanvasZoom(newZoom);
+  }, [canvasZoom, setCanvasZoom]);
+
   // 加载图像并在 canvasImage 变化时自动适应
   useEffect(() => {
     if (canvasImage) {
@@ -77,6 +82,21 @@ export const ImageCanvas: React.FC = () => {
     return () => window.removeEventListener('resize', updateSize);
   }, []);
 
+  // 处理鼠标滚轮缩放
+  useEffect(() => {
+    const container = document.getElementById('canvas-container');
+    if (!container) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? -0.1 : 0.1;
+      handleZoom(delta);
+    };
+
+    container.addEventListener('wheel', handleWheel, { passive: false });
+    return () => container.removeEventListener('wheel', handleWheel);
+  }, [canvasZoom]);
+
   const handleMouseDown = (e: any) => {
     if (selectedTool !== 'mask' || !image) return;
     
@@ -140,11 +160,6 @@ export const ImageCanvas: React.FC = () => {
     setCurrentStroke([]);
   };
 
-  const handleZoom = (delta: number) => {
-    const newZoom = Math.max(0.1, Math.min(3, canvasZoom + delta));
-    setCanvasZoom(newZoom);
-  };
-
   const handleReset = () => {
     if (image) {
       const isMobile = window.innerWidth < 768;