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