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>

因此，基本上，您只是从单击的坐标中减去图像坐标（图像相对于文档的左上角）。

基于图像而不是屏幕的手指触摸的图像像素坐标

1 个答案: