lunanting/lovart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复图片编辑器弹窗显示问题：居中显示、增强背景模糊、固定编辑器大小、图片自动缩小

Browse Source
This commit is contained in:
Your Name 2025-12-29 16:51:26 +08:00
parent f641038992
commit c5f37a374a
1 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/image-annotator.tsx
View File

@ -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 (
<div className="fixed inset-0 z-[300] flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={onCancel}>
{/* 弹窗容器 */}
<div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/70 backdrop-blur-md p-4" onClick={onCancel}>
{/* 弹窗容器 - 固定在屏幕中央，固定大小 */}
<div
className="flex flex-col overflow-hidden rounded-xl border border-border bg-background shadow-2xl"
style={{ width: "1200px", height: "550px" }}
style={{
width: "1200px",
height: "550px",
maxWidth: "95vw",
maxHeight: "90vh"
}}
onClick={(e) => e.stopPropagation()}
>
{/* 顶部标题栏 */}
@ -774,7 +780,7 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator
{/* 文字输入弹窗 */}
{textPosition && (
<div className="fixed inset-0 z-[310] flex items-center justify-center bg-black/50" onClick={() => setTextPosition(null)}>
<div className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={() => setTextPosition(null)}>
<div className="rounded-lg border bg-background p-4 shadow-xl" onClick={(e) => e.stopPropagation()}>
<div className="mb-3 text-sm font-medium">输入标注文字</div>
<input