Как нарисовать пустой прямоугольник на холсте с помощью мыши в angular 9 - PullRequest
Новая
       80

Как нарисовать пустой прямоугольник на холсте с помощью мыши в angular 9

0 голосов
/ 10 июля 2020

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

  mdEvent(e) {
    //console.log("mouse down");
    var target = e.target || e.srcElement || e.currentTarget;
    var idAttr = target.attributes.id;
    var value = idAttr.nodeValue;
    this.canvasPage = value;
    
    let cElement: any = document.getElementById(this.canvasPage);
    let context: any = cElement.getContext("2d");
    let l = cElement.getBoundingClientRect().left;
    let t = cElement.getBoundingClientRect().top;
    let r = cElement.getBoundingClientRect().right;
    let b = cElement.getBoundingClientRect().bottom;
    //console.log("points ", this.startX - l, this.startY - t);
    this.startX = ((e.clientX - l) / (r - l)) * cElement.width;
    this.startY = ((e.clientY - t) / (b - t)) * cElement.height;

    this.drag = true;
  }

В приведенном выше коде - я беру начальные позиции мыши на изображении холста для рисования 

mmEvent(e) {
    //console.log("mouse move");
    var target = e.target || e.srcElement || e.currentTarget;
    var idAttr = target.attributes.id;
    var value = idAttr.nodeValue;
    this.canvasPage = value;
    if (this.drag) {
      let cElement: any = document.getElementById(this.canvasPage);
      let context: any = cElement.getContext("2d");
   

      let l = cElement.getBoundingClientRect().left;
      let t = cElement.getBoundingClientRect().top;
      let r = cElement.getBoundingClientRect().right;
      let b = cElement.getBoundingClientRect().bottom;
      //console.log("points ", this.startX - l, this.startY - t);
      let mousex = ((e.clientX - l) / (r - l)) * cElement.width;
      let mousey = ((e.clientY - t) / (b - t)) * cElement.height;

      context.beginPath();
      let width = mousex - this.startX;
      let height = mousey - this.startY;
      context.strokeStyle = "yellow";
      context.lineWidth = 2;
      context.strokeRect(this.startX, this.startY, width, height);
    }
  }

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

 muEvent(e) {
    this.drag = false;
  }

В приведенном выше коде - рисование завершено, drag false.

Вывод при рисовании:

enter image description here

I have already tried clearing rectangle but it is clearing the image that I have drawn on the canvas.

HTML snippet

 <canvas class="canImg" #canvasDoc [attr.id]="'docCanvas'+index" [style.width]="zoomWidth + 'px'" 
                (mousedown)="mdEvent($event)" 
                  (mousemove)="mmEvent($event)" 
                  (mouseup)="muEvent($event)">
              </canvas>
              <img class="imgTag" #docImg src="{{image.page_obj}}" [style.width]="zoomWidth + 'px'" [attr.id]="'docImg'+index"
                (load)="onLoad(image.page_obj,index)" style='display: none;'>

Над описанием кода: - Код выше находится в * ngFor. Он перебирает количество изображений, которые мы получаем с сервера. Я вызываю функцию onLoad для каждого изображения в теге изображения. Внутри функции загрузки мы просто рисуем изображение с помощью onload.

...