Browse Source

feat:多边形加编辑

YaolongHan 4 năm trước cách đây
mục cha
commit
71ab32c929

+ 13 - 13
src/components/baseEditer.vue

@@ -44,22 +44,22 @@ export default {
         null
       );
       console.log(this.fmap);
-      // this.fmap.parseData("1001724_29", 1, res => {
-        // console.log(res);
-        // this.fParser = new SFloorParser(null);
-        // console.log(this.fParser);
-        // this.fParser.parseData(res);
-        // this.fParser.spaceList.forEach(t => this.scene.addItem(t));
-        // this.fParser.wallList.forEach(t => this.scene.addItem(t));
-        // this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
-        // this.fParser.doorList.forEach(t => this.scene.addItem(t));
-        // this.fParser.columnList.forEach(t => this.scene.addItem(t));
-        // this.fParser.casementList.forEach(t => this.scene.addItem(t));
+      this.fmap.parseData("1001724_29", 1, res => {
+        console.log(res);
+        this.fParser = new SFloorParser(null);
+        console.log(this.fParser);
+        this.fParser.parseData(res);
+        this.fParser.spaceList.forEach(t => this.scene.addItem(t));
+        this.fParser.wallList.forEach(t => this.scene.addItem(t));
+        this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
+        this.fParser.doorList.forEach(t => this.scene.addItem(t));
+        this.fParser.columnList.forEach(t => this.scene.addItem(t));
+        this.fParser.casementList.forEach(t => this.scene.addItem(t));
         this.addPolyLine();
-        // this.DirectRelationItem();
+        this.DirectRelationItem();
         this.view.scene = this.scene;
         this.view.fitSceneToView();
-      // });
+      });
     },
     // 引入构建多边形类
     addPolyLine() {

+ 155 - 0
src/components/baseEditertest.vue

@@ -0,0 +1,155 @@
+<template>
+  <div id="baseEditer">
+    <div id="fengMap"></div>
+    <div class="canvas-container" ref="graphy">
+      <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
+    </div>
+  </div>
+</template>
+<script>
+import { SFengParser } from "@saga-web/feng-map";
+import { SFloorParser } from "@saga-web/big";
+import { DirectRelationItem } from "@saga-web/topology/lib/items/DirectRelationItem.js";
+import { SGraphyView, SGraphyScene } from "@saga-web/graphy/lib";
+import { SPolygonItem } from "./mapClass/SPolygonItem";
+import {FloorView} from "./../lib/FloorView"
+export default {
+  data() {
+    return {
+      appName: "万达可视化系统",
+      key: "23f30a832a862c58637a4aadbf50a566",
+      mapServerURL: "/wanda",
+      fmapID: "1001724_29",
+      fmap: null,
+      canvasWidth: 700,
+      canvasHeight: 800,
+      fParser: null
+    };
+  },
+  mounted() {
+    this.canvasWidth = this.$refs.graphy.offsetWidth;
+    this.canvasHeight = this.$refs.graphy.offsetHeight;
+    this.init()
+  },
+  methods: {
+    init() {
+      // document.getElementById(`canvas`).focus()
+      this.clearGraphy();
+      this.scene = new SGraphyScene();
+      // this.fmap = new SFengParser(
+      //   "fengMap",
+      //   this.mapServerURL,
+      //   this.key,
+      //   this.appName,
+      //   null
+      // );
+      // console.log(this.fmap);
+      // this.fmap.parseData("1001724_29", 1, res => {
+        // console.log(res);
+        // this.fParser = new SFloorParser(null);
+        // console.log(this.fParser);
+        // this.fParser.parseData(res);
+        // this.fParser.spaceList.forEach(t => this.scene.addItem(t));
+        // this.fParser.wallList.forEach(t => this.scene.addItem(t));
+        // this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
+        // this.fParser.doorList.forEach(t => this.scene.addItem(t));
+        // this.fParser.columnList.forEach(t => this.scene.addItem(t));
+        // this.fParser.casementList.forEach(t => this.scene.addItem(t));
+        this.addPolyLine();
+        // this.DirectRelationItem();
+        this.view.scene = this.scene;
+        this.view.fitSceneToView();
+      // });
+    },
+    // 引入构建多边形类
+    addPolyLine() {
+      // const data = {
+      //   PointList: [
+      //     { X: 100, Y: 100},
+      //     { X: 1000, Y: 100},
+      //     { X: 1000, Y:1100  },
+      //     { X: 100, Y:1100  },
+      //   ]
+      // };
+      const Polylines = new SPolygonItem(null);
+      Polylines.setStatus = 2;
+      this.scene.addItem(Polylines);
+      this.scene.grabItem = Polylines;
+    },
+    // 引入折线
+    DirectRelationItem() {
+      // const data = {
+      //   PointList: [
+      //     { X: -138.71000000089407, Y: -17.5 },
+      //     { X: -130.31000000052154, Y: -17.5 }
+      //   ]
+      // };
+      const directRelationItem = new DirectRelationItem(null);
+      this.scene.addItem(directRelationItem);
+    },
+    clearGraphy() {
+      if (this.view) {
+        this.view.scene = null;
+        return;
+      }
+      this.view = new FloorView("canvas");
+      document.getElementById('canvas').focus()
+    },
+    spaceClick(space, event) {
+      const item = new SImageItem(null, {
+        Width: 32,
+        Height: 32,
+        Url: "https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=1569891320,3644984535&fm=85&app=52&f=JPEG?w=121&h=75&s=891B0FD8964406EF8091EA200300E056"
+      })
+      item.moveTo(event[0].x, event[0].y)
+      item.zOrder = 999;
+      item.connect('mousedown', this, this.iconClick)
+      this.scene.addItem(item)
+      setInterval(()=>{item.text+='魔'},1000)
+    },
+    iconClick(item, event) {
+      console.log(2222222222222)
+    },
+    changeFloor() { },
+    changeStatus(name) {
+      switch (name) {
+        case '选择':
+          // test init
+          this.init();
+          break;
+        case '画线':
+          this.scene.isLining = true;
+          console.log('lining')
+          break;
+        case '画文字':
+          this.scene.isTexting = true;
+          break;
+        case '画图片':
+          this.scene.isImging = true;
+          break;
+        default:
+          console.log(name)
+          break;
+      }
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+#baseEditer {
+  background: #ccc;
+  width: 100%;
+  height: 100%;
+  // position: relative;
+  #fengMap {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+  .canvas-container {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

+ 143 - 24
src/components/mapClass/SPolygonItem.ts

@@ -32,6 +32,9 @@ import {
 } from "@saga-web/draw";
 import { PolygonData } from "./type/PolygonData";
 import { Point } from "./type/Point";
+import { SRelationState } from "@saga-web/big/lib/enums/SRelationState"
+import { SMathUtil } from "@saga-web/big/lib/utils/SMathUtil";
+
 /**
  * 编辑多边形
  *
@@ -51,7 +54,7 @@ export class SPolygonItem extends SGraphyItem {
     /** 是否闭合    */
     closeFlag: boolean = false;
     // 当前状态 1:show 2 创建中,3 编辑中
-    _status: number = 2;
+    _status: number = SRelationState.Normal;
     // 获取当前状态
     get getStatus(): number {
         return this._status;
@@ -70,7 +73,12 @@ export class SPolygonItem extends SGraphyItem {
     borderLine: number = 4;
     /** 鼠标移动点  */
     private lastPoint = new SPoint();
-
+    /** 当前鼠标获取顶点对应索引 */
+    private curIndex: number = -1;
+    /** 灵敏像素 */
+    private len: number = 15;
+    /** 场景像素  */
+    private scenceLen: number = 15;
     /**
     * 构造函数
     *
@@ -80,7 +88,8 @@ export class SPolygonItem extends SGraphyItem {
 
     constructor(parent: SGraphyItem | null, data: PolygonData | null) {
         super(parent);
-        this.data = data
+        this.data = data;
+
         if (data && data.PointList) {
             this._xyzListToSPointList(data.PointList);
         };
@@ -241,21 +250,22 @@ export class SPolygonItem extends SGraphyItem {
 
 
     /**
-* 构造函数  创建多边形
-*
-*/
-    protected editPolygon(painter: SPainter, pointList: SPoint[], point: SPoint) {
+    * 构造函数  创建多边形
+    *
+    */
+
+    protected editPolygon(painter: SPainter, pointList: SPoint[]) {
         // 展示多边形
         this.showPolygon(painter, pointList);
         // 绘制顶点块
-
-
+        pointList.forEach((item, index) => {
+            painter.drawCircle(item.x, item.y, painter.toPx(8))
+        })
     }
 
 
 
 
-
     ////////////以下为鼠标事件
 
     /**
@@ -266,18 +276,34 @@ export class SPolygonItem extends SGraphyItem {
     */
 
     onDoubleClick(event: SMouseEvent): boolean {
+        // 如果位show状态 双击改对象则需改为编辑状态
+        if (this._status == 1) {
+            this._status = 3;
+            this.update()
+        }
         return true;
     } // Function onDoubleClick()
 
+
     /**
- * 键盘事件
- *
- * @param	event         事件参数
- * @return	boolean
- */
+    * 键盘事件
+    *
+    * @param	event         事件参数
+    * @return	boolean
+    */
     onKeyDown(event: KeyboardEvent): boolean {
-        if (this._status == 2 && event.code == 'Enter') {
-            this._status = 1
+        if (this._status == 1) {
+            return false;
+        } else if (this._status == 2) {
+            if (event.code == 'Enter') {
+                this._status = 1
+            }
+        } else if (this._status == 3) {
+            // if (event.code == 'Enter') {
+            //     this._status = 1
+            // }
+        } else {
+
         }
         this.update()
         return true;
@@ -289,12 +315,64 @@ export class SPolygonItem extends SGraphyItem {
      * @return	boolean
      */
     onMouseDown(event: SMouseEvent): boolean {
+        // 如果状态为编辑状态则添加点
         if (this._status == 2) {
+            // 新增顶点
             this.reservePoint(event.x, event.y)
+        } else if (this._status == 3) {
+            // 1 判断是否点击在多边形顶点
+            // 敏感度
+            this.len = 15;
+            this.pointList.forEach((item, index) => {
+                let dis = SMathUtil.pointDistance(
+                    event.x,
+                    event.y,
+                    item.x,
+                    item.y
+                );
+                if (dis < this.len) {
+                    this.len = dis;
+                    this.curIndex = index;
+                }
+            });
+            // 判断是否点击在多边形得边上
+            if (-1 == this.curIndex) {
+                let len = SMathUtil.pointToLine(
+                    new SPoint(event.x, event.y),
+                    new SLine(this.pointList[0], this.pointList[1])
+                ),
+                    index = 0;
+                if (this.pointList.length > 2) {
+                    for (let i = 1; i < this.pointList.length; i++) {
+                        let dis = SMathUtil.pointToLine(
+                            new SPoint(event.x, event.y),
+                            new SLine(this.pointList[i], this.pointList[i + 1])
+                        );
+                        if (i == this.pointList.length) {
+                            console.log(this.pointList.length)
+                            dis = SMathUtil.pointToLine(
+                                new SPoint(event.x, event.y),
+                                new SLine(this.pointList[i], this.pointList[0])
+                            );
+                        }
+                        if (dis.MinDis < len.MinDis) {
+                            len = dis;
+                            index = i;
+                        }
+                    }
+                }
+                if (len.Point) {
+                    if (len.MinDis <= this.scenceLen) {
+                        this.pointList.splice(index + 1, 0, len.Point);
+                        this.update();
+                    }
+                }
+            }
         }
-
         return true;
     } // Function onMouseDown()
+
+
     /**
      * 鼠标双击事件
      *
@@ -317,11 +395,21 @@ export class SPolygonItem extends SGraphyItem {
         if (this._status == 2) {
             this.lastPoint.x = event.x;
             this.lastPoint.y = event.y;
+        } else if (this._status == 3) {
+            if (-1 != this.curIndex) {
+                console.log('onMouseMove')
+                this.pointList[this.curIndex].x = event.x;
+                this.pointList[this.curIndex].y = event.y;
+            }
         }
         this.update()
         return true;
     } // Function onMouseDown()
     onMouseUp(event: SMouseEvent): boolean {
+        console.log('onMouseUp')
+        if (this._status == 3) {
+            this.curIndex = -1;
+        }
         return true;
     } // Function onMouseUp()
     onResize(event: SMouseEvent): boolean {
@@ -329,14 +417,44 @@ export class SPolygonItem extends SGraphyItem {
     } // Function onMouseUp()
 
 
-    ////////////////////////
 
     /**
-* Item绘制操作
-*
-* @param   painter       painter对象
-*/
+    *  点击点是否在item范围内
+    *
+    */
+    // contains(x: number, y: number): boolean {
+    //     console.log('PTL.MinDis < this.scenceLen')
+    //     if (3 == this._status) {
+    //         let p = new SPoint(x, y);
+    //         //  todo差缩放
+    //         for (let i = 1; i < this.pointList.length; i++) {
+    //             let PTL = SMathUtil.pointToLine(
+    //                 p,
+    //                 new SLine(
+    //                     this.pointList[i - 1].x,
+    //                     this.pointList[i - 1].y,
+    //                     this.pointList[i].x,
+    //                     this.pointList[i].y
+    //                 )
+    //             );
+    //             if (PTL.MinDis < this.scenceLen) {
+    //                 console.log('PTL.MinDis < this.scenceLen', PTL.MinDis, this.scenceLen)
+    //                 return true;
+    //             }
+    //         }
+    //         return false;
+    //     }
+    //     return false;
+    // }
+
+    /**
+    * Item绘制操作
+    *
+    * @param   painter       painter对象
+    */
+
     onDraw(painter: SPainter): void {
+        this.scenceLen = painter.toPx(this.len)
         // 当状态为展示状态
         if (this._status == 1) {
             // 闭合多边形
@@ -346,7 +464,8 @@ export class SPolygonItem extends SGraphyItem {
             this.createPolygon(painter, this.pointList)
         } else {
             // 编辑状态
-            // this.editPolygon(painter, this.pointList);
+            this.editPolygon(painter, this.pointList);
         }
     } // Function onDraw()
+
 }

+ 5 - 2
src/views/editer.vue

@@ -11,7 +11,8 @@
       </div>
       <!-- 绘制界面 -->
       <div class="baseEdit">
-        <baseEditer ref="graphy"></baseEditer>
+        <!-- <baseEditer ref="graphy"></baseEditer> -->
+        <baseEditertest ref="graphy"></baseEditertest>
       </div>
       <!-- 右侧工具栏 -->
       <div class="right_toolbar">
@@ -23,6 +24,7 @@
 
 <script>
 import baseEditer from "@/components/baseEditer.vue";
+import baseEditertest from "@/components/baseEditertest.vue";
 import leftToolbar from "@/components/edit/left_toolbar.vue";
 import topToolbar from "@/components/edit/top_toolbar.vue";
 import rightToolbar from "@/components/edit/right_toolbar.vue";
@@ -31,6 +33,7 @@ export default {
   name: "wandaEditer",
   components: {
     baseEditer,
+    baseEditertest,
     leftToolbar,
     topToolbar,
     rightToolbar
@@ -38,7 +41,7 @@ export default {
   methods: {
     // 左侧工具栏 点击事件
     toolActionClick(name) {
-      this.$refs.graphy.changeStatus(name)
+      this.$refs.graphy.changeStatus(name);
     }
   }
 };

+ 0 - 2
vue.config.js

@@ -17,9 +17,7 @@ module.exports = {
     },
     chainWebpack: (config) => {
         const svgRule = config.module.rule('svg');
-
         svgRule.uses.clear();
-
         svgRule
             .use('babel-loader')
             .loader('babel-loader')