|
@@ -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>
|