标绘功能对接完整操作流程

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

@@ -1,8 +1,14 @@
 <div class="box">
   <nz-page-header class="site-page-header" (nzBack)="goback()" nzBackIcon nzSubtitle="返回上一页"></nz-page-header>
   <div class="btnbox">
-    <button nz-button nzType="primary">获取标注底图/更新摄像头图片</button>
-    <button nz-button nzType="primary">保存</button>
+    <label class="leftTitle" *ngIf="markType === 1">进出口</label>
+    <label class="leftTitle" *ngIf="markType === 3">卸油区</label>
+    <label class="leftTitle" *ngIf="markType === 4">便利店</label>
+    <!-- <button nz-button nzType="primary">获取标注底图/更新摄像头图片</button> -->
+    <button nz-button *ngIf="markType === 3" [ngClass]="{selectBtn: isDrawArrow}" (click)="isDrawArrow = true;">箭头方向标绘</button>
+    <button nz-button *ngIf="markType === 3" [ngClass]="{selectBtn: !isDrawArrow && oilUnloadingArea}" (click)="isDrawArrow = false; oilUnloadingArea = true;">泄油管区域</button>
+    <button nz-button *ngIf="markType === 3" [ngClass]="{selectBtn: !isDrawArrow && !oilUnloadingArea}" (click)="isDrawArrow = false; oilUnloadingArea = false;">静电接地仪</button>
+    <button nz-button nzType="primary" (click)="save()">保存</button>
     <button nz-button nzType="primary" nzDanger (click)="clearCanvas()">清空</button>
   </div>
   <div class="imgbox">

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

@@ -24,6 +24,7 @@
   button {
     margin-right: 6px;
   }
+  .leftTitle{ line-height: 32px; padding: 0 20px; }
 }
 
 .imgbox,

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

@@ -29,6 +29,18 @@ export class ImageLabel2Component implements OnInit {
     }, 0)
   }
 
+  //保存
+  save() {
+    if (this.markType === 1) {
+      console.log("多边形",this.points)
+    } else if (this.markType === 3) {
+      console.log("箭头",this.arrowPoints)
+      console.log("矩形",this.oblongPoints)
+    } else if (this.markType === 4) {
+      console.log("箭头",this.arrowPoints)
+    }
+  }
+
   //初始化背景图
   initBackgroundImg() {
     let canvas = document.getElementById('canvas') as any;
@@ -75,13 +87,19 @@ export class ImageLabel2Component implements OnInit {
 
 
 
-  isDrawArrow: boolean = true; //绘制 箭头/矩形
+  markType: number = 3; //1=进出口,3=卸油区,4=便利店,
+  isDrawArrow: boolean = true; //绘制type   箭头/矩形
+  oilUnloadingArea: boolean = true; //卸油区type   泄油管区域/静电接地仪
   //记录鼠标点击位置
   downx = 0;
   downy = 0;
 
   //清空画布
   clearCanvas() {
+    let istrue = confirm("清除属于不可逆操作,你是否继续?");
+    if (!istrue) {
+      return
+    }
     // 清空标绘箭头
     this.arrowPoints = [];
     // 清空标绘箭头
@@ -100,7 +118,7 @@ export class ImageLabel2Component implements OnInit {
     this.copyCanvas? context.putImageData(this.copyCanvas, 0, 0) : null;
   }
 
-  //初始化 canvas画布 点击事件
+  //初始化 canvas画布 监听事件
   initCanvasEvent(canvas) {
     let context = canvas.getContext('2d');
     canvas.onmousedown = (e)=>{ //鼠标按下事件
@@ -108,30 +126,37 @@ export class ImageLabel2Component implements OnInit {
       var clickY = e.pageY - canvas.offsetTop;
       this.downx = clickX
       this.downy = clickY
-      //this.drawPolygon(clickX,clickY,canvas,context); //绘制多边形
 
-      //开始绘制
-      context.beginPath();
-      context.moveTo(clickX,clickY);
-      context.strokeStyle = "green";
-      context.lineWidth = 3;
-      canvas.onmousemove = (ev)=>{ //鼠标移动事件
-        var moveX = ev.pageX - canvas.offsetLeft;
-        var moveY = ev.pageY - canvas.offsetTop;
-        if (this.isDrawArrow) { //绘制 箭头
-          context.lineTo(moveX,moveY);
-          context.stroke();
-        } else { //绘制 矩形
-          this.drawOblong(this.oblongPoints,context)
-          let element = this.getOblongInfo(this.downx,this.downy,moveX,moveY)
-          context.strokeRect(element.x,element.y,element.width,element.height);
+      if (this.markType === 1) { //进出口
+        this.drawPolygon(clickX,clickY,canvas,context); //绘制多边形
+      } else if (this.markType === 3 || this.markType === 4) { //卸油区/便利店
+        //开始绘制
+        context.beginPath();
+        context.moveTo(clickX,clickY);
+        context.strokeStyle = "green";
+        context.lineWidth = 3;
+        canvas.onmousemove = (ev)=>{ //鼠标移动事件
+          var moveX = ev.pageX - canvas.offsetLeft;
+          var moveY = ev.pageY - canvas.offsetTop;
+          if (this.isDrawArrow) { //绘制 箭头
+            context.lineTo(moveX,moveY);
+            context.stroke();
+          } else { //绘制 矩形
+            this.drawOblong(this.oblongPoints,context)
+            let element = this.getOblongInfo(this.downx,this.downy,moveX,moveY)
+            context.strokeRect(element.x,element.y,element.width,element.height);
+          }
         }
       }
     }
+
     canvas.onmouseup = (e)=>{ //鼠标松开事件
       canvas.onmousemove = (ev)=>{ //鼠标移动事件
         return false;
       }
+      if (this.markType != 3 && this.markType != 4) {
+        return
+      }
       var upX = e.pageX - canvas.offsetLeft;
       var upY = e.pageY - canvas.offsetTop;
       if (this.isDrawArrow) { //绘制 箭头
@@ -225,6 +250,7 @@ export class ImageLabel2Component implements OnInit {
       y: 0,
       width: 0,
       height: 0,
+      oilUnloadingArea: this.oilUnloadingArea,
     }
     if (startX > endX) {
       point.x = endX