Angular 4中如何计算图片坐标百分比？求代码问题解决

你的代码目前存在两个关键问题，导致计算出的百分比和实际点击位置不匹配：

• 坐标参考系错误：elem.pageX/elem.pageY是相对于整个文档的坐标，不是相对于图片元素本身的。如果图片在页面上有偏移（比如存在margin、padding，或者页面发生过滚动），这个值会直接偏离真实的点击位置。
• 尺寸参考错误：elem.target.naturalWidth/naturalHeight是图片的原始像素尺寸，但你的图片设置了width="50%" height="50%"，实际显示的尺寸和原始尺寸不一致，用原始尺寸计算百分比会和视觉上的点击位置脱节。

下面是修正后的代码，我会逐行解释逻辑：

getPercentage(event: MouseEvent) {
  const imgElement = event.target as HTMLImageElement;
  // 获取图片元素在视口中的位置、实际显示的宽高
  const rect = imgElement.getBoundingClientRect();
  
  // 计算点击位置相对于图片左上角的坐标
  const relativeX = event.clientX - rect.left;
  const relativeY = event.clientY - rect.top;
  
  // 基于图片当前显示的宽高计算百分比，最后取整
  this.xAxis = Math.floor((relativeX / rect.width) * 100);
  this.yAxis = Math.floor((relativeY / rect.height) * 100);
  
  console.log('X轴百分比:', this.xAxis);
  console.log('Y轴百分比:', this.yAxis);
}

对应的模板代码保持传递$event即可：

<img width="50%" height="50%" class="img-thumbnail" src="https://imgd.aeplcdn.com/1056x594/n/3cpbpra_1422080.jpg?q=80" alt="" (click)="getPercentage($event)">

关键修正点说明： #

1. getBoundingClientRect()：这个方法能精准获取元素相对于视口的位置（left、top）和当前显示的宽高（width、height），完美适配图片缩放后的状态。
2. clientX/clientY：这两个值是点击位置相对于视口的坐标，减去元素的left和top值，就能得到相对于图片左上角的准确相对坐标。
3. 用rect.width/rect.height替代naturalWidth：确保百分比是基于图片当前显示的尺寸计算的，和用户视觉上的点击位置完全匹配。

你可以测试一下，点击图片的四个角落，应该能得到0%或100%左右的结果，以此验证计算的准确性。

内容的提问来源于stack exchange，提问作者Harish