浏览代码

添加地图展示示例

haojianlong 4 年之前
父节点
当前提交
eab06716f5

+ 53 - 0
docs/.vuepress/components/example/web/graph/MapDemo.vue

@@ -0,0 +1,53 @@
+<template>
+    <div>
+        <el-button @click="showMap(1)">查看地图1</el-button>
+        <el-button @click="showMap(2)">查看地图2</el-button>
+        <canvas id="mapDemo" width="740" height="400" tabindex="0"></canvas>
+    </div>
+</template>
+
+<script>
+    import { SGraphScene, SGraphView } from "@saga-web/graph/lib";
+    import { SFloorParser } from "@saga-web/big/lib";
+    export default {
+        name: "mapDemo",
+        data(){
+            return{
+                view:null,
+                scene:null,
+                map1: require('../../../../public/assets/map/1.json'),
+                map2: require('../../../../public/assets/map/2.json'),
+            }
+        },
+        mounted(){
+            this.view = new SGraphView("mapDemo");
+            this.init()
+        },
+        methods:{
+            init(){
+                this.showMap(1);
+            },
+            showMap(id){
+                this.scene = new SGraphScene();
+                this.view.scene = this.scene;
+                let parser = new SFloorParser();
+                parser.parseData(this[`map${id}`].EntityList[0].Elements);
+                parser.spaceList.forEach(t => this.scene.addItem(t));
+                parser.wallList.forEach(t => this.scene.addItem(t));
+                parser.virtualWallList.forEach(t => this.scene.addItem(t));
+                parser.doorList.forEach(t => this.scene.addItem(t));
+                parser.columnList.forEach(t => this.scene.addItem(t));
+                parser.casementList.forEach(t => this.scene.addItem(t));
+                this.view.fitSceneToView();
+            }
+        }
+    }
+</script>
+
+
+<style scoped>
+    canvas{
+        border: 1px solid #eeeeee;
+        outline: none;
+    }
+</style>

+ 8 - 11
docs/.vuepress/components/example/web/graph/scene/SImgTextItem.vue

@@ -95,9 +95,11 @@
             });
             this.update();
             this.textItem.text = "x2";
-            this.textItem.moveTo(18, 6);
+            this.textItem.moveTo(18, -6);
             this.moveable = true;
             this.selectable = true;
+            this.textItem.enabled = false;
+            this.img.enabled = false;
         }
 
         onMouseEnter(event: SMouseEvent): boolean {
@@ -119,6 +121,7 @@
          *
          * */
         onMouseDown(event: SMouseEvent): boolean {
+            console.log(this.textItem)
             if (this.status == SItemStatus.Normal) {
                 return super.onMouseDown(event);
             } else if (this.status == SItemStatus.Edit) {
@@ -144,7 +147,6 @@
          * @return  是否处理事件
          * */
         onDoubleClick(event: SMouseEvent): boolean {
-            console.log('doubleclick');
             this.status = SItemStatus.Edit;
             return true;
         } // Function onDoubleClick()
@@ -155,14 +157,10 @@
          * @return  SRect   所有子对象的并集
          * */
         boundingRect(): SRect {
-            let rect :SRect = new SRect();
-            this.children.forEach(t => {
-                if (rect.isNull()) {
-                    rect = t.boundingRect().adjusted(t.pos.x,t.pos.y,0,0);
-                } else {
-                    rect = rect.unioned(t.boundingRect().adjusted(t.pos.x,t.pos.y,0,0));
-                }
-            });
+            let rect = this.img.boundingRect().adjusted(this.img.pos.x,this.img.pos.y,0,0);
+            if (this.showText) {
+                rect = rect.unioned(this.textItem.boundingRect().adjusted(this.textItem.pos.x,this.textItem.pos.y,0,0))
+            }
             return rect;
         } // Function boundingRect()
 
@@ -179,7 +177,6 @@
                 painter.brush.color = SColor.Gray
             }
             painter.drawRect(this.boundingRect());
-            // super.onDraw(painter);
         } // Function onDraw()
     }
 

文件差异内容过多而无法显示
+ 77122 - 0
docs/.vuepress/public/assets/map/1.json


二进制
docs/.vuepress/public/assets/map/1.jsonz


文件差异内容过多而无法显示
+ 30621 - 0
docs/.vuepress/public/assets/map/2.json


二进制
docs/.vuepress/public/assets/map/2.jsonz


+ 10 - 0
docs/dev/saga-graphy/floor-map/mapDemo.md

@@ -0,0 +1,10 @@
+# 可编辑直线示例
+::: details 目录
+[[toc]]
+:::
+
+<example-web-graph-MapDemo/>
+
+::: details 查看代码
+<<< @/docs/.vuepress/components/example/web/graph/mapDemo.vue
+:::

+ 1 - 0
docs/dev/saga-graphy/index.js

@@ -42,6 +42,7 @@ const content = [
             ["/dev/saga-graphy/floor-map/downloadFile", "手工下载楼层底图文件"],
             ["/dev/saga-graphy/floor-map/jsonFile", "json数据格式"],
             ["/dev/saga-graphy/floor-map/divide", "划分"],
+            ["/dev/saga-graphy/floor-map/mapDemo", "楼层平面图范例"],
         ]
     },
     {