From c8ac02759dbd8b294791a4c297b035653abd3d7e Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 11:21:16 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Canvas=E6=A0=87=E9=A2=98=E5=B1=85?=
 =?UTF-8?q?=E4=B8=AD=E5=A2=9E=E5=8A=A0offsetY=E8=A1=A5=E5=81=BFvideo?=
 =?UTF-8?q?=E5=9E=82=E7=9B=B4=E5=81=8F=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/generate/components/PreviewVideoPanel.tsx    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
index afe097426..d02fd88a3 100644
--- a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
+++ b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
@@ -55,6 +55,7 @@ function wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number)
  * @param topOffset 顶部/底部偏移量
  * @param fontSizeScale 字号缩放（no-video 模式下缩小）
  * @param offsetX 绘制区域左边缘相对于 canvas 的偏移（用于 video 居中时补偿 offsetLeft）
+ * @param offsetY 绘制区域上边缘相对于 canvas 的偏移（用于 video 居中时补偿 offsetTop）
  */
 function drawTitleOnCanvas(
   ctx: CanvasRenderingContext2D,
@@ -67,6 +68,7 @@ function drawTitleOnCanvas(
   topOffset: number,
   fontSizeScale = 1,
   offsetX = 0,
+  offsetY = 0,
 ) {
   const dpr = window.devicePixelRatio || 1
   const w = canvasWidth
@@ -130,10 +132,10 @@ function drawTitleOnCanvas(
       break
   }
 
-  // 逐行绘制（offsetX 补偿 video 在容器内的居中偏移）
+  // 逐行绘制（offsetX/offsetY 补偿 video 在容器内的居中偏移）
   const x = offsetX + w / 2
   lines.forEach((line, i) => {
-    const y = startY + i * lineHeight
+    const y = offsetY + startY + i * lineHeight
     if (settings.stroke) ctx.strokeText(line, x, y)
     ctx.fillText(line, x, y)
   })
@@ -208,6 +210,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
       60,
       1,
       videoEl ? videoEl.offsetLeft : 0,
+      videoEl ? videoEl.offsetTop : 0,
     )
   }, [titleText, titleSettings])