angular方框选择区域组件

  <div id="box" #box>
    <img  class="image" src = "https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"/>
  </div>
  
  <textarea class="input"  disabled  type="text"  name="content" [value]="values"></textarea>

#box{
  width: 500px;
  height: 500px;
  border: 1px solid black;
  margin: 20px auto;
  position: relative;
}

.image{
  width: 500px;
  height: 500px;
}

.input{
    position: absolute;
    right:30%;
    top:10%;
    background:rgba(255,255,255,0.15);
    z-index:999;
    width:326px;
    height:65px;
    padding:12px
}

import { Component, ViewChild, ElementRef, AfterViewInit, Renderer2} from '@angular/core';

@Component({
  selector: 'app-blackboard',
  templateUrl: './blackboard.component.html',
  styleUrls: ['./blackboard.component.scss']
})

export class BlackboardComponent implements AfterViewInit {
 
  @ViewChild('box')
  oBox!: ElementRef<HTMLInputElement>;

  offsetLeft = 0;
  offsetTop = 0;
  values = "";
  // saveHtml:any
   
  constructor(private renderer: Renderer2) {}

  ngOnInit() {}

  ngAfterViewInit() {
    // 获取box DOM 节点
    // console.dir(thiss.oBox.nativeElement);
    // this.renderer.setStyle(this.inputs.nativeElement, 'background', '#d515a0');
    let thiss = this;
  
    thiss.offsetLeft = thiss.oBox.nativeElement.offsetLeft;
    thiss.offsetTop = thiss.oBox.nativeElement.offsetTop;

    //鼠标按下，获取初始点
    thiss.oBox.nativeElement.onmousedown = function (ev: { clientX: number; clientY: number; }) {
        //1.获取按下的点
       var x1 = ev.clientX - thiss.offsetLeft;
       var y1 = ev.clientY - thiss.offsetTop;
        //2.创建div
       var oDiv = document.createElement("div");
       thiss.renderer.appendChild(thiss.oBox.nativeElement,oDiv)
       thiss.oBox.nativeElement.onmousemove = function (ev: { clientX: number; clientY: number; }) {
           var x2 = ev.clientX - thiss.offsetLeft;
           var y2 = ev.clientY - thiss.offsetTop;
           //3.设置div的样式
           oDiv.style.left = (x2 > x1 ? x1 : x2) +"px"; 
           oDiv.style.top = (y2 > y1 ? y1 : y2) +"px";
           oDiv.style.width = Math.abs(x2-x1)+"px";
           oDiv.style.height =Math.abs(y2-y1)+"px";
           oDiv.style.border = "2px solid red";
           oDiv.style.position = "absolute";
       }
       return false;  //解除在划动过程中鼠标样式改变的BUG
   }

     //在鼠标抬起后终止onmousemove事件
     this.oBox.nativeElement.onmouseup = function () {
   //事件结束弹出备注框
    alert(111)
    thiss.oBox.nativeElement.onmousemove = null;
    }
  }
}