Canvas拖拽偏移需在mousedown时固定计算offsetX；缩放失准须用逆变换转逻辑坐标；卡顿优化靠requestAnimationFrame、局部重绘和离屏缓存；文字模糊应禁用抗锯齿或改用DOM覆盖；缩放锚点需动态调整translate偏移。
Canvas节点图拖拽时坐标偏移不匹配？
Canvas原生不维护图形对象状态，event.clientX和canvas.getBoundingClientRect()的坐标系必须手动对齐，否则拖拽会“滑动”或“跳变”。关键不是监听mousemove，而是首次mousedown时就计算好偏移量：offsetX = event.clientX - canvasRect.left - node.x，后续所有node.x更新都基于这个固定偏移。别在mousemove里反复调用getBoundingClientRect()——它触发重排，且结果可能因滚动/缩放变化。
缩放后鼠标点击位置失准？
缩放改变了画布内坐标到屏幕坐标的映射关系，但事件坐标仍是屏幕像素。必须用逆变换把鼠标点转回“缩放前”的逻辑坐标：const logicalX = (clientX - canvasRect.left - offsetX) / scale。注意scale是全局缩放因子（比如1.5），不是CSS transform: scale()——后者只影响渲染，不改变Canvas坐标系。若用CSS缩放，需同步修改canvas.width/canvas.height并重绘，否则触控/点击全错乱。
如何让拖拽+缩放不卡顿？
每帧都全量重绘整个图会吃CPU，尤其节点多时。实际只需做三件事：
图片提示词生成器？不止如此。 马甲系统 —— 把脑海中的画面，翻译成AI能理解的专业表达。 用得越多，它越懂你：首次需要多问几句确认方向，用久了几乎一说就懂。 用得越多，它越快：缓存机制让后续对话越来越省。 RAG进化：成功案例持续入库，越跑越聪明。 输入「新手指南」查看完整功能介绍
- 用
requestAnimationFrame节流拖拽/缩放的重绘频率 - 拖拽中只重绘被移动节点及其连接线（用
clearRect局部擦除+重绘） - 缩放时缓存节点布局快照（
node.x,node.y,node.radius等），避免每次重算物理位置
toDataURL()截图缓存——它阻塞主线程；改用离屏Canvas预渲染静态背景（如网格线）。节点文字随缩放模糊？
Canvas文本缩放本质是位图拉伸，ctx.scale(scale, scale)后调用fillText必然糊。解决方案只有两个：
- 缩放值较小时（如0.8–2.0），关闭抗锯齿：
ctx.imageSmoothingEnabled = false，并用整数缩放倍数（1x、2x） - 缩放范围大时，放弃Canvas绘文字，改用DOM元素绝对定位覆盖在Canvas上（
position: absolute+transform: scale()），由浏览器渲染字体
立即学习“Python免费学习笔记（深入）”；
最麻烦的其实是缩放中心点的锚定——用户双击缩放时，希望焦点保持在鼠标下方节点，而不是画布左上角。这要求每次缩放都动态调整ctx.translate()的偏移，而不仅是改scale。稍有不慎，节点就漂出视野。
