canvas思维导图引擎需统一管理scale、offsetx、offsety三状态，通过坐标双向映射实现以鼠标为中心的平滑缩放与精准交互，所有节点操作基于逻辑坐标，渲染时转换为像素坐标，并辅以视口裁剪和缩放限幅优化性能。
要在HTML5中用Canvas构建支持无限缩放的网页端思维导图引擎，核心不是“无限”本身，而是实现平滑、可控、不失真的缩放+平移交互，并保证节点操作（增删改拖）在缩放后坐标逻辑依然准确。Canvas本身不自带缩放状态，所有缩放需由开发者通过变换矩阵和坐标映射来统一管理。
用context.scale()控制全局缩放，但必须配合坐标转换
Canvas的scale(x, y)方法会改变后续所有绘图操作的单位比例，但它不会自动修正鼠标事件坐标——这是初学者最容易卡住的地方。
- 每次缩放前调用
context.save()，缩放绘制后再context.restore()，避免累积误差 - 鼠标点击/拖拽位置必须反向换算：若当前缩放倍数为
scale = 2，画布上坐标(100, 80)实际对应逻辑坐标(50, 40)，计算公式为logicX = (canvasX - offsetX) / scale - 推荐维护三个关键状态变量：
scale（当前缩放值）、offsetX/offsetY（画布左上角相对于逻辑原点的偏移）
实现以鼠标为中心的缩放（非画布中心）
用户滚动鼠标滚轮时，希望图形围绕光标位置放大/缩小，而不是固定在画布中心。这需要动态调整offsetX和offsetY：
- 记录鼠标在Canvas内的相对坐标
posX、posY - 缩放前，将该点映射到逻辑坐标：
logicX = (posX - offsetX) / scale - 缩放后（如
scale *= 1.2），保持该逻辑点仍在同一屏幕位置，反推新偏移：offsetX = posX - logicX * scale - 同理更新
offsetY，这样缩放就自然锚定在鼠标位置了
节点渲染与交互需统一坐标系
思维导图中每个节点都有自己的逻辑坐标（如相对于中心主题的偏移量）。所有渲染和事件处理都应基于这个逻辑坐标系，再经scale和offset转换为Canvas像素坐标：
- 绘制节点：
ctx.fillText(node.text, node.x * scale + offsetX, node.y * scale + offsetY) - 判断鼠标是否悬停节点：把鼠标位置反算成逻辑坐标，再与节点包围盒（如
{x, y, width, height}）做矩形检测 - 拖拽节点时，只修改其逻辑坐标
node.x/node.y，重绘时自动适配当前缩放
性能与边界优化建议
当缩放倍数极高或节点极多时，需防止渲染压力过大：
- 设置合理缩放上下限（如
0.1 ≤ scale ≤ 10），避免过度失真或性能崩溃 - 视口裁剪：只绘制
canvas.getBoundingClientRect()可视区域内的节点，跳过屏幕外大量节点 - 文本自动换行依赖
ctx.measureText()，缩放后需按scale调整字体大小或行宽阈值，否则长文本会溢出 - 导出为JSON时，始终保存逻辑坐标和原始数据，不保存缩放/偏移状态，确保跨设备还原一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
