Browse Source

修改系统图线的点击事件的判断逻辑

niuheng 2 years ago
parent
commit
6115ee3aa6
1 changed files with 91 additions and 13 deletions
  1. 91 13
      src/components/systemGraph/graph.vue

+ 91 - 13
src/components/systemGraph/graph.vue

@@ -99,6 +99,8 @@ export default {
       isClickGraphNode: false,
       //往图形实例上追加的属性名称
       graphInstanceAppendProName: "_data",
+      //存放线的实例名称,即ID的数组
+      lineInstanceNameArr: [],
     };
   },
   computed: {},
@@ -154,6 +156,15 @@ export default {
             _this.isClickGraphNode = false;
             return;
           }
+          //判断点击的是否是线
+          var lineInstance = _this.isPointInLine({
+            x: event.layerX,
+            y: event.layerY,
+          });
+          //是点击的线时
+          if (lineInstance) {
+            return _this.clickEventCall({ target: lineInstance }, 2);
+          }
           //关闭右侧详情框
           this.$emit("closeright");
         });
@@ -272,7 +283,13 @@ export default {
       _this.lineArr.forEach((_cLine, _index) => {
         var lineColor = "0x" + _cLine.style.lineColor.substring(1);
         var lineInstance = new PIXI.Graphics();
-        lineInstance.lineStyle(_cLine.style.lineWidth, lineColor, 1, 0, false);
+        lineInstance.lineStyle(
+          _cLine.style.lineWidth,
+          lineColor,
+          1,
+          0.5,
+          false
+        );
         lineInstance.name = _cLine.id;
 
         var _movePath = _cLine.path[0];
@@ -297,14 +314,19 @@ export default {
          * 但是对于线,暂时没有找到合适的设置其响应范围的方式,所以暂时取消其点击事件,
          *  改为点击时冒泡到canvas上的方式,判断点击的点是否在线的实例的点的范围内来判断是否是线的点击
          * */
-        //设置点击范围,不然click事件不会触发
-        lineInstance.hitArea = lineInstance.getBounds();
-        //启用事件
-        lineInstance.interactive = true;
-        lineInstance.on("click", (event) => {
-          _this.isClickGraphNode = true;
-          _this.clickEventCall(event, 2);
-        });
+        // //设置点击范围,不然click事件不会触发
+        // lineInstance.hitArea = lineInstance.getBounds();
+        // //启用事件
+        // lineInstance.interactive = true;
+        // lineInstance.on("click", (event) => {
+        //   _this.isClickGraphNode = true;
+        //   _this.clickEventCall(event, 2);
+        // });
+        _this.lineInstanceNameArr.push(_cLine.id);
+        lineInstance[_this.graphInstanceAppendProName] = {
+          path: _cLine.path,
+          style: _cLine.style,
+        };
         pixiApp.stage.addChild(lineInstance);
       });
     },
@@ -602,22 +624,78 @@ export default {
      * _obj:{x:1,y:1}
      */
     convertCoordToLeftOrigina: function (_obj) {
-      _obj.x =
+      var x =
         (_obj.x + this.canvasProObj.xJiaValue) *
         this.canvasProObj.originalScale;
-      _obj.y =
+      var y =
         (_obj.y + this.canvasProObj.yJiaValue) *
         this.canvasProObj.originalScale;
 
-      return _obj;
+      return { x, y };
     },
+    /**
+     * 判断某一个点是否在指定的线上,因为设计的线是横平竖直的,所以只考虑这种情况
+     * point:{x:1,y:1}
+     */
+    isPointInLine: function (point) {
+      for (let i = 0; i < this.lineInstanceNameArr.length; i++) {
+        let currLineInstance = this.pixiApp.stage.getChildByName(
+          this.lineInstanceNameArr[i]
+        );
+        let originalData = currLineInstance[this.graphInstanceAppendProName];
+        let pathArr = originalData.path;
+
+        for (let j = 0; j < pathArr.length; j++) {
+          let firstPath = pathArr[j];
+          let _firstNewPath = this.convertCoordToLeftOrigina(firstPath);
+          if (_firstNewPath.x == point.x && _firstNewPath.y == point.y)
+            return currLineInstance;
+          let secondPath = pathArr[j + 1];
+          if (!secondPath) break;
+          let _secondNewPath = this.convertCoordToLeftOrigina(secondPath);
+          if (_secondNewPath.x == point.x && _secondNewPath.y == point.y)
+            return currLineInstance;
+          let minX = Math.min(_firstNewPath.x, _secondNewPath.x);
+          let maxX = Math.max(_firstNewPath.x, _secondNewPath.x);
+          let minY = Math.min(_firstNewPath.y, _secondNewPath.y);
+          let maxY = Math.max(_firstNewPath.y, _secondNewPath.y);
+          let partWidth = originalData.style.lineWidth / 2;
+          //因为画线时,alignment传的是0.5 即居中:画线的坐标点加减线宽的一半为线上下边的坐标
+          //横线
+          if (_firstNewPath.y == _secondNewPath.y) {
+            minY = _firstNewPath.y - partWidth;
+            maxY = _firstNewPath.y + partWidth;
+            if (
+              point.x > minX &&
+              point.x < maxX &&
+              point.y >= minY &&
+              point.y <= maxY
+            )
+              return currLineInstance;
+          }
 
+          //竖线
+          if (_firstNewPath.x == _secondNewPath.x) {
+            minX = _firstNewPath.x - partWidth;
+            maxX = _firstNewPath.x + partWidth;
+            if (
+              point.x >= minX &&
+              point.x <= maxX &&
+              point.y > minY &&
+              point.y < maxY
+            )
+              return currLineInstance;
+          }
+        }
+      }
+      return null;
+    },
     /**
      * 设备、线、文本点击事件的回调
      * type 1 设备;  2 线;  3 文本
      */
     clickEventCall: function (event, type) {
-      event.stopPropagation();
+      // event.stopPropagation();
       var graphInstance = event.target || event.currentTarget;
       var dataId = graphInstance.name;
       var dataArr =