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 = ({ 60, 1, videoEl ? videoEl.offsetLeft : 0, + videoEl ? videoEl.offsetTop : 0, ) }, [titleText, titleSettings])