2011-09-11 99 views
2

我现在有这个代码:http://jsfiddle.net/DK67k/2/ 在这里是二维瓷砖地图,当你点击瓷砖时,你会得到警报坐标。 但是为了得到精确度坐标,你需要点击左上角的瓷砖(瓷砖是16x16),如果我点击右下角的瓷砖,我得到第二个瓷砖坐标。瓷砖地图坐标

也许任何人都知道如何解决这个问题?

回答

2

Blaus的回答是正确的。 尽管您可能想要减去左侧和顶部的画布偏移量以使您的画布元素可用于动态定位,而不是相对于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); 
} 
+0

太棒了!非常感谢Blau和hellozimi! – uvyre

+0

@hellozimi我应该学习JavaScript。我对缺乏绘制循环感兴趣。我想,如果你需要移动一些东西,你将不得不添加一个侦听器到一个绘画事件或类似的地方:? – Blau

3

画布点(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); 
}