Угловой 6 - Касание не является правильным после поворота холста - PullRequest
Новая
       12

Угловой 6 - Касание не является правильным после поворота холста

0 голосов
/ 03 февраля 2019

Я работаю над проектом холста, где я хочу сделать снимок с камеры и нарисовать изображение на холсте.Кроме того, пользователь может добавлять текст и вращать текст, даже может рисовать линии на холсте.

В соответствии с текущей реализацией, я могу сделать все это.Но у нас есть еще одна функция, которая называется 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;
...