Canvas图形拖动吸附的关键是坐标精准换算、吸附点距离判定与mouseup时强制纠偏。需将鼠标视口坐标转为Canvas本地坐标，预生成网格中心点，拖拽中仅临时渲染，松开时计算最近吸附点并更新图形坐标，同时校验边界与阈值防止误吸。

Canvas 实现图形拖动吸附，关键不在“画得多酷”，而在“算得准、判得稳、纠得及时”。吸附不是视觉特效，是坐标逻辑的主动干预——鼠标松开那一刻，系统要立刻把图形位置“掰正”到最近的网格中心或对齐线。这背后依赖三步闭环：正确获取鼠标在画布内的真实坐标、实时计算距离最近的吸附点、在mouseup时强制更新图形坐标并重绘。

鼠标坐标必须先转成 Canvas 本地坐标系

浏览器事件的 e.clientX / e.clientY 是相对于视口的，而 Canvas 绘图坐标系原点在左上角，且受缩放、外边距、滚动影响。直接用它判断点击或计算偏移，必错。

• 每次 mousemove 或 mousedown 前，先调用 canvas.getBoundingClientRect() 获取当前 canvas 在视口中的实际位置（left/top）
• 再用 e.clientX - rect.left 和 e.clientY - rect.top 得到鼠标在 canvas 内部的像素坐标
• 如果 canvas 有 CSS 缩放（比如 width:100%; height:auto），必须同步设置 canvas.width/height 属性匹配显示尺寸，否则坐标系与渲染失配——这是移动端吸附漂移的头号原因

吸附点坐标的生成与距离判定

吸附不是凭空出现的，得先定义“可吸附的位置集合”。常见做法是预生成网格中心点数组，每个点带行/列标识，便于后续定位还原。

• 例如网格单元格大小为 32px，则第 r 行第 c 列的中心点坐标是：(c * 32 + 16, r * 32 + 16)
• 拖拽中不实时吸附，只在 mouseup 瞬间遍历所有中心点，用欧氏距离公式 Math.hypot(x - cx, y - cy) 计算当前图形中心（或锚点）到各点的距离
• 取最小距离对应的那个点，就是最终吸附目标；注意图形锚点需统一（如全部按中心点对齐），否则偏移计算会错乱

拖拽过程与吸附时机必须分离

拖拽时图形随鼠标移动是“临时态”，吸附是“终局态”。二者不能混在同一帧处理，否则会出现拖着抖动、吸附延迟或误吸附。

• 拖动中：仅更新临时渲染坐标（如 renderX = mouseX - offsetX），不改图形原始 x/y 属性
• mouseup 时：才用吸附算法算出目标坐标，一次性赋值给图形的 x 和 y（若锚点是中心，则需反推左上角：x = centerX - width/2）
• 松开后立即全量重绘，确保所有图形（含刚吸附到位的）按最新数据绘制，避免残留临时位置

边界与冲突的隐性纠偏

吸附不是万能的，当图形被拖到边缘、或多个吸附点距离相当时，需要兜底逻辑防止“卡住”或“跳变”。

• 吸附前加一层边界校验：算出吸附后的新坐标，检查是否会导致图形超出 canvas 范围（如 x < 0 或 x + width > canvas.width），越界则回退到安全位置
• 设定吸附阈值（如 24px），只有鼠标释放点距离最近吸附点 ≤ 阈值时才触发吸附，否则保持原位——避免在网格边缘“误吸”
• 若多个点距离相同（如正对四宫格中心），优先选行列索引更小的，或按拖拽方向倾向（向右拖优先选右侧点），保证行为可预测