diff --git a/src/components/ImageCanvas.tsx b/src/components/ImageCanvas.tsx index 2e78080..3c9a9c3 100644 --- a/src/components/ImageCanvas.tsx +++ b/src/components/ImageCanvas.tsx @@ -41,29 +41,27 @@ export const ImageCanvas: React.FC = () => { img.onload = () => { setImage(img); - // 仅在这是新图像时自动适应(没有现有的缩放/平移状态) - if (canvasZoom === 1 && canvasPan.x === 0 && canvasPan.y === 0) { - // 自动适应图像到画布 - const isMobile = window.innerWidth < 768; - const padding = isMobile ? 0.9 : 0.8; // 在移动设备上使用更多屏幕空间 - - const scaleX = (stageSize.width * padding) / img.width; - const scaleY = (stageSize.height * padding) / img.height; - - const maxZoom = isMobile ? 0.3 : 0.8; - const optimalZoom = Math.min(scaleX, scaleY, maxZoom); - - setCanvasZoom(optimalZoom); - - // 居中图像 - setCanvasPan({ x: 0, y: 0 }); - } + // 每次有新图像时都自动适应画布,而不仅仅是在初始状态下 + // 通过比较图像数据来判断是否是新图像 + const isMobile = window.innerWidth < 768; + const padding = isMobile ? 0.9 : 0.8; // 在移动设备上使用更多屏幕空间 + + const scaleX = (stageSize.width * padding) / img.width; + const scaleY = (stageSize.height * padding) / img.height; + + const maxZoom = isMobile ? 0.3 : 0.8; + const optimalZoom = Math.min(scaleX, scaleY, maxZoom); + + setCanvasZoom(optimalZoom); + + // 居中图像 + setCanvasPan({ x: 0, y: 0 }); }; img.src = canvasImage; } else { setImage(null); } - }, [canvasImage, stageSize, setCanvasZoom, setCanvasPan, canvasZoom, canvasPan]); + }, [canvasImage, stageSize, setCanvasZoom, setCanvasPan]); // 处理舞台大小调整 useEffect(() => {