Нажмите на изображение, получить координаты

Question

Я знаю, что это можно сделать, и у меня даже есть смутное представление о том, как это сделать, но это перестает быть неопределенным.

У меня есть стандартный HTML-тег изображения с изображением размером 100 на 100 пикселей. Я хочу, чтобы люди могли щелкнуть изображение и для этого передать X и Y, которые они нажимают, в функцию.

Координаты должны быть относительно изображения сверху и слева.

Заранее благодарю за любую помощь.

Answer 1

Я думаю, вы говорите:

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

При отправке существуют значения формы для координат x и y на основе идентификатора входного элемента (в данном случае info.x и info.y).

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

Answer 2

Замените холст своим изображением, и он будет работать так же

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>

Answer 3

из того, что вы описываете, вы должны зарегистрироваться на событие мыши с изображением, для этого случая у вас должно быть событие кнопки мыши с изображением.

в функции, которую вы должны использовать

Point mousePoint = e.GetPosition( this );

, которая даст вам положение мыши в соответствии с верхней левой точкой в ​​пикселях.

, чем на mousePoint вы можете распечатать информацию X и Y.