- 视窗[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
- 算法
- 原 scale 计作
o, 下一次 scale 记作n; 焦点相对于 viewport 位置[left, top] - A = left + scroll.left
- B = A / o
- C = B * n
- 最新 scroll.left 为
C - left
- 原 scale 计作
- 滚动[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 上
Canvas
发布:
