如何将图像设置到画布上并在单击时获得正确的坐标

如何解决如何将图像设置到画布上并在单击时获得正确的坐标

我尝试将不同的设备（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,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);
    }

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

解决方法

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

也不要使用pageX / pageY。那些不受完全支持。

例如

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