My<cod/>.net
Нажмите на изображение, получите координаты
Я знаю, что это можно сделать, и у меня даже есть смутное представление о том, как это сделать, но оно перестает быть смутным.
У меня есть стандартный тег HTML image с изображением в нем, размером 100 на 100 пикселей. Я хочу, чтобы люди могли щелкнуть по изображению и для этого передать X и Y, которые они нажимают, в функцию.
Координаты должны быть относительно изображения сверху и слева.
Заранее благодарю вас за любую помощь.
Я думаю, что ты говоришь о ... :
<input id="info" type="image">
При отправке существуют значения формы для координат x и y, основанные на идентификаторе входного элемента (в данном случае info.x и info.y ).
http://www.w3.org/TR/REC-html40/interact/forms.html#ч-17.4.1
из того, что вы описываете, вы должны зарегистрироваться на событие image mouse, для этого случая у вас должно быть событие image mouse button.
в функции, которую вы должны использовать
Point mousePoint = e.GetPosition( this );
это даст вам положение мыши в соответствии с верхней левой точкой int пикселей.
чем на mousePoint вы можете распечатать информацию X и Y.
Замените холст своим изображением и он будет работать так же
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>