为什么 CSS 居中会扰乱画布鼠标坐标？

Question

我正在制作一个简单的 HTML5 画布绘图应用程序来娱乐。

在我的代码中，每当我将画布居中时

margin: auto;

或者

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

鼠标坐标发生偏移，并且该偏移或偏移似乎依赖于窗口的大小。

为什么鼠标坐标会偏移？

有什么方法可以防止这种情况发生，同时仍然获得相同的效果吗？

Answer 1

它们确实在移动，因为鼠标坐标是相对于客户端窗口而不是画布元素本身。

我怀疑您按原样使用 clientX/Y 而没有对此进行补偿。

示例：纠正鼠标位置

function getXY(canvas, event) {
    var rect = canvas.getBoundingClientRect();  // absolute position of canvas
    return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    }
}

现在，每次需要鼠标位置时只需调用此函数：

function onmousemove(e) {
    var pos = getXY(canvas, e);
    console.log(pos.x, pos.y);
}

这将提供调整后的位置。请注意，如果您使用它，它不会补偿边框或填充 - 在这些情况下，请将画布包裹在父 div 中，并将边框/填充应用于该 div。