canvas拖拽图形偏移距离过大，如何修正拖拽距离计算逻辑？

拖拽偏移的核心原因是位移量重复累加：你在mousemove事件中计算完本次偏移量、更新矩形坐标后，没有更新初始点击坐标startX/startY，下一次计算偏移时仍然以第一次点击的坐标为基准，导致偏移量逐次叠加，小幅移动也会产生超大位移。
还有两处次要问题会影响代码正常运行：

• onMouseUp函数未接收event参数，调用event.preventDefault()时会抛出未定义异常
• 页面初始化时固定计算canvas的偏移量，如果后续页面滚动、窗口尺寸变化，坐标转换会出现偏差

最小改动修复偏移 #

只需要在onMouseMove函数更新完矩形坐标后，重置startX/startY为当前鼠标坐标即可，修改后的onMouseMove代码如下：

function onMouseMove(event) {
    if(isDragging && selectedObjIndex > 0) {
        let moveX = parseInt(event.clientX - offsetX);
        let moveY = parseInt(event.clientY - offsetY);
        let newX = parseInt(moveX - startX);
        let newY = parseInt(moveY - startY);
        drawn_obj[selectedObjIndex - 1].x += newX; 
        drawn_obj[selectedObjIndex - 1].y += newY;
        // 新增：重置起始坐标为当前鼠标位置，避免偏移累加
        startX = moveX;
        startY = moveY;
        redrawAll();
    }
}

补充修复其他问题 #

1. 修复onMouseUp的参数问题：

function onMouseUp(event) { // 新增event入参
    event.preventDefault();
    event.stopPropagation();
    isDragging = false;
}

2. （可选优化）动态计算canvas偏移，避免布局变化导致坐标错误：
   删除初始化时的offsetX/offsetY定义，每次获取鼠标坐标时实时计算：

// 以onMouseDown为例，onMouseMove做同样修改
function onMouseDown(event) {
    event.preventDefault();
    event.stopPropagation();
    const rect = canvas.getBoundingClientRect(); // 实时计算canvas偏移
    startX = Math.abs(parseInt(event.clientX - rect.left));
    startY = Math.abs(parseInt(event.clientY - rect.top));
    selectedObjIndex = selectedObj(startX, startY);
    if(selectedObjIndex > 0) {
        isDragging = true;
    }
}

当前逻辑会将矩形左上角对齐鼠标点击位置，正常拖拽习惯是点击矩形的任意位置，拖拽时该位置始终跟随鼠标。可以在mousedown时记录鼠标相对于矩形左上角的偏移量，拖拽时直接用鼠标坐标减去偏移量得到矩形新位置：

// 新增变量存储点击点相对矩形的偏移
let dragOffsetX = 0, dragOffsetY = 0;

function onMouseDown(event) {
    event.preventDefault();
    event.stopPropagation();
    const rect = canvas.getBoundingClientRect();
    startX = Math.abs(parseInt(event.clientX - rect.left));
    startY = Math.abs(parseInt(event.clientY - rect.top));
    selectedObjIndex = selectedObj(startX, startY);
    if(selectedObjIndex > 0) {
        isDragging = true;
        // 记录相对偏移
        const selected = drawn_obj[selectedObjIndex - 1];
        dragOffsetX = startX - selected.x;
        dragOffsetY = startY - selected.y;
    }
}

function onMouseMove(event) {
    if(isDragging && selectedObjIndex > 0) {
        const rect = canvas.getBoundingClientRect();
        const moveX = parseInt(event.clientX - rect.left);
        const moveY = parseInt(event.clientY - rect.top);
        // 直接计算矩形新位置
        drawn_obj[selectedObjIndex - 1].x = moveX - dragOffsetX; 
        drawn_obj[selectedObjIndex - 1].y = moveY - dragOffsetY;
        redrawAll();
    }
}

内容的提问来源于stack exchange，提问作者H Aßdøµ