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

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

@@ -34,27 +34,24 @@ 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
+        this.camerasData = data;
-        .get(`/api/Cameras/${this.cameraId}`)
+        // this.camerasData.dimensionedPointsAnxin = null
-        .subscribe((data: any) => {
+        this.markType = data.type;
-          this.camerasData = data;
+        const httpOptions = {
-          // this.camerasData.dimensionedPointsAnxin = null
+          responseType: 'blob' as 'json',
-          this.markType = data.type;
+          params: { cameraId: this.cameraId },
-          const httpOptions = {
+        };
-            responseType: 'blob' as 'json',
+        let date = new Date().getTime();
-            params: { cameraId: this.cameraId },
+        this.http.get(`/api/Cameras/Images?v=${date}`, httpOptions).subscribe({
-          };
+          next: (data) => {
-          let date = new Date().getTime();
+            resolve(data);
-          this.http.get(`/api/Cameras/Images?v=${date}`, httpOptions).subscribe({
+          },
-            next: (data) => {
+          error: (err) => {
-              resolve(data);
+            reject('error');
-            },
+          },
-            error: (err) => {
-              reject('error');
-            },
-          });
         });
+      });
     });
   }
 
@@ -144,31 +141,72 @@ 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.DrawPolygon(
+    //       this.DrawPolygoning = key;
-            item.x,
+    //       this.DrawPolygon(
-            item.y,
+    //         item.x,
-            canvas,
+    //         item.y,
-            context,
+    //         canvas,
-            obj.Points,
+    //         context,
-            obj.Circles,
+    //         obj.Points,
-            obj.Allpoints,
+    //         obj.Circles,
-            obj.IsDragging,
+    //         obj.Allpoints,
-            obj.IsInOut,
+    //         obj.IsDragging,
-            obj.Color
+    //         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,
+          canvas,
+          context,
+          obj.Points,
+          obj.Circles,
+          obj.Allpoints,
+          obj.IsDragging,
+          obj.IsInOut,
+          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=便利店,