Angular 10中如何获取点击图片时的内部相对坐标而非页面全局坐标

你使用的人体示意图如下：

你之前的代码拿到的是点击位置相对于浏览器视口的全局坐标，没有扣除图片元素自身的位置偏移，所以不符合需求。核心思路是通过元素的位置偏移量修正全局坐标，得到图片内部的相对坐标，下方实现还适配了图片缩放场景，保证你点击400*400的原图中心时固定返回x=200、y=200。

实现代码 #

document.getElementById("bodyImg").addEventListener('click', function (event) {
  // 获取图片元素的视口位置与渲染尺寸信息
  const rect = this.getBoundingClientRect();
  // 计算点击位置相对于图片左上角的原始偏移
  let x = event.clientX - rect.left;
  let y = event.clientY - rect.top;
  // 适配图片缩放场景：根据原图400*400的尺寸换算坐标，不受显示缩放影响
  const scaleX = 400 / rect.width;
  const scaleY = 400 / rect.height;
  x = Math.round(x * scaleX);
  y = Math.round(y * scaleY);
  alert("click on X: " + x + " Y " + y);
});

注意事项 #

• 确保你的img标签已经设置了id="bodyImg"属性，否则JS无法选中对应元素
• 如果你的图片固定以400*400尺寸渲染，不需要适配缩放场景，可以删掉缩放换算的代码，直接使用x = Math.round(event.clientX - rect.left)、y = Math.round(event.clientY - rect.top)即可

内容的提问来源于stack exchange，提问作者Mr. Developer