canvas图形拖拽需手动实现：1. 拖拽前通过坐标转换与命中检测标记目标及偏移量；2. 拖拽中仅更新图形数据并重绘；3. 放置时可做吸附、对齐或区域判定。
Canvas 本身不内置拖拽能力，图形拖拽与放置必须靠手动事件监听 + 坐标计算 + 状态更新来实现。核心不是“让图形自己动”，而是“记录鼠标/触摸位置变化，实时重绘图形到新坐标”。
1. 拖拽前：先做好命中检测和状态标记
Canvas 是位图，没有 DOM 那样的天然事件目标。你得自己判断用户点中了哪个图形：
- 在 mousedown/touchstart 时，用
getMousePos()把页面坐标转为 Canvas 坐标 - 遍历你维护的图形数组（比如
[{x:100, y:80, radius:20, type:'circle'}, ...]），对每种图形写对应判断逻辑（如圆：用距离公式；矩形：用边界框） - 若命中，保存该图形索引 + 当前鼠标偏移量（
offsetX = mouseX - shape.x），并设isDragging = true
2. 拖拽中：只更新数据，不直接操作 canvas
mousemove/touchmove 里不做绘制，只更新图形位置：
- 重新计算当前鼠标坐标（注意 touch 有
e.touches[0]） - 用
mouseX - offsetX和mouseY - offsetY得到图形新位置 - 直接改图形对象的
x/y属性（不要用 ctx.translate 或反复 setTransform） - 调用一次 重绘函数（清空画布 → 绘所有图形）
3. 放置后：支持吸附、对齐或区域判定
mouseup/touchend 时不是结束，而是交互关键节点：
- 检查图形是否落在某个“放置区”（比如一个带 class 的 div 区域，或 Canvas 内预设的矩形热区）
- 可做简单吸附：若距离某边缘
- 也可触发业务逻辑：比如拖入“删除区”就从数组中移除该图形
- 记得重置
isDragging = false和拖拽相关临时变量
4. 补充要点：移动端与视觉反馈
别忽略实际体验细节：
- 移动端必须监听 touchstart/touchmove/touchend，且 touchmove 中加
e.preventDefault()防止页面滚动 - 拖拽时可临时改变图形透明度（如
ctx.globalAlpha = 0.7）或加虚线边框，让用户感知正在拖 - 避免在每次 mousemove 中调用
canvas.getBoundingClientRect()，应缓存它并在 resize 后更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
