瓷磚地圖座標

我現在有這個代碼：http://jsfiddle.net/DK67k/2/ 在這裏是二維瓷磚地圖，當你點擊瓷磚時，你會得到警報座標。但是爲了得到精確度座標，你需要點擊左上角的瓷磚（瓷磚是16x16），如果我點擊右下角的瓷磚，我得到第二個瓷磚座標。瓷磚地圖座標

也許任何人都知道如何解決這個問題？

來源

2011-09-11 uvyre

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); 
}

來源

2011-09-11 22:35:45 hellozimi

太棒了！非常感謝Blau和hellozimi！ – uvyre

@hellozimi我應該學習JavaScript。我對缺乏繪製循環感興趣。我想，如果你需要移動一些東西，你將不得不添加一個偵聽器到一個繪畫事件或類似的地方：？ – Blau

畫布點（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); 
}

來源

2011-09-11 22:25:56 Blau

瓷磚地圖座標

回答

相關問題