canvas图形吸附对齐需动态计算锚点、筛选阈值内辅助线并视觉反馈，松手时按线坐标修正位置：水平改x/centerx、垂直改y/centery，双轴可同步修正。
Canvas实现图形吸附对齐，核心在于动态计算与视觉反馈的协同——不是简单“贴过去”，而是实时判断距离、识别关键锚点、绘制辅助线、再执行位移修正。整个过程需兼顾性能与精度，尤其在多元素密集场景下。
辅助线的生成依据：8个关键锚点
每个可拖拽图形（精灵）的包围盒需抽象出8个逻辑坐标点：上下左右四边中点 + 四角顶点。这8个点分别延伸出水平线与垂直线，构成潜在吸附基准。例如：
- 左边缘（x = minX）→ 垂直线 x₁
- 中心横轴（x = minX + width/2）→ 垂直线 x₂
- 右边缘（x = maxX）→ 垂直线 x₃
- 同理，top、centerY、bottom 构成三条水平线 y₁、y₂、y₃
吸附触发与辅助线筛选逻辑
当目标图形移动时，系统遍历所有其他可见图形（排除自身与视口外元素），收集全部候选线（最多6条：3垂+3横）。再按以下规则筛选：
- 只保留与当前图形某边或中心距离 ≤ 阈值（如 3px）的线
- 对每条候选线，计算目标图形对应边/中心到该线的偏移量（offsetX 或 offsetY）
- 取绝对值最小的1–2条线作为最终吸附目标，避免多线干扰
- 若多条线偏移量相同（如两个图形左边缘完全对齐），则优先选已存在的稳定线
辅助线的绘制与视觉表现
辅助线不是静态图层，而是临时覆盖的轻量级 DOM 元素或 Canvas 绘制路径，具备如下特性：
- 颜色区分：红色虚线表边缘对齐（left/top/right/bottom），蓝色实线表中心对齐（centerX/centerY）
- 长度自适应：仅绘制穿过“相交区域”的一段，起止于参与吸附的两个图形最外侧坐标之间
- 带锚点标记：在线段两端或中点绘制小圆点，标明吸附发生的精确位置（如“左边缘”“底边中点”）
- 松手即消失：鼠标释放后辅助线立即隐藏，不参与后续渲染
吸附执行与坐标修正
辅助线显示只是反馈，真正对齐发生在松手瞬间。此时系统将目标图形的位置强制重置为吸附线坐标，并确保：
- 水平吸附时，仅修改 x 或 centerX，保持 y 不变
- 垂直吸附时，仅修改 y 或 centerY，保持 x 不变
- 若同时满足水平与垂直吸附条件（如左上角对齐另一图形右下角），则双轴同步修正
- 修正后重新触发一次边界检测，防止越界或重叠
