bill 1 yıl önce
ebeveyn
işleme
3d83d756aa

+ 2 - 2
src/app/liantong/example/index.vue

@@ -42,7 +42,7 @@
 <script setup lang="ts">
 import { shallowRef, watch, ref } from "vue";
 import { EditWholeLine, createBoard, EditPoi, changeEnv, floorDataTransform } from "../";
-// import storeData from "./storeData.json";
+import storeData from "./storeData.json";
 import floor from "./floorplan_cad.json";
 import { ElButton, ElSelect, ElOption } from "element-plus";
 import "element-plus/dist/index.css";
@@ -64,7 +64,7 @@ board.bound.setRetainScale(true);
 
 setTimeout(() => {
   board.setData({ rooms: rooms });
-  // board.setData(storeData);
+  board.setData(storeData);
   board.bound.autoBound(20);
 }, 500);
 

+ 111 - 40
src/app/liantong/example/storeData.json

@@ -4,75 +4,146 @@
       "id": "0",
       "points": [
         {
-          "x": -28.644845504651215,
-          "y": -794.2120139146439,
-          "id": "2"
+          "id": "Point13",
+          "x": -6.181,
+          "y": -4.381
         },
         {
-          "x": -13.653330800930178,
-          "y": -796.2814003196064,
-          "id": "3"
+          "id": "Point4",
+          "x": -2.502,
+          "y": -4.381
         },
         {
-          "x": -10.915687125337175,
-          "y": -783.2992950816067,
-          "id": "4"
+          "id": "Point12",
+          "x": -6.181,
+          "y": 4.646
         },
         {
-          "x": -26.83515092853853,
-          "y": -781.1018172003048,
-          "id": "5"
-        }
-      ],
-      "polygons": [
-        {
-          "id": "2",
-          "lineIds": [
-            "2",
-            "3",
-            "4",
-            "5"
-          ]
+          "id": "Point7",
+          "x": 0.435,
+          "y": -1.168
+        },
+        {
+          "id": "Point11",
+          "x": 0.592,
+          "y": 4.646
+        },
+        {
+          "id": "Point6",
+          "x": 0.435,
+          "y": -4.381
+        },
+        {
+          "id": "Point9",
+          "x": 7.661,
+          "y": 1.509
+        },
+        {
+          "id": "Point10",
+          "x": 0.592,
+          "y": 1.509
+        },
+        {
+          "id": "Point8",
+          "x": 7.661,
+          "y": -1.168
         }
       ],
       "lines": [
         {
-          "id": "2",
+          "id": "Wall27",
           "pointIds": [
-            "2",
-            "3"
+            "Point13",
+            "Point4"
           ]
         },
         {
-          "id": "3",
+          "id": "Wall26",
           "pointIds": [
-            "3",
-            "4"
+            "Point12",
+            "Point13"
           ]
         },
         {
-          "id": "4",
+          "id": "Wall25",
           "pointIds": [
-            "4",
-            "5"
+            "Point11",
+            "Point12"
           ]
         },
         {
-          "id": "5",
+          "id": "Wall24",
           "pointIds": [
-            "5",
-            "2"
+            "Point10",
+            "Point11"
+          ]
+        },
+        {
+          "id": "Wall23",
+          "pointIds": [
+            "Point9",
+            "Point10"
+          ]
+        },
+        {
+          "id": "Wall22",
+          "pointIds": [
+            "Point8",
+            "Point9"
+          ]
+        },
+        {
+          "id": "Wall21",
+          "pointIds": [
+            "Point7",
+            "Point8"
+          ]
+        },
+        {
+          "id": "Wall20",
+          "pointIds": [
+            "Point6",
+            "Point7"
+          ]
+        },
+        {
+          "id": "Wall19",
+          "pointIds": [
+            "Point4",
+            "Point6"
           ]
         }
-      ]
+      ],
+      "polygons": []
     }
   ],
   "pois": [
     {
-      "id": "1722565169100",
-      "x": -18.71750549993193,
-      "y": -789.3694446100543,
-      "type": "bzjg"
+      "id": "1722907454861",
+      "x": -1.036655172413794,
+      "y": -4.342284482758619,
+      "type": "wljg",
+      "intersect": true
+    },
+    {
+      "id": "1722907460038",
+      "x": 4.240275862068964,
+      "y": -0.7889741379310333,
+      "type": "wljg",
+      "rotate": 57.917291714561514
+    },
+    {
+      "id": "1722907463444",
+      "x": 1.9465344827586186,
+      "y": 1.5445431034482766,
+      "type": "DDF",
+      "intersect": true
+    },
+    {
+      "id": "1722907465884",
+      "x": -2.9458965517241387,
+      "y": 0.4043017241379321,
+      "type": "DDF"
     }
   ]
 }

+ 19 - 10
src/app/liantong/icon.ts

