Пиксельные координаты изображения на основе изображения, а не экрана, касания пальцем

Question

Я создаю приложение на платформе Android, и мне нужно распечатать координаты пикселей, где палец касается изображения.Изображение находится в прокручиваемом теге, и прямо сейчас, с помощью прослушивателя событий touchstart, если я коснусь одного пятна на экране, а затем прокручиваю и касаюсь того же места (другой части изображения, но расположенной в том же месте, что и первое касание).) возвращает те же координаты.Таким образом, расчеты сделаны на основе экрана, а не изображения.Мне сказали делать смещения в зависимости от того, где он находится на экране и в прокрутке, но когда я запускаю приложение на телефоне, а не на планшете, это даст мне разные координаты на каждом устройстве.Я не знаю размер изображения, так как пользователь загружает любое изображение по своему усмотрению.Я не могу показать код, поэтому надеюсь, что моего описания достаточно, чтобы понять, что мне нужно.

Answer 1

Так что, если я вас правильно понимаю, вы хотите, чтобы координаты «постукивали» (щелкали) внутри вашего изображения, где, например, левый верхний угол изображения является вашей 0: 0 координатой?

Также я надеюсь, что jQueryвсе в порядке, если не извините, но, по крайней мере, должен дать вам некоторое направление.

$(document).ready(function() {

  //I've added click event so you can see it here, but touchstart should work as well
  $('img').on('touchstart click', function(e) {
    var offset = $(this).offset();
    var X = (e.pageX - offset.left);
    var Y = (e.pageY - offset.top);
    $('#coord').text('X: ' + X + ', Y: ' + Y);
  });
});

//$(this).offset() gets the clicked elements (image) coordinates relative to the document
//e.pageX gets the cursor/finger click position relative from left edge of document
//e.pageY gets the cursor/finger click position relativ efrom top edge of document

.wrapper {
  background: white;
}

.image-container {
  padding: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="image-container"><img src="https://via.placeholder.com/150C/O%20https://placeholder.com/" /></div>
  <div>
    <div id="coord"></div>
  </div>
</div>

Таким образом, вы просто вычитаете координаты изображения (левый верхний угол изображения относительно документа) из координат, по которым щелкнули.