[完善]安信标记回显根据百分比回显

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

@@ -34,10 +34,7 @@ export class ImageLabelAnxinComponent implements OnInit {
   getImgMarkData() {
     console.log('获取照片', new Date().getTime());
     return new Promise((resolve, reject) => {
-     
+      this.http.get(`/api/Cameras/${this.cameraId}`).subscribe((data: any) => {
-      this.http
-        .get(`/api/Cameras/${this.cameraId}`)
-        .subscribe((data: any) => {
         this.camerasData = data;
         // this.camerasData.dimensionedPointsAnxin = null
         this.markType = data.type;
@@ -144,14 +141,44 @@ export class ImageLabelAnxinComponent implements OnInit {
     }
     console.log('原始标点数据', this.camerasData.dimensionedPointsAnxin);
 
-    for (const key in this.camerasData.dimensionedPointsAnxin.rawData) {
+    // for (const key in this.camerasData.dimensionedPointsAnxin.rawData) {
-      const element = this.camerasData.dimensionedPointsAnxin.rawData[key];
+    //   const element = this.camerasData.dimensionedPointsAnxin.rawData[key];
-      console.log(key, element);
+    //   console.log(key, element);
-      if (element.length !== 0) {
+    //   if (element.length !== 0) {
-        for (let index = 0; index < element.length; index++) {
+    //     for (let index = 0; index < element.length; index++) {
-          const item = element[index];
+    //       const item = element[index];
-          let obj = this.PolygonData[key];
+    //       console.log(666, item);
-          this.DrawPolygoning = key;
+    //       let obj = this.PolygonData[key];
+    //       this.DrawPolygoning = key;
+    //       this.DrawPolygon(
+    //         item.x,
+    //         item.y,
+    //         canvas,
+    //         context,
+    //         obj.Points,
+    //         obj.Circles,
+    //         obj.Allpoints,
+    //         obj.IsDragging,
+    //         obj.IsInOut,
+    //         obj.Color
+    //       );
+    //     }
+    //   }
+    //   this.DrawPolygoning = '';
+    // }
+
+    for (
+      let key = 0;
+      key < this.camerasData.dimensionedPointsAnxin.yamlData.length;
+      key++
+    ) {
+      const element = this.camerasData.dimensionedPointsAnxin.yamlData[key];
+      let name = enum_area[element.type];
+      let arr = this.handleArr(element.points);
+      for (let index = 0; index < arr.length; index++) {
+        const item = arr[index];
+        let obj = this.PolygonData[name];
+        this.DrawPolygoning = name;
         this.DrawPolygon(
           item.x,
           item.y,
@@ -165,10 +192,21 @@ export class ImageLabelAnxinComponent implements OnInit {
           obj.Color
         );
       }
-      }
       this.DrawPolygoning = '';
     }
   }
+  handleArr(arr, n = 2) {
+    const res = [];
+    for (let i = 0; i < arr.length - 1; i += 2) {
+      let index = Math.floor(i / n);
+      const obj = {
+        x: Number((arr[i] * this.canvasWidth).toFixed(0)),
+        y: Number((arr[i + 1] * this.canvasHeight).toFixed(0)),
+      };
+      res[index] = obj;
+    }
+    return res;
+  }
 
   markType: number = 0; //0=进出口,1=加油区,2=卸油区,3=便利店,