瀏覽代碼

修改图展示

haojianlong 4 年之前
父節點
當前提交
9e08c5696c
共有 5 個文件被更改,包括 166 次插入12 次删除
  1. 3 0
      src/App.vue
  2. 47 9
      src/components/baseEditer.vue
  3. 5 1
      src/components/edit/left_toolbar.vue
  4. 103 0
      src/lib/FloorView.ts
  5. 8 2
      src/views/editer.vue

+ 3 - 0
src/App.vue

@@ -19,4 +19,7 @@ body {
   width: 100%;
   height: 100%
 }
+canvas:focus{
+  outline: none;
+}
 </style>

+ 47 - 9
src/components/baseEditer.vue

@@ -1,16 +1,16 @@
 <template>
   <div id="baseEditer">
-    <a-button type="primary" @click="init" style="position:absolute">Primary</a-button>
     <div id="fengMap"></div>
     <div class="canvas-container" ref="graphy">
-      <canvas id="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
+      <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 { SFloorParser, SImageItem } from "@saga-web/big";
 import { SGraphyView, SGraphyScene } from "@saga-web/graphy/lib";
+import { FloorView } from "@/lib/FloorView"
 export default {
   data() {
     return {
@@ -26,11 +26,11 @@ export default {
   },
   mounted() {
     this.canvasWidth = this.$refs.graphy.offsetWidth;
-    console.log(this.$refs.graphy.offsetWidth);
     this.canvasHeight = this.$refs.graphy.offsetHeight;
   },
   methods: {
     init() {
+      document.getElementById(`canvas`).focus()
       this.clearGraphy();
       this.scene = new SGraphyScene();
       this.fmap = new SFengParser(
@@ -42,11 +42,12 @@ export default {
       );
       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.spaceList.forEach(t => {
+          t.connect('click', this, this.spaceClick)
+          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));
@@ -61,9 +62,46 @@ export default {
         this.view.scene = null;
         return;
       }
-      this.view = new SGraphyView("canvas");
+      this.view = new FloorView("canvas");
+      document.getElementById('canvas').focus()
     },
-    changeFloor() {}
+    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>

+ 5 - 1
src/components/edit/left_toolbar.vue

@@ -6,6 +6,7 @@
         v-on:mouseover="mouseoverActive(item)"
         v-for="(item,i) in baseChoice"
         :key="i"
+        @click="toolActionClick(item)"
       >
         <div class="item">
           <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
@@ -107,7 +108,10 @@ export default {
     },
     mouseoutActive(item) {
       item.isHover = false;
-    }
+    },
+    toolActionClick(item) {
+      this.$emit('toolActionClick',item.name);
+     }
   }
 };
 </script>

+ 103 - 0
src/lib/FloorView.ts

@@ -0,0 +1,103 @@
+import { SGraphyItem, SGraphyView } from "@saga-web/graphy/lib";
+import { SMouseButton, SMouseEvent, SNetUtil } from "@saga-web/base/lib";
+import { SPoint } from "@saga-web/draw/lib";
+
+/**
+ * 楼层场景
+ *
+ * @author  郝建龙
+ */
+export class FloorView extends SGraphyView {
+    /** 鼠标左键键按下时位置 */
+    private _leftKeyPos = new SPoint();
+    /** 空格是否被按下 */
+    private spaceKey: boolean = false;
+
+    /**
+     * 保存底图json
+     *
+     * @param   name    文件名
+     */
+    saveFloorJson(name: string): void {
+        // @ts-ignore
+        if (!this.scene || !this.scene.json) return;
+        // @ts-ignore
+        let url = URL.createObjectURL(new Blob([this.scene.json]));
+        SNetUtil.downLoad(name, url);
+    } // Function saveSceneSvg()
+
+    /**
+     * 按键按下事件
+     *
+     * @param   event       事件参数
+     */
+    protected onKeyDown(event: KeyboardEvent): void {
+        let keyCode = event.keyCode;
+        this.spaceKey = false;
+        switch (keyCode) {
+            case 32:
+                this.spaceKey = true;
+                break;
+            case 87:
+                this.origin.y -= 10;
+                break;
+            case 83:
+                this.origin.y += 10;
+                break;
+            case 68:
+                this.origin.x += 10;
+                break;
+            case 65:
+                this.origin.x -= 10;
+                break;
+            default:
+                super.onKeyDown(event);
+                break;
+        }
+    } // Function onKeyDown()
+
+    /**
+     * 按键松开事件
+     *
+     * @param   event       事件参数
+     */
+    protected onKeyUp(event: KeyboardEvent): void {
+        this.spaceKey = false;
+        super.onKeyUp(event);
+    } // Function onKeyUp()
+
+    /**
+     * 鼠标按下事件
+     *
+     * @param   event       事件参数
+     */
+    protected onMouseDown(event: MouseEvent): void {
+        console.log(event)
+        let se = new SMouseEvent(event);
+        if (se.buttons & SMouseButton.LeftButton) {
+            this._leftKeyPos.x = se.x;
+            this._leftKeyPos.y = se.y;
+        }
+        super.onMouseDown(event);
+    } // Function onMouseDown()
+
+    /**
+     * 鼠标移动事件
+     *
+     * @param   event       事件参数
+     */
+    protected onMouseMove(event: MouseEvent): void {
+        // 按左键移动
+        let se = new SMouseEvent(event);
+        if (se.buttons & SMouseButton.LeftButton) {
+            if (this.spaceKey) {
+                this.origin.x += se.x - this._leftKeyPos.x;
+                this.origin.y += se.y - this._leftKeyPos.y;
+            }
+            this._leftKeyPos.x = se.x;
+            this._leftKeyPos.y = se.y;
+            this.update();
+        }
+        super.onMouseMove(event);
+    } // Function onMouseMove()
+} // Class FloorScene

+ 8 - 2
src/views/editer.vue

@@ -7,11 +7,11 @@
     <div class="content">
       <!-- 左侧工具栏 -->
       <div class="left_toolbar">
-        <leftToolbar></leftToolbar>
+        <leftToolbar @toolActionClick="toolActionClick"></leftToolbar>
       </div>
       <!-- 绘制界面 -->
       <div class="baseEdit">
-        <baseEditer></baseEditer>
+        <baseEditer ref="graphy"></baseEditer>
       </div>
       <!-- 右侧工具栏 -->
       <div class="right_toolbar">
@@ -33,6 +33,12 @@ export default {
     leftToolbar,
     topToolbar,
     rightToolbar
+  },
+  methods: {
+    // 左侧工具栏 点击事件
+    toolActionClick(name) {
+      this.$refs.graphy.changeStatus(name)
+    }
   }
 };
 </script>