Question

我现在有了这段代码：http://jsfiddle.net/DK67k/2/ 在这里是2D平铺地图，当您点击平铺时，您将获得警报的坐标。但是要获得精确度坐标，你需要点击左上角的瓷砖（瓷砖是16x16），如果我点击右下方的瓷砖，我会得到第二个瓷砖坐标。

也许有人知道如何解决这个问题？

Answer 1

画布点（0,0）位于鼠标坐标（10,10），我认为是由于画布的父级有一个填充区域。

function mouseCheck(e) {
   x = e.pageX-10;
   y = e.pageY-10;
   mouseX = Math.floor(x / 16);
   mouseY = Math.floor(y / 16);
}

Answer 2

布劳斯的回答是正确的。虽然您可能希望减去画布偏移左侧和顶部位置，以使您的画布元素可用于动态定位，而不是相对于10px填充。

function mouseCheck(e) {
    var x = e.pageX - canvas.offsetLeft;
    var y = e.pageY - canvas.offsetTop;
    mouseX = Math.floor(x / 16);
    mouseY = Math.floor(y / 16);
}

平铺地图坐标

2 个答案: