diff --git a/components/image-annotator.tsx b/components/image-annotator.tsx index 1b63807..6e14a9d 100644 --- a/components/image-annotator.tsx +++ b/components/image-annotator.tsx @@ -84,7 +84,7 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator img.src = imageUrl; }, [imageUrl]); - // 初始化 canvas - 适配弹窗大小 + // 初始化 canvas - 适配弹窗大小,固定编辑器大小,图片缩小显示 useEffect(() => { if (!canvasRef.current || !image || !containerRef.current) return; @@ -93,12 +93,13 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator const context = canvas.getContext("2d"); if (!context) return; - // 弹窗内画布区域大小(减去工具栏和边距,考虑并排显示) + // 固定弹窗内画布区域大小(减去工具栏和边距,考虑并排显示) + // 弹窗固定为 1200px x 550px,画布区域约为 1100px x 350px(单图)或 550px x 350px(双图) const containerWidth = processedImageBase64 ? 550 : 1100; // 如果有处理后图片,每个区域550px;否则1100px - const containerHeight = 350; // 550 - 工具栏高度 + const containerHeight = 350; // 550 - 工具栏高度(约200px) const scaleX = containerWidth / image.width; const scaleY = containerHeight / image.height; - const newScale = Math.min(scaleX, scaleY, 1); // 不放大,只缩小 + const newScale = Math.min(scaleX, scaleY, 1); // 不放大,只缩小以适应固定容器 setScale(newScale); @@ -563,11 +564,16 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator }; return ( -
- {/* 弹窗容器 */} +
+ {/* 弹窗容器 - 固定在屏幕中央,固定大小 */}
e.stopPropagation()} > {/* 顶部标题栏 */} @@ -774,7 +780,7 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator {/* 文字输入弹窗 */} {textPosition && ( -
setTextPosition(null)}> +
setTextPosition(null)}>
e.stopPropagation()}>
输入标注文字