Browse Source

modify canvas

haojianlong 5 years ago
parent
commit
8180a284bb

+ 1 - 1
src/assets/graphy/SGraphy/dataType.ts

@@ -72,7 +72,7 @@ interface ImgItemInterface {
     height: number;
     img: string;
     id?: string;
-    name: string;
+    name?: string;
 }
 
 export { dataItemPath, dataItem, dataSpaceItem, dataInterface, businessDataInterface, PolygonItemInterface, ImgItemInterface }

+ 6 - 26
src/assets/graphy/SGraphy/mainScene.js

@@ -194,7 +194,7 @@ var mainScene = /** @class */ (function (_super) {
         var _this_1 = this;
         if (imageList && imageList.length) {
             imageList.map(function (t) {
-                _this_1.addItem(new SGraphyImgItem(null, t.img, t.X, t.Y, t.width, t.height));
+                _this_1.addItem(new SGraphyImgItem(null, t.img, t.X, t.Y, t.width, t.height, t.id, t.name));
             });
         }
     };
@@ -206,35 +206,15 @@ var mainScene = /** @class */ (function (_super) {
     };
     // 鼠标交互类事件
     // 点击
-    mainScene.prototype.click = function (_this, fn) {
-        this.root.children.forEach(function (item) {
-            item.connect("click", _this, fn);
-        });
-    };
+    mainScene.prototype.click = function (_this, fn) { };
     // 双击
-    mainScene.prototype.dbclick = function (_this, fn) {
-        this.root.children.forEach(function (item) {
-            item.connect("doubleClick", _this, fn);
-        });
-    };
+    mainScene.prototype.dbclick = function (_this, fn) { };
     // 按下
-    mainScene.prototype.mouseDown = function (_this, fn) {
-        this.root.children.forEach(function (item) {
-            item.connect("mouseDown", _this, fn);
-        });
-    };
+    mainScene.prototype.mouseDown = function (_this, fn) { };
     //移动
-    mainScene.prototype.mouseMove = function (_this, fn) {
-        this.root.children.forEach(function (item) {
-            item.connect("mouseMove", _this, fn);
-        });
-    };
+    mainScene.prototype.mouseMove = function (_this, fn) { };
     // 点解结束
-    mainScene.prototype.mouseUp = function (_this, fn) {
-        this.root.children.forEach(function (item) {
-            item.connect("mouseUp", _this, fn);
-        });
-    };
+    mainScene.prototype.mouseUp = function (_this, fn) { };
     return mainScene;
 }(SGraphyScene));
 export default mainScene;

+ 6 - 26
src/assets/graphy/SGraphy/mainScene.ts

