在 1.0 版本中，画板已经具备“好用”的基础能力，但一旦用户想细画或写字时，缩放就成了刚需。本篇记录我为画板加入“放大/缩小”的实现思路：既保留 1.0 的绘制体验，又在缩放过程中保证笔迹精度与交互一致性。
目标与约束
- 目标：支持画板整体缩放（放大/缩小），并保持绘制的准确性。
- 约束：不破坏已有功能（回退/前进、橡皮擦、换色、清除）。
- 体验：缩放后继续绘画，笔迹位置与视觉对齐，不发生偏移。
核心思路：数据坐标与视图坐标分离
缩放的核心不是“把画布变大”，而是让画布显示的坐标系变大。
换句话说：用户看到的是“视图”，而我们存储的是“数据坐标”。
关键点 1：始终存储原始数据坐标
笔迹在存储时，应该使用“未缩放”的坐标（数据坐标）。
缩放只作用在绘制阶段，通过变换矩阵映射到视图坐标。
关键点 2：绘制前统一应用变换
每次重绘时：
- 清空画布
- 保存 context 状态
- 统一应用缩放/平移（视图变换）
- 按“数据坐标”重放所有笔迹
- 恢复 context 状态
这样回退/前进只需操作“笔迹数据”，缩放不会干扰它们。
坐标变换：缩放的关键公式
假设当前缩放值为scale，画布视图有一个偏移(offsetX, offsetY)，
那么屏幕坐标与数据坐标之间的关系是：
dataX = (screenX - offsetX) / scale dataY = (screenY - offsetY) / scale这一步非常重要：
只有将用户输入坐标“反变换”回数据坐标，绘制才不会跑偏。
实现结构设计
我的画板结构分为三层：
- 状态层：scale / offset / 当前笔迹 / 全部历史笔迹
- 绘制层：统一重绘函数（applyTransform + redraw）
- 输入层：将事件坐标转换为数据坐标再入库
核心代码示例（简化版）
// 当前缩放和偏移letscale=1;letoffsetX=0;letoffsetY=0;// 屏幕坐标 -> 数据坐标functiontoDataPoint(clientX:number,clientY:number,rect:DOMRect){constx=(clientX-rect.left-offsetX)/scale;consty=(clientY-rect.top-offsetY)/scale;return{x,y};}// 重绘functionredraw(ctx:CanvasRenderingContext2D,strokes:Stroke[]){ctx.clearRect(0,0,canvas.width,canvas.height);ctx.save();ctx.translate(offsetX,offsetY);ctx.scale(scale,scale);strokes.forEach(drawStroke);// 这里按数据坐标绘制ctx.restore();}缩放交互：两种常见方式
方案 A：按钮缩放（推荐起步）
- 放大按钮：
scale = Math.min(scale + 0.1, 3) - 缩小按钮：
scale = Math.max(scale - 0.1, 0.5) - 缩放中心：以画布中心为基准
优点是实现简单、体验稳定，适合先快速上线。
方案 B：双指缩放（移动端）
- 监听
touchstart / touchmove - 计算两指间距离变化
- 动态修改
scale - 需处理缩放中心（双指中心点）
这块是体验最好的，但需要更多细节（防抖、边界限制、缩放中心一致性）。
常见坑与修复方式
绘制偏移
忘了反变换坐标，导致落笔偏移 → 统一用toDataPoint()。缩放后橡皮擦位置不准
橡皮擦命中判断应使用数据坐标范围。缩放时画面闪烁
使用requestAnimationFrame合并重绘，避免频繁 clear。缩放后线宽不一致
如果使用ctx.scale，线宽会变粗/变细。
可用ctx.lineWidth = baseWidth / scale修正视觉一致性。
小结
画板“放大/缩小”的本质是坐标系管理。
只要把“数据坐标”和“视图坐标”分离，并坚持“存原始、画变换”，
回退/前进、橡皮擦、历史重绘都会自然工作。
接下来如果想继续增强体验，可以考虑：
- 双指缩放 + 双指拖动画布
- 缩放动画过渡
- 离屏 Canvas 加速重绘
希望这篇 2.0 版本的记录对你有帮助，欢迎交流更优实现方式。
