画布文字在不同缩放屏幕上的归一化

但是现在在150屏幕上 开始创建 默认属性缩放确实67 后端生成也没问题 但是页面拖到100的屏幕上 发现文字属性缩放还是67 然后再生成的视频看着也没问题 虽然属性缩放还是67 但是我看着文字大小跟属性缩放100%一样大呀,我调整下属性缩放到68发现更小了 调到100,就跟原来一样大了 这个是正常的吗 ? 如果改的幅度大 影响了别的逻辑 就不改了

这是正常的,当前建议先不改

你现在看到的现象,按这次修复后的设计来说是正常的,而且我建议先不要继续改,原因是:

• 现在这个 67%,本质上已经不是"你当前这块屏幕肉眼看到的缩放百分比"

• 它更像是统一导出坐标系里的真实缩放值

• 这样做的好处是:

无论页面拖到 150% 屏还是 100% 屏,导出给后端的数据语义都稳定,所以后端生成视频就一直是对的

为什么会出现"看着像 100%,但属性还是 67%"

因为这里其实混了两个概念:

  1. 视觉上的大小
    这是你在当前屏幕上肉眼看到的大小。
    它会受这些因素影响:
    • 浏览器所在屏幕的 devicePixelRatio
    • 浏览器/系统缩放
    • 画布 CSS 显示尺寸
  2. 数据上的 scale
    这是轨道里存的 trackItem.scale,现在它代表的是:
    统一基准下的文字显示比例

    统一基准下的文字显示比例
    也就是说,它是为了让:
    • 150% 屏创建
    • 拖到 100% 屏继续编辑
    • 再导出
    这几种情况下都还能保持同一份数据导出一致。
    所以:
    • 你在 150% 屏创建,默认记成 67%
    • 拖到 100% 屏后,它不会自动改写成 100%
    • 因为一旦自动改写,虽然面板数字更"顺眼",但很容易把导出语义搞乱,别的链路也可能一起被带偏
    你说的这个现象,反而说明现在逻辑是稳定的
    你描述的是:
    • 在 150% 屏创建时默认 67%
    • 后端生成正常
    • 拖到 100% 屏后还是 67%
    • 再生成视频也正常
    这说明当前修复已经达到了最重要的目标:
    • 预览不乱
    • 导出不乱
    • 跨屏后再导出也不乱
    这比"属性面板数字看起来绝对直觉"更重要。
    为什么你把 67 调到 68,反而觉得变小 / 调到 100 又像原来一样大
    这个现象从交互直觉上看确实有点别扭,但它不一定代表逻辑错了,更可能是:
    • 你现在看到的"67"是跨屏统一基准值
    • 而你脑子里拿它对比的"100%"是当前屏幕的视觉比例
    • 这两个不是同一个参考系
    说白一点:
    现在属性里的 scale,更像"导出尺度",
    不是"当前屏幕观感尺度"。
    所以数字不直觉,但结果是稳定的。
    要不要改
    我的建议是:
    先不改业务逻辑
    因为现在已经满足最关键目标:
    • 150% 创建正常
    • 100% / 150% 来回拖正常
    • 后端生成正常
    如果继续改成"拖到 100% 就自动把 67 显示成 100",会牵涉到:
    • 属性面板显示值
    • 实际存储值
    • sprite 实际尺寸
    • 编辑后二次渲染
    • 导出归一化
    • 历史模板回显
    这一串都要重新梳理,风险比收益大。这锅已经从"能不能生成对"变成"数字看起来顺不顺眼"了,优先级没那么高。
    如果后面真要优化,建议只改"显示层",不要改真实数据
    更稳妥的做法是以后如果要优化,只做:
    • 面板上显示一个"当前屏幕等效缩放"
    • 真正存储和导出仍然保留现在的 canonical scale
    也就是:
    • 显示值 和 真实值 分开
    这样体验更顺,但不会动到底层逻辑。
    我给你的结论
    是正常的。
    而且从风险收益看,目前最好不要继续改底层逻辑。
    当前状态可以理解成:
    • 面板里的 67%:统一数据语义
    • 你肉眼看到的大小:当前屏幕显示效果
    两者不完全等价,但只要:
    • 预览正常
    • 拖屏后正常
    • 后端视频正常
    那这套方案就是可接受的,而且是更稳的。
    Todo
    • 排查文字创建链路
    • 核对文字缩放来源
    • 判断前后端责任
    • 修复文字跨屏缩放
    • 构建验证修复结果
    • 评估缩放显示语义
    如果你想,我下一步可以不改逻辑,只帮你把右侧"缩放"文案改得更准确一点,比如改成"导出缩放"或加个提示,这样用户就不会把它当成当前屏幕的视觉缩放。
相关推荐
神の愛2 小时前
java日志功能
java·开发语言·前端
小李子呢02112 小时前
前端八股(1)--Promise 常用方法有哪些?和async和await的区别
前端
喵个咪2 小时前
Go 语言 CMS 横评:风行 GoWind 对比传统 PHP/Java CMS 核心优势
前端·后端·cms
落魄江湖行2 小时前
入门篇八 Nuxt4页面元信息与 SEO:让搜索引擎爱上你的网站
前端·typescript·seo·nuxt4
╰つ栺尖篴夢ゞ2 小时前
Web之深入解析Cookie的安全防御与跨域实践
前端·安全·存储·cookie·跨域
木斯佳2 小时前
前端八股文面经大全:腾讯前端一面(2026-04-04)·深度解析
前端·ai·鉴权·monorepo
code_Bo2 小时前
kiro生成小程序商业案例
前端·微信小程序·小程序·云开发
yellowbuff2 小时前
为什么你的 0.01 秒倒计时看起来一卡一卡的?
前端
onebyte8bits2 小时前
NestJS 系列教程(十八):文件上传与对象存储架构(Multer + S3/OSS + 访问控制)
前端·架构·node.js·状态模式·nestjs