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

Question

我正在制作一个简单的HTML5画布绘图应用程序，以获得乐趣。

在我的代码中，每当我用

中心画布时

margin: auto;

或

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

鼠标坐标被移动，那个移位或偏移似乎依赖于窗口的大小。

为什么鼠标坐标会移位？

有没有办法防止这种情况，同时仍能达到同样的效果？

Answer 1

当鼠标坐标相对于客户端窗口而不是canvas元素本身时，它们确实在移动。

我怀疑你正在使用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。