初始化正确加载数据

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

@@ -47,6 +47,7 @@ export class ImageLabel2Component implements OnInit {
           info.dimensionedPoints? info.dimensionedPoints = JSON.parse(info.dimensionedPoints) : null;
           that.camerasData = info;
           that.markType = info.type;
+          console.log(that.camerasData,"摄像头数据")
           const httpOptions = {
             responseType: 'blob' as 'json',
             params: {cameraId: parmas.id}
@@ -68,9 +69,9 @@ export class ImageLabel2Component implements OnInit {
   save() {
     if (!this.camerasData.dimensionedPoints) {
       this.camerasData.dimensionedPoints = {
-        polygon: null,
+        polygon: [],
-        arrow : null,
+        arrow : [],
-        rectangle: null,
+        rectangle: [],
       }
     }
     if (this.markType === 0) {
@@ -127,11 +128,31 @@ export class ImageLabel2Component implements OnInit {
       window.setTimeout(()=>{ // 加载图片
         ctx.drawImage(img, 0, 0, that.canvasWidth, that.canvasHeight);
         this.copyCanvas = ctx.getImageData(0, 0, that.canvasWidth, that.canvasHeight)
-        that.initCanvasEvent(canvas)
+        that.initCanvasEvent(canvas) //监听canvas事件
+        that.initMark(canvas,ctx) //初始化标绘图形
       }, 0)
     }
   }
 
+  //初始化标绘图形
+  initMark(canvas,context) {
+    if (!this.camerasData.dimensionedPoints) {
+      return
+    }
+    if (this.markType === 0) {
+      this.camerasData.dimensionedPoints.polygon.forEach(element => {
+        this.drawPolygon(element.x,element.y,canvas,context); //绘制多边形
+      });
+    } else if (this.markType === 2) {
+      this.arrowPoints = this.camerasData.dimensionedPoints.arrow
+      this.oblongPoints = this.camerasData.dimensionedPoints.rectangle
+      this.drawLine(this.arrowPoints,context)
+    } else if (this.markType === 3) {
+      this.arrowPoints = this.camerasData.dimensionedPoints.arrow
+      this.drawLine(this.arrowPoints,context)
+    }
+  }
+
 
 
   markType: number = 0; //0=进出口,2=卸油区,3=便利店,