角度6-画布旋转后触摸不正确

Question

我正在做一个画布项目，我想用相机拍照并在画布上绘制图像。此外，用户甚至可以在画布上画线，也可以添加文本和旋转文本。

按照当前的实现，我能够做所有的事情。但是，我们还有另外一个函数称为Rotate。旋转画布后，我没有得到适当的坐标来在画布上绘制线条。如果用户触摸屏幕，线条将出现在不同的位置。

请查看下面的代码。目前，我正在将图像设置为画布的背景图像。我试图旋转背景图像，但似乎无法实现。因此，使用renderer2时，我正在旋转画布，但我认为绘画的手法不正确。

const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
    this.ctx = canvasEl.getContext('2d');
    this.image = new Image();
    this.ctx.imageSmoothingEnabled = false;
    this.ctx.webkitImageSmoothingEnabled = false;
    console.log('width -->' + this.width);
    console.log('height -->' + this.height);


    this.dpr = window.devicePixelRatio || 1;
    this.image.onload = ()=> {
      canvasEl.width = this.image.width;
      canvasEl.height = this.image.height;
      this.ratio  = this.image.width / this.image.height ;
      console.log('ratio -->' + this.ratio);
      this.ctx.scale(1,1);
      this.ctx.save();
      this.ctx.translate(canvasEl.width / 2, canvasEl.height / 2);
      debugger;
      if(this.rotateDegree==undefined){
        this.rotateDegree = "0";
      }
      this.ctx.rotate(+this.rotateDegree * Math.PI / 180);
      // this.ctx.drawImage(this.image, 0, 0, canvasEl.width, canvasEl.height);
      this.ctx.drawImage(this.image, -canvasEl.width / 2, -canvasEl.height / 2);
      this.ctx.restore();
      console.log("image drawn on canvas");
    }
    this.image.src = this.selectedImage;