feat: Expand various types of polygonOperation

packages/lb-annotation/src/core/toolOperation/pointCloud2dOperation.ts

@@ -0,0 +1,73 @@
+/**
+ * It can expand various types of operations
+ *
+ * @file PointCloud 2D Operation
+ * @createdate 2022-07-11
+ * @author Ron <ron.f.luo@gmail.com>
+ */
+
+import AxisUtils from '@/utils/tool/AxisUtils';
+import DrawUtils from '@/utils/tool/DrawUtils';
+import StyleUtils from '@/utils/tool/StyleUtils';
+import PolygonOperation from './polygonOperation';
+
+class PointCloud2dOperation extends PolygonOperation {
+  public renderStaticPolygon() {
+    if (this.isHidden === false) {
+      this.polygonList?.forEach((polygon) => {
+        if ([this.selectedID, this.editPolygonID].includes(polygon.id)) {
+          return;
+        }
+        const { attribute } = polygon;
+        const toolColor = this.getColor(attribute);
+        const toolData = StyleUtils.getStrokeAndFill(toolColor, polygon.valid);
+        const transformPointList = AxisUtils.changePointListByZoom(polygon.pointList || [], this.zoom, this.currentPos);
+
+        DrawUtils.drawPolygonWithFillAndLine(this.canvas, transformPointList, {
+          fillColor: 'transparent',
+          strokeColor: toolData.stroke,
+          pointColor: 'white',
+          thickness: this.style?.width ?? 2,
+          lineCap: 'round',
+          isClose: true,
+          lineType: this.config?.lineType,
+        });
+
+        DrawUtils.drawLine(this.canvas, transformPointList[0], transformPointList[1], {
+          color: 'red',
+          thickness: 3,
+        });
+      });
+    }
+  }
+
+  public renderSelectedPolygon() {
+    if (this.selectedID) {
+      const selectdPolygon = this.selectedPolygon;
+
+      if (selectdPolygon) {
+        const toolColor = this.getColor(selectdPolygon.attribute);
+        const toolData = StyleUtils.getStrokeAndFill(toolColor, selectdPolygon.valid, { isSelected: true });
+
+        const polygon = AxisUtils.changePointListByZoom(selectdPolygon.pointList, this.zoom, this.currentPos);
+
+        DrawUtils.drawSelectedPolygonWithFillAndLine(this.canvas, polygon, {
+          fillColor: 'transparent',
+          strokeColor: toolData.stroke,
+          pointColor: 'white',
+          thickness: 2,
+          lineCap: 'round',
+          isClose: true,
+          lineType: this.config?.lineType,
+        });
+
+        DrawUtils.drawLine(this.canvas, polygon[0], polygon[1], {
+          color: 'red',
+          thickness: 3,
+        });
+      }
+    }
+  }
+}
+
+export default PointCloud2dOperation;

packages/lb-annotation/src/index.ts

@@ -13,6 +13,7 @@ import PolygonOperation from './core/toolOperation/polygonOperation';
 import MeasureOperation from './core/toolOperation/measureOperation';
 import { BasicToolOperation } from './core/toolOperation/basicToolOperation';
 import ViewOperation from './core/toolOperation/ViewOperation';
+import PointCloud2dOperation from './core/toolOperation/pointCloud2dOperation';
 
 // Constant
 import * as cAnnotation from './constant/annotation';
@@ -53,6 +54,7 @@ export {
   BasicToolOperation,
   MeasureOperation,
   ViewOperation,
+  PointCloud2dOperation,
   // 固定操作
   cAnnotation,
   cAnnotationTask,