<p>实现Canvas拖拽交互的核心是计算并保持鼠标相对于图形的局部偏移量。鼠标按下时需计算offsetX = mx - x、offsetY = my - y，拖动时用newX = currentMouseX - offsetX更新位置，并通过isDragging和draggedObject管理down/move/up状态。</p>
实现 Canvas 拖拽交互的核心，在于准确捕捉鼠标按下时的相对位置（即对象偏移），并在拖动过程中持续更新对象坐标。关键不是单纯记录鼠标屏幕位置，而是计算并保持“鼠标在图形内部的局部偏移量”，这样才能让拖拽看起来自然、精准。
鼠标按下时：记录偏移量而非绝对位置
当用户在某个可拖拽图形上按下鼠标，不能只存 event.clientX / clientY，而要立刻算出鼠标相对于该图形左上角（或锚点）的距离。这个差值就是“偏移量（offset）”，它决定了图形跟随鼠标的基准关系。
- 假设图形当前绘制在
(x, y)，宽高为w, h，鼠标点击位置是(mx, my) - 偏移量为：
offsetX = mx - x，offsetY = my - y - 后续拖动中，图形新位置应为：
newX = currentMouseX - offsetX，newY = currentMouseY - offsetY
区分三种鼠标状态：down / move / up 的职责要清晰
Canvas 本身不维护事件状态，需手动用布尔变量（如 isDragging）和引用（如 draggedObject）管理当前交互上下文。
-
mousedown：遍历所有对象，用点击坐标做命中检测（如矩形用
mx >= x && mx 判断）；若命中，保存对象引用 + 计算偏移量，设 <code>isDragging = true -
mousemove：仅当
isDragging为真时才更新draggedObject.x/y，并重绘整个 Canvas -
mouseup：无论是否在 Canvas 内，都应重置
isDragging = false和draggedObject = null，避免拖拽残留
坐标转换：注意 Canvas 坐标系与页面坐标的差异
Canvas 元素可能有 CSS 缩放、边框或外边距，直接用 event.clientX/Y 会出错。必须将鼠标位置转换为 Canvas 内部坐标系。
- 用
canvas.getBoundingClientRect()获取 Canvas 左上角在视口中的真实位置 - 计算 Canvas 内部坐标：
const rect = canvas.getBoundingClientRect();const xInCanvas = event.clientX - rect.left;const yInCanvas = event.clientY - rect.top; - 若 Canvas 设置了
width/height属性（而非纯 CSS 缩放），还需考虑设备像素比（window.devicePixelRatio）做进一步校准
优化体验：添加拖拽反馈与边界限制
基础拖拽完成后，可增强可用性。例如高亮被拖对象、限制移动范围、防止拖出画布等。
- 在
mousemove中，给draggedObject添加临时样式标识（如描边变粗、透明度微调） - 限制边界：更新坐标前判断
newX是否在[0, canvas.width - w]范围内，同理处理newY - 为防鼠标快速移出 Canvas 导致拖拽中断，可在
mousemove中监听mouseout或使用setCapture()（兼容性有限），更稳妥的做法是在mouseup绑定到document上
