修改矩形碰撞检测+动态加载绘制工具

src/components/draw-app/properties/RectProperty.vue

@@ -61,6 +61,7 @@
     <q-input
       outlined
       v-model="rectModel.alpha"
+      mask="#.###"
       @blur="onUpdate"
       label="透明度"
       lazy-rules
@@ -93,7 +94,7 @@
       @blur="onUpdate"
       label="圆角半径"
       lazy-rules
-      :rules="[(val) => (val && val > 0) || '圆角半径必须大于0']"
+      :rules="[(val) => val >= 0 || '圆角半径必须大于等于0']"
     />
   </q-form>
 </template>

src/drawApp/iscsApp.ts

@@ -18,7 +18,10 @@ import {
 } from './commonApp';
 import { CCTVButtonData } from './graphics/CCTV/CCTVButtonInteraction';
 import { CCTVButtonDraw } from 'src/graphics/CCTV/cctvButton/CCTVButtonDrawAssistant';
-import { CCTVButtonTemplate } from 'src/graphics/CCTV/cctvButton/CCTVButton';
+import {
+  CCTVButton,
+  CCTVButtonTemplate,
+} from 'src/graphics/CCTV/cctvButton/CCTVButton';
 import { useDrawStore } from 'src/stores/draw-store';
 import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
 import { getDraft } from 'src/api/DraftApi';
@@ -273,6 +276,7 @@ export function saveDrawDatas(app: IDrawApp) {
       )
     );
   }
+  const graphics = app.queryStore.getAllGraphics();
   switch (drawStore.selectSubmenuAndStation.submenu) {
     case '火灾报警平面图':
       for (let i = 0; i < storage.fasOfPlatformAlarmStorages.length; i++) {
@@ -310,6 +314,15 @@ export function saveDrawDatas(app: IDrawApp) {
             app,
             cctvOfStationControl
           ) as iscsGraphicData.CCTVOfStationControlStorage;
+
+          graphics.forEach((g) => {
+            if (g instanceof CCTVButton) {
+              const cctvButtonData = g.saveData();
+              cctvStorage.cctvButtons.push(
+                (cctvButtonData as CCTVButtonData).data
+              );
+            }
+          });
           storage.cctvOfStationControlStorages[i] = cctvStorage;
           break;
         }
@@ -319,12 +332,6 @@ export function saveDrawDatas(app: IDrawApp) {
     default:
       break;
   }
-  const graphics = app.queryStore.getAllGraphics();
-  /*  graphics.forEach((g) => {
-    if (TrackSection.Type === g.type) {
-      const trackSectionData = (g as TrackSection).saveData();
-      storage.trackSections.push((trackSectionData as TrackSectionData).data);
-    } }) */
   console.log(storage, '保存数据', graphics);
   const base64 = fromUint8Array(storage.serialize());
   return base64;

src/graphics/rect/RectDrawAssistant.ts

@@ -1,9 +1,10 @@
-import { FederatedPointerEvent, Graphics, Point } from 'pixi.js';
+import { FederatedPointerEvent, Graphics, IHitArea, Point } from 'pixi.js';
 import {
   GraphicDrawAssistant,
   GraphicInteractionPlugin,
   IDrawApp,
   JlGraphic,
+  linePoint,
 } from 'jl-graphic';
 
 import { IRectData, Rect, RectTemplate } from './Rect';
@@ -72,6 +73,28 @@ export class RectDraw extends GraphicDrawAssistant<RectTemplate, IRectData> {
   }
 }
 
+//碰撞检测
+export class RectGraphicHitArea implements IHitArea {
+  rect: Rect;
+  constructor(rect: Rect) {
+    this.rect = rect;
+  }
+  contains(x: number, y: number): boolean {
+    let contains = false;
+    const datas = this.rect.datas;
+    const tolerance = datas.lineWidth;
+    const p1 = new Point(0, 0);
+    const p2 = new Point(p1.x + datas.width, p1.y);
+    const p3 = new Point(p1.x + datas.width, p1.y + datas.height);
+    const p4 = new Point(p1.x, p1.y + datas.height);
+    const p = new Point(x, y);
+    contains = contains || linePoint(p1, p2, p, tolerance);
+    contains = contains || linePoint(p2, p3, p, tolerance);
+    contains = contains || linePoint(p3, p4, p, tolerance);
+    contains = contains || linePoint(p4, p1, p, tolerance);
+    return contains;
+  }
+}
 export class rectInteraction extends GraphicInteractionPlugin<Rect> {
   static Name = 'platform_transform';
   constructor(app: IDrawApp) {
@@ -88,6 +111,7 @@ export class rectInteraction extends GraphicInteractionPlugin<Rect> {
     g.cursor = 'pointer';
     g.scalable = true;
     g.rotatable = true;
+    g.rectGraphic.hitArea = new RectGraphicHitArea(g);
   }
   unbind(g: Rect): void {
     g.eventMode = 'none';

src/layouts/IscsDrawLayout.vue

@@ -305,7 +305,7 @@ function toggleRightDrawer() {
 
 //工具栏所用
 const selectUtil = ref();
-const utilsOption: ControlItem[] = reactive([]);
+let utilsOption: ControlItem[] = reactive([]);
 
 function drawSelect(item: string) {
   drawStore.getDrawApp().interactionPlugin(item).resume();
@@ -327,6 +327,34 @@ class ControlItem {
     }
   }
 }
+
+function handleUtilsOption() {
+  utilsOption = [];
+  const drawAssistantsTypes = [
+    Arrow.Type,
+    TextContent.Type,
+    Rect.Type,
+    Line.Type,
+  ];
+  switch (drawStore.selectSubmenuAndStation.submenu) {
+    case '监控布局图':
+      drawAssistantsTypes.push(CCTVButton.Type);
+      break;
+  }
+  drawAssistantsTypes.forEach((type) => {
+    const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
+    if (drawAssistant) {
+      utilsOption.push(
+        new ControlItem(
+          drawAssistant.name,
+          drawAssistant.icon,
+          drawAssistant.description || drawAssistant.name
+        )
+      );
+    }
+  });
+  drawDialogHeight.value = 44 * Math.ceil(utilsOption.length / 2);
+}
 //左侧功能按钮
 const leftMenuConfig = [
   { label: '保存', click: saveAllDrawDatas },
@@ -364,26 +392,7 @@ onMounted(() => {
   } else {
     drawStore.setDraftId(null);
   }
-  const drawAssistantsTypes = [
+  handleUtilsOption();
-    Arrow.Type,
-    TextContent.Type,
-    Rect.Type,
-    Line.Type,
-    CCTVButton.Type,
-  ];
-  drawAssistantsTypes.forEach((type) => {
-    const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
-    if (drawAssistant) {
-      utilsOption.push(
-        new ControlItem(
-          drawAssistant.name,
-          drawAssistant.icon,
-          drawAssistant.description || drawAssistant.name
-        )
-      );
-    }
-  });
-  drawDialogHeight.value = 44 * Math.ceil(utilsOption.length / 2);
 });
 
 const canvasWidth = ref(0);
@@ -473,6 +482,7 @@ function selectedMenu(menuName: string) {
       break;
     }
   }
+  handleUtilsOption();
 }
 
 const selectSubMenuName = ref('');
@@ -480,6 +490,7 @@ const subMenuOption = ref([]);
 function selectedSubMenu(subName: string) {
   drawStore.selectSubmenuAndStation.submenu = subName;
   forceReloadDate();
+  handleUtilsOption();
 }
 
 let iscsTypeConfig: {