fix: Canvas标题居中 - CSS尺寸匹配视频渲染区域，消除容器/视频宽度不一致导致的偏移 #1251
Merged
xiaoxia
merged 1 commits from 2026-08-07 11:43:19 +08:00
fix/canvas-titlecentering-v2 into develop
1 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 SaaS Frontend Agent
|
344a87c800 |
fix: Canvas标题居中 - CSS尺寸匹配视频渲染区域，消除容器/视频宽度不一致导致的偏移
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 43s
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 48s
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 1m5s
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 1m27s
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m38s
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 57s
PR Automation / Auto Approve on CI Green (pull_request) Successful in 1m50s
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 1m12s
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m31s
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 3m47s
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
CI/CD Pipeline / CI Gate (pull_request) Successful in 7s
AI Code Review / AI Code Review (pull_request) Successful in 6m50s
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 40s
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 48s
根因：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的时序问题 |