@@ -93,15 +93,18 @@ export const svgs = {
 
 for (const key in svgs) {
   injectPoiType(key, (attrib, tree) => {
-    const svgAct = pathsToActShape({
-      paths: svgs[key],
-      size: [1000, 800],
-      realWidth: 0.8,
-      offset: [0, 100],
-      strokeWidth: 5,
-      fixed: false,
-      strokeColor: "#409EFF",
-    });
+    const svgAct = pathsToActShape(
+      {
+        paths: svgs[key],
+        size: [1000, 800],
+        realWidth: 0.8,
+        offset: [0, 100],
+        strokeWidth: 5,
+        fixed: false,
+        strokeColor: "#409EFF",
+      },
+      false
+    );
 
     const paths = svgAct.shape.find<Path>(".path");
 
@@ -146,7 +149,13 @@ for (const key in svgs) {
       common() {
         const tf = svgAct.shape.findOne(".tf");
         tf && tf.visible(false);
-        svgAct.common();
+        if (!attrib.intersect) {
+          svgAct.common();
+        } else {
+          paths.forEach((path) => {
+            path.fill("#004e9f");
+          });
+        }
       },
       draging() {
         paths.forEach((path) => {

+ 53 - 1
src/board/packages/poi/edit-poi.ts

@@ -1,8 +1,14 @@
 import { Transformer } from "konva/lib/shapes/Transformer";
-import { CopyProps, copyEntityAttrib } from "../../shared";
+import {
+  CopyProps,
+  copyEntityAttrib,
+  isLineIntersectingPolygon,
+} from "../../shared";
 import { Poi, PoiAttrib } from "./poi";
 import { Group } from "konva/lib/Group";
 import { Rect } from "konva/lib/shapes/Rect";
+import { Transform } from "konva/lib/Util";
+import { MathUtils } from "three";
 
 export class EditPoi<T extends PoiAttrib = PoiAttrib> extends Poi<T> {
   initShape() {
@@ -50,6 +56,52 @@ export class EditPoi<T extends PoiAttrib = PoiAttrib> extends Poi<T> {
     return group;
   }
 
+  isIntersecting() {
+    const room = this.container.attrib.data.rooms[0];
+    if (!room) return;
+    const points = room.points;
+    const lines = room.lines.map((line) =>
+      line.pointIds.flatMap((pid) => points.find(({ id }) => pid === id))
+    );
+
+    const w = 0.8;
+    const h = 0.8 * (800 / 1000);
+
+    const poi = this.attrib;
+    const poyPoints = [
+      [poi.x - w / 2, poi.y - h / 2],
+      [poi.x + w / 2, poi.y - h / 2],
+      [poi.x + w / 2, poi.y + h / 2],
+      [poi.x - w / 2, poi.y + h / 2],
+      [poi.x - w / 2, poi.y - h / 2],
+    ];
+    const tf = new Transform()
+      .translate(poi.x, poi.y)
+      .rotate(MathUtils.degToRad(poi.rotate || 0))
+      .translate(-poi.x, -poi.y);
+    poyPoints.forEach((point) => {
+      const tpoint = tf.point({ x: point[0], y: point[1] });
+      point[0] = tpoint.x;
+      point[1] = tpoint.y;
+    });
+
+    const isJoin = lines.some((line) => {
+      return isLineIntersectingPolygon(poyPoints, [
+        line[0].x,
+        line[0].y,
+        line[1].x,
+        line[1].y,
+      ]);
+    });
+    this.attrib.intersect = isJoin;
+    return isJoin;
+  }
+
+  diffRedraw(): void {
+    this.isIntersecting();
+    super.diffRedraw();
+  }
+
   mounted(): void {
     super.enableMouseAct(this.actShape);
     this.bus.on("shapeStatusChange", (data) => {

+ 1 - 0
src/board/packages/poi/poi.ts

@@ -5,6 +5,7 @@ import { defaultPoiShapeFactory, poiTypes } from "./types";
 type PoiData = {
   x: number;
   y: number;
+  intersect?: boolean;
   rotate?: number;
   type: string;
 };

+ 5 - 2
src/board/shared/act.ts

@@ -3,6 +3,7 @@ import { Rect } from "konva/lib/shapes/Rect";
 import { getRealAbsoluteSize } from "./shape-helper";
 import { Group } from "konva/lib/Group";
 import { KonvaEventObject } from "konva/lib/Node";
+import { Circle } from "konva/lib/shapes/Circle";
 
 export type SVGPaths = (
   | string
@@ -46,7 +47,7 @@ export type PathsToActShapeProps = {
   fixed?: boolean;
   strokeColor?: string;
 };
-export const pathsToActShape = (props: PathsToActShapeProps, test = false) => {
+export const pathsToActShape = (props: PathsToActShapeProps, test = true) => {
   const size = props.size;
   const realSize = props.realWidth || props.size[0];
   const scale = realSize / size[0];
@@ -103,11 +104,13 @@ export const pathsToActShape = (props: PathsToActShapeProps, test = false) => {
   const offsetGroup = new Group();
   offsetGroup.add(...paths, rect);
   offsetGroup.x(-realBound[0] / 2);
-  offsetGroup.y(-realBound[1] / 2);
+  offsetGroup.y(-realBound[0] / 2);
 
   const group = new Group();
   group.add(offsetGroup);
 
+  const c = new Circle({ fill: "red", radius: 0.06 });
+  group.add(c);
   return {
     getSize: () => {
       const size = rect.getSize();

+ 13 - 0
src/board/shared/math.ts

@@ -400,3 +400,16 @@ export const getLineInnerContinuityPoints = (
   }
   return points;
 };
+
+export const isLineIntersectingPolygon = (
+  polygonPoints: number[][],
+  line: number[]
+) => {
+  for (let i = 0; i < polygonPoints.length - 1; i++) {
+    const checkLine = [...polygonPoints[i], ...polygonPoints[i + 1]];
+    if (getLineRelationship(checkLine, line) === RelationshipEnum.Intersect) {
+      return true;
+    }
+  }
+  return false;
+};