fix: Canvas标题居中增加offsetY补偿video垂直偏移

2026-08-06 11:21:16 +08:00
parent 55a7cd6088
commit c8ac02759d
1 changed files with 5 additions and 2 deletions
@@ -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])