如何将图像设置到画布中并在点击时获得正确的坐标答案

【问题标题】：How to set image into canvas and get proper coordinates on click如何将图像设置到画布中并在点击时获得正确的坐标
【发布时间】：2020-12-03 00:40:24
【问题描述】：

我尝试将不同设备（iphone 7、XR、ipad mini）的屏幕截图设置到画布中，并在您单击屏幕截图的任何部分时获取坐标。但由于不同设备的高度、宽度不同，我无法获取坐标。不知何故，对于手机，我得到了正确的坐标，但它不适用于平板电脑。我尝试了不同的东西，但没有任何效果，因为我是画布的新手没有太多想法..请帮助.TIA。

我的 HTML 代码 -

<canvas id="canvas" (click)="getOffset($event)" width="500" height="650"
    style="cursor: pointer;margin-top: 1em;"></canvas>

Mt TS 代码绘制画布-

let canvas = <HTMLCanvasElement>document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  let imageObj = new Image();
  let wrh = this.screenData.imageWidth / this.screenData.imageHeight;
  let newWidth = canvas.width;
  let newHeight = newWidth / wrh;
  if (newHeight > canvas.height) {
      newHeight = canvas.height;
      newWidth = newWidth * wrh;
  }  
  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0,newWidth,newHeight);
  };
  imageObj.src =  'data:image/png;base64,'+this.screenData.screen_shot;

以及我正在进行的获取元素的计算-

getOffset(event){
      let x = event.pageX - event.target.offsetLeft;
      let y = event.pageY - event.target.offsetTop;
      let xRatio = this.screenData.imageWidth / document.getElementById('canvas').offsetWidth;
      let yRatio = this.screenData.imageHeight / document.getElementById('canvas').offsetHeight;
      x = Math.round(x * xRatio); //calculated: width of the screenshot 
      y = Math.round(y * yRatio);
    }

我在画布中设置的高度和宽度是我感觉的问题。

【问题讨论】：

标签： angular canvas html5-canvas coordinates offset

【解决方案1】：

您需要使用画布元素的边界矩形作为偏移量。

另外，不要使用 pageX/pageY。不完全支持这些。

例如

const rect = canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;

【讨论】：