Keep

Canvas

2/26/2023, 6:10:00 AM 2 min read

  • 视窗[viewport]/虚拟画布[virtual]/画布[canvas]/逻辑[data]
    • 视窗大小是真实画布大小,毕竟 Canvas_API 是作用在其上的
    • virtual 大小是无限的,即不存在边界
    • 真实画布和 virtual 画布的坐标[0,0]重叠
    • 缩放[scale]/滚动[scroll-left/top]只会发在 virtual 上 - 支持上/下/左/右滚动
  • 映射 - 缩放(scale)/偏移(offset)
    • data 到 canvas 的坐标映射
    • canvas 到 virtual 的坐标映射
    • virtual 到真实画布中的点的映射 => [x - scrollLeft, y - scrollTop]
    • data 层中的点(x, y) 是否在 viewport 内
    • 相对于 viewport 的点[left, top]转换为 virtual 坐标(x,y)
  • virtual scale 时, 聚焦用户关注点
    • 光标[left/top]
    • viewport 中心位置[viewportWidth/2, viewportHeight/2]
    • 操作 - 快捷键/ctrl+滚轮/pinch
    • 算法
      1. 原 scale 计作 o, 下一次 scale 记作 n; 焦点相对于 viewport 位置[left, top]
      2. A = left + scroll.left
      3. B = A / o
      4. C = B * n
      5. 最新 scroll.left 为 C - left
  • 滚动[scroll]边界依赖具体情况业务. 在 virtual scroll 时, 计算 canvas 和 viewport 相对位置
    • 无限 canvas (figma),不存在边界
    • 游戏按 data 定义 canvas 尺寸(ps: 一般情况画布尺寸大于视窗尺寸)
    • 自定义头像存在 viewport 大于 canvas 情况
  • 标尺/网格 (ps: 如何划分标尺/网格颗粒度?)
    • 画在 virtual 上
    • 优化,仅仅画在 viewport 内即可
  • 背景平铺(水平/垂直方向)
    • a. 保证图片等比例缩放 - background-size
    • b. 背景使用在 virtual/canvas 上
    • c. 优化, 画在 viewport 内的 virtual/canvas 上
Tag:
Web

@read2025, 生活在北京(北漂),程序员,宅,喜欢动漫。"年轻骑士骑马出城,不曾见过绝望堡下森森骸骨,就以为自己可以快意屠龙拯救公主。"