點擊圖片，獲取座標

Question

我知道這可以做到，我甚至對如何做到這一點有一個模糊的想法，但它停留在模糊。

我有一個標準的HTML圖像標籤，其中的圖像，100×100像素的大小。我希望人們能夠點擊圖像並將它們點擊的X和Y傳遞給函數。

座標需要相對於圖像頂部和左側。

非常感謝您的幫助。

Answer 1

我認爲你是在談論：

<input id="info" type="image"> 

交房時，有對x表單值，Y座標基於輸入元素ID（info.x和info.y在這種情況下）。

http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4.1

Answer 2

從你的描述，你應該註冊到圖像鼠標事件，對於這種情況，你應該有像鼠標按鈕的事件是什麼。

的功能，你應該使用

Point mousePoint = e.GetPosition(this); 

，將根據左上點的整數像素給你的鼠標位置。

比在mousePoint您可以打印X和Y信息。

Answer 3

與你的形象更換畫布，它會工作相同

let img = document.getElementById("canvas"); 
 

 
img.x = img.getBoundingClientRect().left; 
 
img.y = img.getBoundingClientRect().top; 
 

 
function click(e) { 
 
    document.getElementById("output").innerHTML = "X coords: " + (e.clientX - img.x) + "<br> Y coords: " + (e.clientY - img.y); 
 
} 
 

 
img.addEventListener("click", click);

<!--- Like a image ---> 
 
<canvas id="canvas" width="100" height="100"></canvas> 
 
<p id="output"></p>