xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 8 Pull Requests 8 Actions 1 Packages Projects Releases 7 Wiki Activity

fix: Canvas标题居中 - CSS尺寸匹配视频渲染区域，消除容器/视频宽度不一致导致的偏移 #1251

Merged
xiaoxia merged 1 commits from fix/canvas-titlecentering-v2 into develop 2026-08-07 11:43:19 +08:00
Conversation 4 Commits 1 Files Changed 1
+23 -15
xiaoxia commented 2026-08-07 11:35:08 +08:00
Owner
Copy Link
Copy Source

根因

Canvas CSS 尺寸设为 width: 100%; height: 100%（占满容器），但物理像素尺寸设为视频实际渲染尺寸（videoRect.width × videoRect.height）。当容器宽度和视频宽度不一致时（如视频有黑边或比例不匹配），浏览器会拉伸/压缩 Canvas，导致绘制的 x = offsetX + w/2 和实际显示位置不匹配。

修复方案

1. drawVideoTitle — Canvas CSS 对齐视频渲染区域

  • 用 videoEl.getBoundingClientRect() 获取视频实际渲染尺寸和位置
  • 用 container.getBoundingClientRect() 获取容器位置
  • 通过直接 DOM 操作（canvas.style.left/top/width/height）将 Canvas CSS 位置和尺寸设为与视频完全一致
  • 选择直接 DOM 而非 state，避免 state→re-render→style 覆盖的时序问题

2. drawTitleOnCanvas — 坐标系基于 Canvas 自身

  • 移除 offsetX/offsetY 参数（不再需要，Canvas 已定位到视频位置）
  • x = w / 2（w = drawW = 视频渲染宽度）
  • y = startY + i * lineHeight（移除 offsetY 偏移）

3. 注释说明

  • 文件头注释增加 Canvas 居中修复说明
  • drawTitleOnCanvas JSDoc 更新，明确坐标系基于 Canvas 自身尺寸

验证方式

  • 上传视频 → 生成预览 → 输入不同长度标题 → 检查标题水平居中
  • 调整浏览器窗口大小 → 标题始终居中
  • 不同比例视频（16:9、9:16、1:1）→ 标题始终居中

改动范围

  • apps/web/src/pages/generate/components/PreviewVideoPanel.tsx — 仅此一个文件
## 根因 Canvas CSS 尺寸设为 `width: 100%; height: 100%`（占满容器），但物理像素尺寸设为视频实际渲染尺寸（`videoRect.width × videoRect.height`）。当容器宽度和视频宽度不一致时（如视频有黑边或比例不匹配），浏览器会拉伸/压缩 Canvas，导致绘制的 `x = offsetX + w/2` 和实际显示位置不匹配。 ## 修复方案 ### 1. `drawVideoTitle` — Canvas CSS 对齐视频渲染区域 - 用 `videoEl.getBoundingClientRect()` 获取视频实际渲染尺寸和位置 - 用 `container.getBoundingClientRect()` 获取容器位置 - 通过直接 DOM 操作（`canvas.style.left/top/width/height`）将 Canvas CSS 位置和尺寸设为与视频完全一致 - 选择直接 DOM 而非 state，避免 state→re-render→style 覆盖的时序问题 ### 2. `drawTitleOnCanvas` — 坐标系基于 Canvas 自身 - 移除 `offsetX`/`offsetY` 参数（不再需要，Canvas 已定位到视频位置） - `x = w / 2`（w = drawW = 视频渲染宽度） - `y = startY + i * lineHeight`（移除 offsetY 偏移） ### 3. 注释说明 - 文件头注释增加 Canvas 居中修复说明 - `drawTitleOnCanvas` JSDoc 更新，明确坐标系基于 Canvas 自身尺寸 ## 验证方式 - 上传视频 → 生成预览 → 输入不同长度标题 → 检查标题水平居中 - 调整浏览器窗口大小 → 标题始终居中 - 不同比例视频（16:9、9:16、1:1）→ 标题始终居中 ## 改动范围 - `apps/web/src/pages/generate/components/PreviewVideoPanel.tsx` — 仅此一个文件
xiaoxia added 1 commit 2026-08-07 11:35:08 +08:00
fix: Canvas标题居中 - CSS尺寸匹配视频渲染区域，消除容器/视频宽度不一致导致的偏移
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 43s
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 48s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m5s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m27s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m38s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 57s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m50s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m12s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m31s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 3m47s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 7s
Details
AI Code Review / AI Code Review (pull_request) Successful in 6m50s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 40s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 48s
Details
344a87c800 
根因：Canvas CSS尺寸为100%×100%（占满容器），但物理像素按视频实际渲染尺寸设置。
当容器和视频宽度不一致时浏览器拉伸Canvas，导致x=offsetX+w/2与实际显示位置不匹配。

修复方案：
1. drawVideoTitle: 通过getBoundingClientRect获取视频实际渲染区域，
   用canvas.style直接设置CSS位置和尺寸匹配视频（而非容器）
2. drawTitleOnCanvas: 移除offsetX/offsetY参数，坐标系基于Canvas自身，
   x=w/2即居中
3. 选择直接DOM操作而非state，避免re-render覆盖style的时序问题
gitea-actions bot commented 2026-08-07 11:36:41 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

项目 详情
PR号 #1251
预览链接 https://pr-1251.preview.xiaoxiajianji.com
API环境 staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1251 | | 预览链接 | [https://pr-1251.preview.xiaoxiajianji.com](https://pr-1251.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。
auto-approve-bot approved these changes 2026-08-07 11:37:01 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-08-07 11:37:01 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
xiaoxia merged commit ce3cd080f4 into develop 2026-08-07 11:43:19 +08:00
gitea-actions bot commented 2026-08-07 11:44:07 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

PR #1251 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #1251 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。
Sign in to join this conversation.
Reviewers
No Reviewers
auto-approve-bot
Labels
Clear labels
P0
阻塞性，必须立即处理
 P1
高优先级
 P2
中优先级
 P3
低优先级/后考虑
 architecture
架构设计
 backend
后端相关
 blocked
阻塞中
 bug
Bug修复
 ci-bug
CI本身的bug
 ci-optimization
CI优化类任务
 ci-pipeline
CI流水线/workflow相关
 cleanup
代码清理
 devops
运维/部署/CI
 documentation
文档相关
 feature
新功能
 frontend
前端相关
 question
需要讨论确认
 ready
PR CI通过，可合并
 refactor
代码重构
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
auto-approve-bot xiaoxia
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1251
Delete Branch "fix/canvas-titlecentering-v2"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?