diff --git a/components/image-annotator.tsx b/components/image-annotator.tsx index cfc704be2..cb2d50eaa 100644 --- a/components/image-annotator.tsx +++ b/components/image-annotator.tsx @@ -2,7 +2,7 @@ import React, { useRef, useState, useEffect, useCallback } from "react"; import { createPortal } from "react-dom"; -import { X, Pencil, Circle, ArrowRight, Type, Check, Undo, Trash2, Scissors, Sparkles, Download, Expand, Move, Maximize2 } from "lucide-react"; +import { X, Pencil, Circle, ArrowRight, Type, Check, Undo, Trash2, Scissors, Sparkles, Download, Expand, Move, Maximize2, ZoomIn, ZoomOut } from "lucide-react"; import { Button } from "./ui/button"; import { Input } from "./ui/input"; import { toast } from "sonner"; @@ -539,6 +539,18 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator setDragStart(null); }; + // 尺寸调整:放大图片 + const handleResizeZoomIn = () => { + if (!isResizeMode) return; + setResizeImageScale((prev) => Math.min(prev * 1.2, 5)); // 最大5倍 + }; + + // 尺寸调整:缩小图片 + const handleResizeZoomOut = () => { + if (!isResizeMode) return; + setResizeImageScale((prev) => Math.max(prev / 1.2, 0.1)); // 最小0.1倍 + }; + // 尺寸调整:处理图片缩放(鼠标滚轮) const handleResizeImageWheel = (e: React.WheelEvent) => { if (!isResizeMode || !image) return; @@ -883,18 +895,12 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator // 弹窗内容 const modalContent = (
- {/* 弹窗容器 - 使用与preview-attachment相同的居中方式 */} + {/* 弹窗容器 - 全屏显示 */}
e.stopPropagation()} > {/* 顶部标题栏 */} @@ -960,73 +966,163 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator
- {/* 工具选择栏 */} -
- {/* 工具按钮 */} -
- - - - -
- - {/* 颜色选择 */} -
- {COLORS.map((c) => ( -
+
+ + setResizeCanvasHeight(Number.parseInt(e.target.value) || 1)} + className="w-24 h-8" + min={1} + max={10000} + /> + px +
+
+ + setResizeBackgroundColor(e.target.value)} + disabled={resizeBackgroundTransparent} + className="w-12 h-8 rounded border cursor-pointer disabled:opacity-50" + /> +
+
+ +
+
+ - ))} + + + + + +
- + ) : ( + /* 非尺寸调整模式下显示图片标注工具栏 */ +
+ {/* 工具按钮 */} +
+ + + + +
+ + {/* 颜色选择 */} +
+ {COLORS.map((c) => ( +
+ + {/* 线宽选择 */} +
+ {LINE_WIDTHS.map((w) => ( + + ))} +
+
+ )} {/* 画布区域 - 并排显示原图和处理后的图片 */}
@@ -1050,101 +1146,50 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator 正在加载图片...
) : isResizeMode ? ( - /* 尺寸调整模式 */ -
- {/* 尺寸调整控制面板 */} -
-
- - setResizeCanvasWidth(Number.parseInt(e.target.value) || 1)} - className="w-24 h-8" - min={1} - max={10000} - /> - px -
-
- - setResizeCanvasHeight(Number.parseInt(e.target.value) || 1)} - className="w-24 h-8" - min={1} - max={10000} - /> - px -
-
- - setResizeBackgroundColor(e.target.value)} - disabled={resizeBackgroundTransparent} - className="w-12 h-8 rounded border cursor-pointer disabled:opacity-50" - /> -
-
-