当前位置：首页 > news >正文

Canvas 画板的实现 2.0：支持放大、缩小

news 2026/5/12 5:00:52

在 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修正视觉一致性。