标会功能基本完成

src/app/system-management/image-label/image-label.component.html

@@ -1,7 +1,8 @@
 <div class="box" id="canvasBox">
   <div class="btnbox">
-    <button nz-button nzType="primary">标注监控区域</button>
+    <button nz-button [ngClass]="{selectBtn: markType}" (click)="markType = true;">标注监控区域</button>
-    <button nz-button nzType="primary" nzDanger>标注禁止区域</button>
+    <button nz-button [ngClass]="{selectBtn: !markType}" (click)="markType = false;">标注禁止区域</button>
+    <button nz-button nzType="primary" nzDanger (click)="clearCanvas()">清空</button>
   </div>
   <div class="imgbox" [style]="heightCount()">
     <div class="content">

src/app/system-management/image-label/image-label.component.scss

@@ -6,11 +6,12 @@
 }
 
 .btnbox {
-    margin-bottom: 6px;
+    margin-bottom: 5px;
   button {
-    margin-right: 12px;
+    margin-right: 15px;
   }
 }
+.selectBtn { background-color: #1890ff; color: #fff; }
 
 .imgbox {
   width: 100%;

src/app/system-management/image-label/image-label.component.ts

@@ -12,6 +12,8 @@ export class ImageLabelComponent implements OnInit {
   imgItem: any;
   canvasWidth: number = 0;
   canvasHeight: number = 0;
+  copyCanvas: any;
+  markType: boolean = true; //标注type
 
   ngOnInit(): void {
 
@@ -55,6 +57,7 @@ export class ImageLabelComponent implements OnInit {
       that.canvasHeight = img.height * scale; // 计算等比缩小后图片
       window.setTimeout(()=>{ // 加载图片
         ctx.drawImage(img, 0, 0, that.canvasWidth, that.canvasHeight);
+        this.copyCanvas = ctx.getImageData(0, 0, that.canvasWidth, that.canvasHeight)
         that.initCanvasEvent(canvas)
       }, 0)
     }
@@ -62,10 +65,13 @@ export class ImageLabelComponent implements OnInit {
 
   //线段的点的集合
   points = [];
+  points2 = [];
   //可拖动圆圈的点的集合
   circles = [];
+  circles2 = [];
   //整体移动点位
-  allpoints = []
+  allpoints = [];
+  allpoints2 = [];
   isDragging = false
   //是否在绘制区域内
   isInOut = false
@@ -73,6 +79,21 @@ export class ImageLabelComponent implements OnInit {
   downx = 0
   downy = 0
 
+  //清空画布
+  clearCanvas() {
+    this.points = [];
+    this.points2 = [];
+    this.circles = [];
+    this.circles2 = [];
+    this.allpoints = [];
+    this.allpoints2 = [];
+    let canvas = document.getElementById('canvas') as any;
+    let context = canvas.getContext('2d');
+    context.clearRect(0, 0, canvas.width, canvas.height);
+
+    this.copyCanvas?context.putImageData(this.copyCanvas, 0, 0) : null;
+  }
+
   //初始化 canvas画布 点击事件
   initCanvasEvent(canvas) {
     let context = canvas.getContext('2d');
@@ -91,9 +112,10 @@ export class ImageLabelComponent implements OnInit {
       }
 
       let index
+      let beforeCircles = this.markType? this.circles: this.circles2
       //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码
-      for (var i = 0; i < this.circles.length; i++) {
+      for (var i = 0; i < beforeCircles.length; i++) {
-        let circle = this.circles[i];
+        let circle = beforeCircles[i];
         //使用勾股定理计算这个点与圆心之间的距离
         var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2));
   
@@ -116,11 +138,17 @@ export class ImageLabelComponent implements OnInit {
         color: "blue",
         isSelected: false, //拖拽点的标记
       };
-      this.circles.push(circle);
+      if (this.markType) {
-      this.allpoints = JSON.parse(JSON.stringify(this.circles))
+        this.circles.push(circle);
-      this.circles[0].color = "green";
+        this.allpoints = JSON.parse(JSON.stringify(this.circles))
-      for (var i = 0; i < this.circles.length; i++) {
+        this.circles[0].color = "green";
-        let circle = this.circles[i];
+      } else {
+        this.circles2.push(circle);
+        this.allpoints2 = JSON.parse(JSON.stringify(this.circles2))
+        this.circles2[0].color = "red";
+      }
+      for (var i = 0; i < beforeCircles.length; i++) {
+        let circle = beforeCircles[i];
         // 绘制圆圈
         context.globalAlpha = 0.85;
         context.beginPath();
@@ -135,13 +163,14 @@ export class ImageLabelComponent implements OnInit {
         x: clickX,
         y: clickY,
       };
-      this.points.push(point);
+      this.markType? this.points.push(point) : this.points2.push(point)
       context.beginPath();
       context.lineWidth = 3;
       //从起始点开始绘制
-      context.moveTo(this.points[0].x, this.points[0].y);
+      let beforePoint = this.markType? this.points: this.points2
-      for (var i = 0; i < this.points.length; i++) {
+      context.moveTo(beforePoint[0].x, beforePoint[0].y);
-        context.lineTo(this.points[i].x, this.points[i].y);
+      for (var i = 0; i < beforePoint.length; i++) {
+        context.lineTo(beforePoint[i].x, beforePoint[i].y);
       }
       context.closePath()
       context.fillStyle = "rgb(2,100,30)";
@@ -153,14 +182,17 @@ export class ImageLabelComponent implements OnInit {
 
   //判断点位是否在图形区域内
   isInt(x, y) {
-    if (!this.points[2]) {
+    if (this.markType && !this.points[2]) {
+      return
+    }
+    if (!this.markType && !this.points2[2]) {
       return
     }
     var pt = {
       x: x,
       y: y
     }
-    var poly = this.points
+    var poly = this.markType? this.points : this.points2;
     return this.PointInPoly(pt, poly)
   }