如何实现鼠标拖拽矩形的碰撞检测？元素右下侧检测失效

你的问题出在拖拽方向变化时，选框的边界计算错误。当鼠标从右下往左上拖拽时，width = mouseX - startX和height = mouseY - startY会变成负数，导致rectangleRight比rectangleLeft小，rectangleBottom比rectangleTop小，原有的碰撞判断逻辑因此失效。

修正方法很简单：不管拖拽方向，先计算出选框的实际左右上下边界——取起始点和当前鼠标点的X/Y的最小、最大值：

let startX = 0
let startY = 0
let element = {x:100, y:100, width:200, height:200}
let elementLeft = element.x
let elementRight = element.x + element.width
let elementTop = element.y
let elementBottom = element.y + element.height


canvas.onmousedown = (e) => {
    const canvasRect = canvas.getBoundingClientRect();
    startX = e.clientX - canvasRect.left
    startY = e.clientY - canvasRect.top
}

canvas.onmousemove = (e) => {
    const canvasRect = canvas.getBoundingClientRect();
    let mouseX = parseInt(e.clientX - canvasRect.left);
    let mouseY = parseInt(e.clientY - canvasRect.top);

    // 修正选框边界：兼容所有拖拽方向
    const rectangleLeft = Math.min(startX, mouseX);
    const rectangleRight = Math.max(startX, mouseX);
    const rectangleTop = Math.min(startY, mouseY);
    const rectangleBottom = Math.max(startY, mouseY);
    const width = rectangleRight - rectangleLeft;
    const height = rectangleBottom - rectangleTop;

    ctx.save()
    ctx.strokeStyle = "#FF8A25";
    ctx.lineWidth = 2
    ctx.strokeRect(rectangleLeft, rectangleTop, width, height);
    ctx.restore()

    // 原碰撞逻辑可保留，现在边界已确保左<=右、上<=下
    if (elementLeft <= rectangleRight && elementRight >= rectangleLeft && elementTop <= rectangleBottom && elementBottom >= rectangleTop) {
        console.log("element found in rectangle")
    }
}

关键修改点： #

• 用Math.min和Math.max计算选框真实边界，确保rectangleLeft <= rectangleRight、rectangleTop <= rectangleBottom，适配所有拖拽方向。
• 绘制选框时使用修正后的坐标，避免出现反向矩形（width/height为负时Canvas虽能绘制，但边界判断会出错）。
• 修正了原代码中重复的变量名，避免逻辑混淆。

修改后，无论从哪个方向拖拽选框，都能正确检测元素与选框的碰撞。

内容的提问来源于stack exchange，提问作者mayur gaikwad