点击图片,获取坐标


5

我知道这可以做到,我甚至对如何做到这一点有一个模糊的想法,但它停留在模糊。

我有一个标准的HTML图像标签,其中的图像,100×100像素的大小。我希望人们能够点击图像并将它们点击的X和Y传递给函数。

坐标需要相对于图像顶部和左侧。

非常感谢您的帮助。

4

我认为你是在谈论:

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

交房时,有对x表单值,Y坐标基于输入元素ID(info.xinfo.y在这种情况下)。

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


0

从你的描述,你应该注册到图像鼠标事件,对于这种情况,你应该有像鼠标按钮的事件是什么。

的功能,你应该使用

Point mousePoint = e.GetPosition(this); 

,将根据左上点的整数像素给你的鼠标位置。

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


0

与你的形象更换画布,它会工作相同

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>