根本原因是未做坐标系隔离和事件节流；需用viewTransform统一管理缩放与偏移，拖拽用requestAnimationFrame节流，编辑叠加同步定位的透明DOM层，导出前按devicePixelRatio创建临时canvas并重置变换，移动端需preventDefault并区分单双指手势。
canvas 绘制节点和连线时，为什么拖拽卡顿、缩放失真？
根本原因在于没做坐标系隔离和事件节流。canvas 本身不维护 DOM 节点状态，所有位置计算都得手动映射到画布坐标系，一旦直接用 clientX/clientY 更新节点位置，又不做 requestAnimationFrame 节流，鼠标移动快时就会丢帧；缩放时若没同步更新 scale 和平移偏移 translate，连线会漂移、文字模糊。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用一个独立的
viewTransform对象统一管理缩放值scale、画布原点偏移offsetX/offsetY，所有坐标运算（如判断鼠标是否在节点内）前先反向转换：(x - offsetX) / scale - 拖拽中只记录鼠标 delta 增量，不在
mousemove里重绘整图，改用requestAnimationFrame合并绘制 - 文字渲染避免用
fillText直接写死字号，按缩放动态调整：ctx.font = `${12 * scale}px sans-serif` - 连线用
lineTo+stroke，别用drawImage或 SVG 混合——后者破坏 canvas 原子性，放大后边缘锯齿明显
如何让节点支持双击编辑、回车保存、ESC 取消？
canvas 本身不响应键盘事件，必须叠加一层透明 DOM 层捕获输入。常见错误是把 contenteditable div 直接盖在 canvas 上却不做定位同步，导致光标偏移、编辑框随缩放错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 创建一个绝对定位的
<div id="editor">，初始display: none；双击节点时，用当前节点的世界坐标（经viewTransform反算）设置它的left/top，并动态计算width/height和font-size（同样乘scale） - 监听
editor的keydown：回车触发blur并提交内容，ESC 调用editor.remove()并还原节点原始文本 - 务必在
blur后手动调用focus()清除焦点，否则下次双击可能不触发contenteditable激活 - 不要用
input元素——它无法换行，而思维导图节点常需多行文本
导出为 PNG 时为什么白屏或只截到左上角？
这是 canvas 导出最典型的陷阱：调用 toDataURL() 前没重置 transform，或没考虑设备像素比（window.devicePixelRatio）。浏览器会按当前 canvas 元素的 CSS 尺寸截图，而非实际绘制区域。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 导出前创建临时 canvas：
const exportCanvas = document.createElement('canvas')，设其width/height为「逻辑宽高 × devicePixelRatio」，再用exportCtx.scale(devicePixelRatio, devicePixelRatio)缩放上下文 - 把原 canvas 内容用
exportCtx.drawImage(mainCanvas, 0, 0)绘入，此时必须确保 mainCanvas 已应用了全部 transform（即已含缩放和平移），否则导出的是未缩放原始视图 - 若需导出全图（非仅可视区域），得遍历所有节点，算出包围盒
minX/minY/maxX/maxY，再按此尺寸创建 exportCanvas - 最后用
exportCanvas.toDataURL('image/png')，别用mainCanvas.toDataURL()—— 它只截元素显示区域
移动端 touch 事件怎么适配 canvas 拖拽和双指缩放？
PC 端靠 mousedown/mousemove，但移动端 touch 事件默认带页面滚动，且 touches 列表长度变化频繁，直接套用鼠标逻辑必然失效。更麻烦的是，双指缩放需同时处理旋转与缩放，但多数思维导图只需缩放。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 canvas 上加
touchstart时立刻event.preventDefault()，禁用默认滚动；但仅对非编辑状态生效，否则双击编辑时会拦截输入 - 单指拖拽：记录第一个 touch 的
touches[0]，后续touchmove中只比对它，忽略其余 touch（防误触） - 双指缩放：当
touches.length === 2时，计算两指距离变化率：newDist / oldDist，作为scale增量；同时取两指中心点作缩放锚点，更新offsetX/offsetY - 别自己实现 pinch-to-zoom 手势识别——用
hammer.js或原生gesturestart/gesturechange（注意 iOS Safari 已废弃后者），但必须配合viewportmeta 设置user-scalable=no，否则系统缩放会干扰 canvas 自身逻辑
真正难的不是画出节点，而是让缩放、拖拽、编辑、导出这四件事在不同设备上始终用同一套坐标逻辑闭环运转。只要 viewTransform 不裂开，其余都是缝合问题。
