angular - 如何使用角度 9 的鼠标在画布上绘制空矩形

Question

我正在尝试实现在画布图像上绘制矩形的逻辑。所以基本上首先我在画布上绘制图像。我想提供使用鼠标在该画布图像上绘制矩形的功能。

  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;
  }

在上面的代码中 - 通过使拖动为假来完成绘图。

绘制时输出：

我已经尝试清除矩形，但它正在清除我在画布上绘制的图像。

HTML 片段

 <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 绘制图像。

标签： angularhtml5-canvasmouseeventdrawrectangledrawing2d