@@ -182,7 +182,7 @@ export default class mainScene extends SGraphyScene {
     addImageList(imageList: ImgItemInterface[]): void {
         if (imageList && imageList.length) {
             imageList.map(t => {
-                this.addItem(new SGraphyImgItem(null, t.img, t.X, t.Y, t.width, t.height))
+                this.addItem(new SGraphyImgItem(null, t.img, t.X, t.Y, t.width, t.height, t.id, t.name))
             })
         }
     }
@@ -195,34 +195,14 @@ export default class mainScene extends SGraphyScene {
     // 鼠标交互类事件
 
     // 点击
-    click(_this: any, fn: any): void {
-        this.root.children.forEach(item => {
-            item.connect("click", _this, fn);
-        });
-    }
+    click(_this: any, fn: any): void { }
     // 双击
-    dbclick(_this: any, fn: any): void {
-        this.root.children.forEach(item => {
-            item.connect("doubleClick", _this, fn);
-        });
-    }
+    dbclick(_this: any, fn: any): void { }
     // 按下
-    mouseDown(_this: any, fn: any) {
-        this.root.children.forEach(item => {
-            item.connect("mouseDown", _this, fn);
-        });
-    }
+    mouseDown(_this: any, fn: any) { }
     //移动
-    mouseMove(_this: any, fn: any) {
-        this.root.children.forEach(item => {
-            item.connect("mouseMove", _this, fn);
-        });
-    }
+    mouseMove(_this: any, fn: any) { }
     // 点解结束
-    mouseUp(_this: any, fn: any) {
-        this.root.children.forEach(item => {
-            item.connect("mouseUp", _this, fn);
-        });
-    }
+    mouseUp(_this: any, fn: any) { }
 
 } 

+ 3 - 7
src/assets/graphy/SGraphy/newItems/SGraphyImgItem.js

@@ -25,17 +25,13 @@ var SGraphyImgItem = /** @class */ (function (_super) {
      * @param width        		图片宽度
      * @param height   				图片高度
      * @param imgSource     	图片源
-     * @param X        				图片向x轴的偏移量
-     * @param Y        				图片向y轴的偏移量
      * @param parent   				指向父元素
      */
-    function SGraphyImgItem(parent, imgSource, X, Y, width, height) {
+    function SGraphyImgItem(parent, imgSource, width, height) {
         var _this = _super.call(this, parent) || this;
         _this.width = 0;
         _this.height = 0;
         _this.imgSource = imgSource;
-        _this.X = X;
-        _this.Y = Y;
         _this.width = width;
         _this.height = height;
         _this.img = new Image();
@@ -48,7 +44,7 @@ var SGraphyImgItem = /** @class */ (function (_super) {
      * @return SRect
      */
     SGraphyImgItem.prototype.boundingRect = function () {
-        return new SRect(this.X, this.Y, this.width, this.height);
+        return new SRect(0, 0, this.width, this.height);
     }; // Function boundingRect()
     // contains(x: number, y: number): boolean {
     // 	return this.boundingRect().contains(x - this.X, y - this.Y);
@@ -104,7 +100,7 @@ var SGraphyImgItem = /** @class */ (function (_super) {
      * @param   rect          绘制区域
      */
     SGraphyImgItem.prototype.onDraw = function (painter, rect) {
-        painter.drawImage(this.img, this.X, this.Y, this.width, this.height);
+        painter.drawImage(this.img, 0, 0, this.width, this.height);
     };
     return SGraphyImgItem;
 }(SGraphyItem)); // Class SGraphyImgItem

+ 4 - 13
src/assets/graphy/SGraphy/newItems/SGraphyImgItem.ts

@@ -8,34 +8,25 @@ import { SPen, SPainter, SColor } from "@sybotan-web/draw";
  */
 export class SGraphyImgItem extends SGraphyItem {
 	imgSource: string; //可以为url,base64
-	X: number;
-	Y: number;
 	width: number = 0;
 	height: number = 0;
 	img: CanvasImageSource
-
 	/**
 	 * 构造函数
 	 * 
 	 * @param width        		图片宽度
 	 * @param height   				图片高度
 	 * @param imgSource     	图片源
-	 * @param X        				图片向x轴的偏移量
-	 * @param Y        				图片向y轴的偏移量
 	 * @param parent   				指向父元素
 	 */
 	constructor(
 		parent: SGraphyItem | null,
 		imgSource: string,
-		X: number,
-		Y: number,
 		width: number,
-		height: number,
+		height: number
 	) {
 		super(parent);
 		this.imgSource = imgSource;
-		this.X = X;
-		this.Y = Y;
 		this.width = width;
 		this.height = height;
 		this.img = new Image();
@@ -49,8 +40,8 @@ export class SGraphyImgItem extends SGraphyItem {
 	 */
 	boundingRect(): SRect {
 		return new SRect(
-			this.X,
-			this.Y,
+			0,
+			0,
 			this.width,
 			this.height
 		);
@@ -111,6 +102,6 @@ export class SGraphyImgItem extends SGraphyItem {
 	 * @param   rect          绘制区域
 	 */
 	onDraw(painter: SPainter, rect?: SRect): void {
-		painter.drawImage(this.img, this.X, this.Y, this.width, this.height);
+		painter.drawImage(this.img, 0, 0, this.width, this.height);
 	}
 } // Class SGraphyImgItem

+ 45 - 69
src/views/data_admin/buildGraphy/graphyCanvas-copy.vue

@@ -13,9 +13,9 @@
       <el-button size="small" @click="bigSize" type="primary">+ 放大</el-button>
     </div>
     <div v-show="menuShow" id="menu" ref="menu">
-      <p v-if="pointShow" @click="getDatails">编辑该标签</p>
-      <p v-if="pointShow" @click="clearXY">清除该点位的坐标</p>
-      <p v-if="pointShow" @click="noLocate">修改为无法定位到楼层的点位</p>
+      <p @click="getDatails">编辑该标签</p>
+      <p @click="clearXY">清除该点位的坐标</p>
+      <p @click="noLocate">修改为无法定位到楼层的点位</p>
     </div>
   </div>
 </template>
@@ -23,13 +23,15 @@
 <script>
 import axios from "axios";
 //引擎的引用
-import { mainScene } from "@/assets/graphy";
+import { SGraphyImgItem } from '@/assets/graphy/SGraphy/newItems/SGraphyImgItem.js'
+import SGraphyPolygonItem from '@/assets/graphy/SGraphy/newItems/SGraphyPolygonItem.js'
 import { SGraphyView } from "@sybotan-web/graphy";
 import { mapGetters, mapActions } from "vuex";
 import { SPoint } from '@sybotan-web/base/lib';
 import { SPen, SPainter, SColor } from "@sybotan-web/draw";
 import pako from '@/assets/pako/pako'
 import tools from "@/utils/scan/tools";
+import { LocationPointScene } from './utils/LocationPointScene.js'
 import {
   formBIMToPri,
   updateBusiness,
@@ -39,6 +41,9 @@ let colorArr = [
   '#00f5ff0d', '#ffdab90d', '#8470ff0d', '#7fff000d', '#ee5c420d',
   '#ffffe00d', '#eee9e90d', '#9c9c9c0d', '#90ee900d', '#b4cdcd0d'
 ];
+
+
+
 export default {
   props: {
     param: null
@@ -68,7 +73,7 @@ export default {
   mounted() {
     this.resize()
     document.getElementById("canvas").oncontextmenu = (e) => {
-      this.contextMenu(e)
+      e.preventDefault();
     }
   },
   methods: {
@@ -96,10 +101,11 @@ export default {
       this.mainScene = null;
       // 初始化view类
       this.view = new SGraphyView("canvas");
-      this.mainScene = new mainScene(null);
+      console.log(LocationPointScene)
+      this.mainScene = new LocationPointScene(null);
       this.mainScene.urlGetData(url).then(() => {
         this.view.scene = this.mainScene;
-        this.mainScene.addImageList(this.list)
+        this.mainScene.addFlagList(this.list)
         this.view.fitSceneToView();
         this.initGraphy()
       });
@@ -125,16 +131,19 @@ export default {
     },
     //右键菜单的编辑该标签
     getDatails() {
+      this.menuShow = false
       this.$emit("getDetails", { Id: this.point.id });
     },
     //右键的清除该点位的坐标
     clearXY() {
+      this.menuShow = false
       this.point.X = 0
       this.point.Y = 0
       this.updatePoint()
     },
     //右键的修改为无法定位到楼层的点位
     noLocate() {
+      this.menuShow = false
       delete this.point.FloorId
       this.updatePoint()
     },
@@ -149,7 +158,6 @@ export default {
     //实例化视图
     initGraphy(data) {
       this.resetSize();
-      this.mainScene.click(this, this.setNewFlag)
       let items = this.mainScene.root.children;
       items.map((t, i) => {
         this.drawText(t)
@@ -202,50 +210,11 @@ export default {
       this.setFlag = true
     },
     //右键菜单
-    contextMenu(e) {
-      //取消默认的浏览器自带的右键
-      e.preventDefault();
-      //将canvas的坐标转换成数据坐标
-      //设立falg判断是否在标签上
-      let falg = false,
-        index = 0,
-        wallIndex = 0,
-        wallFalg = false;
-      let items = this.view.scene.root.children;
-      for (let i = 0; i < items.length; i++) {
-        if (items[i].type == 1) {
-          if (items[i].contains(point.x, point.y)) {
-            index = i;
-            falg = true;
-          }
-        }
-      }
-      //如果在标签上
-      if (falg || wallFalg) {
-        this.menuShow = true;
-        let el = this.$refs.graphyMain;
-        if (falg) {
-          this.detaleItem = items[index];
-          this.pointShow = true;
-        } else if (wallFalg) {
-          this.detaleLine = items[wallIndex];
-          this.lineShow = true;
-        }
-        if (el.offsetWidth < e.layerX + 200) {
-          this.$refs.menu.style.left = e.layerX - 200 + "px";
-          this.$refs.menu.style.top = e.layerY + "px";
-        } else if (el.offsetHeight < e.layerY + 150) {
-          this.$refs.menu.style.left = e.layerX + "px";
-          this.$refs.menu.style.top = e.layerY - 100 + "px";
-        } else {
-          this.$refs.menu.style.left = e.layerX + "px";
-          this.$refs.menu.style.top = e.layerY + "px";
-        }
-        // this.mainScene.removeItem(items[index]);
-      } else {
-        this.lineShow = this.pointShow = false;
-        this.menuShow = false;
-      }
+    showRightClick(e) {
+      this.menuShow = true
+      let el = this.$refs.graphyMain;
+      this.$refs.menu.style.left = e.screenX - 240 + "px";
+      this.$refs.menu.style.top = e.screenY - 246 + "px";
     },
     //合适比例
     suitableSize() {
@@ -265,32 +234,39 @@ export default {
     },
     //插旗 item - 点击的空间item
     setNewFlag(item, event) {
-      console.log(event)
-      if (this.setFlag) {
-        if (item.businessType=='space') {
-          this.mainScene.addImageList([{
-            img: this.imageUrl,
-            X: event[0].x,
-            Y: event[0].y,
-            width: 5000,
-            height: 5000
-          }])
-          this.view.canvasView.style.cursor = `default`;
+      this.menuShow = false
+      console.log(item)
+      if (item instanceof SGraphyPolygonItem) {
+        if (this.setFlag) {
+          if (item.businessType == 'space') {
+            this.mainScene.addImageList([{
+              img: this.imageUrl,
+              X: event[0].x,
+              Y: event[0].y,
+              width: 5000,
+              height: 5000
+            }])
+            this.view.canvasView.style.cursor = `default`;
 
-          this.point.X = event[0].x
-          this.point.Y = -event[0].y
-          this.updatePoint()
-        } else {
-          this.$message.warning('请在空间内选择')
+            this.point.X = event[0].x
+            this.point.Y = -event[0].y
+            this.updatePoint()
+          } else {
+            this.$message.warning('请在空间内选择')
+          }
         }
+        this.setFlag = false
+      } else if (item instanceof SGraphyImgItem) {
+        this.point = item
+        this.showRightClick(event[0])
       }
-      this.setFlag = false
     },
     //更新位置标签
     updatePoint() {
       let pa = {
         Content: [this.point]
       }
+      console.log(pa)
       updateLocationPoint(pa, res => {
         this.$message.success('修改成功')
       })

+ 2 - 2
src/views/data_admin/buildGraphy/index.vue

@@ -26,8 +26,8 @@
 //接口
 import graphyTree from "./graphyTree";
 import graphyTabs from "./graphyTabs";
-import graphyCanvas from "./graphyCanvas-copy";
-// import graphyCanvas from "./graphyCanvas";
+// import graphyCanvas from "./graphyCanvas-copy";
+import graphyCanvas from "./graphyCanvas";
 import {
   mapGetters,
   mapActions

+ 13 - 1
src/views/data_admin/buildGraphy/lib/formInput.vue

@@ -282,6 +282,7 @@ export default {
     if (typeof (this.typeArr) == Object) {
       this.typeArr = this.toMyNeed(this.typeArr)
     }
+    console.log(this.value)
     if (this.type == 'cascader' || this.type == 'D1') {
       if (this.value == '' || this.value == undefined) {
         this.formLabelAlign.name = []
@@ -295,7 +296,18 @@ export default {
   },
 
   watch: {
-    label() { }
+    label() { },
+    value(n,o) {
+      if (this.type == 'cascader' || this.type == 'D1') {
+        if (n == '' || n == undefined) {
+          this.formLabelAlign.name = []
+        } else {
+          this.formLabelAlign.name = this.getMyVal(n, this.typeArr, 'code');
+        }
+      } else {
+        this.formLabelAlign.name = n;
+      }
+    }
   }
 };
 </script>

+ 59 - 0
src/views/data_admin/buildGraphy/utils/LocationPointScene.js

@@ -0,0 +1,59 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { mainScene } from "@/assets/graphy";
+import { MarkerItem } from './MarkerItem.js';
+/**
+ * 位置标签绘制旗子
+ *
+ * @author haojianlong
+ */
+var LocationPointScene = /** @class */ (function (_super) {
+    __extends(LocationPointScene, _super);
+    /**
+     * 构造函数
+     *
+     * @param data
+     */
+    function LocationPointScene(data) {
+        return _super.call(this, data) || this;
+    }
+    /**
+     * 将旗子添加到列表中
+     *
+     * @param flagList 旗子list
+     */
+    LocationPointScene.prototype.addFlagList = function (flagList) {
+        var _this = this;
+        if (flagList && flagList.length) {
+            flagList.map(function (t) {
+                var flag = new MarkerItem(null, t.id, t.name);
+                flag.moveTo(t.X, t.Y);
+                flag.zOrder = 9999999;
+                flag.connect('click', _this, _this.flagClick);
+                _this.addItem(flag);
+            });
+        }
+    };
+    /**
+     * @param item  点击的旗子item
+     * @param event 点击的事件
+     */
+    LocationPointScene.prototype.flagClick = function (item, event) {
+        console.log(this.data);
+        console.log(arguments);
+        alert(1);
+    };
+    return LocationPointScene;
+}(mainScene));
+export { LocationPointScene };

+ 49 - 0
src/views/data_admin/buildGraphy/utils/LocationPointScene.ts

@@ -0,0 +1,49 @@
+import { mainScene } from "@/assets/graphy";
+import { MarkerItem } from './MarkerItem.js'
+import { SGraphyScene, SMouseEvent } from "@sybotan-web/graphy";
+import { dataItemPath, dataItem, dataSpaceItem, dataInterface, PolygonItemInterface, ImgItemInterface } from '@/assets/graphy/SGraphy/dataType.js'   //传入参数的参数接口类型
+
+/**
+ * 位置标签绘制旗子
+ * 
+ * @author haojianlong
+ */
+export class LocationPointScene extends mainScene {
+  /** 
+   * 构造函数 
+   * 
+   * @param data
+   */
+  constructor(data: dataInterface | null) {
+    super(data)
+  }
+
+  /**
+   * 将旗子添加到列表中
+   * 
+   * @param flagList 旗子list
+   */
+  addFlagList(flagList: ImgItemInterface[]): void {
+    if (flagList && flagList.length) {
+      flagList.map(t => {
+        let flag = new MarkerItem(null, t.id, t.name);
+        flag.moveTo(t.X, t.Y);
+        flag.zOrder = 9999999;
+        flag.connect('click', this, this.flagClick)
+        this.addItem(flag);
+      })
+    }
+  }
+
+  /**
+   * @param item  点击的旗子item
+   * @param event 点击的事件
+   */
+  flagClick(item: MarkerItem, event: SMouseEvent) {
+    console.log(this.data)
+    console.log(arguments)
+    alert(1)
+  }
+
+
+}

File diff suppressed because it is too large
+ 71 - 0
src/views/data_admin/buildGraphy/utils/MarkerItem.js


File diff suppressed because it is too large
+ 74 - 0
src/views/data_admin/buildGraphy/utils/MarkerItem.ts