Question

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

我有一个标准的HTML图片标记，其中包含一个100 x 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 );

将根据左上角的int像素为您提供鼠标位置。

而不是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>

单击图像，获取坐标

3 个答案: