|
@@ -97,6 +97,8 @@ export default {
|
|
|
},
|
|
|
//是否是点击的图形上的元素
|
|
|
isClickGraphNode: false,
|
|
|
+ //往图形实例上追加的属性名称
|
|
|
+ graphInstanceAppendProName: "_data",
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
@@ -253,36 +255,15 @@ export default {
|
|
|
});
|
|
|
|
|
|
//----------------------------------------绘制文本的矩形背景框
|
|
|
- var graphicsRect = new PIXI.Graphics();
|
|
|
- graphicsRect.lineStyle({ width: 0 });
|
|
|
- let newCordObjRect = _this.convertCoordToLeftOrigina({
|
|
|
- x: _labelObj.absolutePosition.x - textDefaultConfig.padding,
|
|
|
- y: _labelObj.absolutePosition.y - textDefaultConfig.padding,
|
|
|
+ var graphicsRect = _this.resetTextBack({
|
|
|
+ textId: _labelObj.id,
|
|
|
+ type: "new",
|
|
|
+ textOriginalX: _labelObj.absolutePosition.x,
|
|
|
+ textOriginalY: _labelObj.absolutePosition.y,
|
|
|
+ textOriginalWidth: textInstance.width,
|
|
|
+ textOriginalHeight: textInstance.height,
|
|
|
+ backColor: _labelObj.style.backColor,
|
|
|
});
|
|
|
- var newWidth =
|
|
|
- (textInstance.width + 2 * textDefaultConfig.padding) *
|
|
|
- _this.canvasProObj.originalScale;
|
|
|
- var newHeight =
|
|
|
- (textInstance.height + 2 * textDefaultConfig.padding) *
|
|
|
- _this.canvasProObj.originalScale;
|
|
|
- graphicsRect.beginFill(
|
|
|
- "0x" + _labelObj.style.backColor.substring(1)
|
|
|
- );
|
|
|
- graphicsRect.drawRect(
|
|
|
- newCordObjRect.x,
|
|
|
- newCordObjRect.y,
|
|
|
- newWidth,
|
|
|
- newHeight
|
|
|
- );
|
|
|
- graphicsRect.endFill();
|
|
|
- graphicsRect.name = _this.constructorTextBackId(_labelObj.id);
|
|
|
- graphicsRect._data = {
|
|
|
- x: newCordObjRect.x,
|
|
|
- y: newCordObjRect.y,
|
|
|
- width: newWidth,
|
|
|
- height: newHeight,
|
|
|
- };
|
|
|
- // textInstance.zIndex = 1;
|
|
|
pixiApp.stage.addChild(graphicsRect);
|
|
|
pixiApp.stage.addChild(textInstance);
|
|
|
});
|
|
@@ -645,6 +626,7 @@ export default {
|
|
|
var dataObj = dataArr.filter((_data) => {
|
|
|
return _data.id == dataId;
|
|
|
})[0];
|
|
|
+
|
|
|
this.$emit("click", dataObj, type);
|
|
|
},
|
|
|
//图形缩放比例递进计算
|
|
@@ -674,8 +656,8 @@ export default {
|
|
|
/**
|
|
|
* 更新graphInfo中的数据
|
|
|
* dataType 1 设备; 2 线; 3 文本
|
|
|
- * operType 1 移除设备节点; 2 更新文本字体大小; 3 更新文本颜色; 4 更新文本背景色; 5 移除文本节点 6 修改文本位置; 7 修改文本内容; 8删除线
|
|
|
- * exprObj 扩展数据,支持:{id:'数据id',fontSize:'字体大小',fontColor:'文本颜色',fontBackColor:'文本背景色',text:{xChange:1 新的绝对坐标减去旧的绝对坐标得出的值 ,yChange:1 新的绝对坐标减去旧的绝对坐标得出的值,content:'文本内容'}}
|
|
|
+ * operType 1 移除设备节点; 2 更新文本字体大小; 3 更新文本颜色; 4 更新文本背景色; 5 移除文本节点 6 修改文本位置; 7 修改文本内容; 8删除线; 9 修改文本加粗
|
|
|
+ * exprObj 扩展数据,支持:{id:'数据id',fontSize:'字体大小',fontColor:'文本颜色',fontBackColor:'文本背景色',text:{xChange:1 新的绝对坐标减去旧的绝对坐标得出的值 ,yChange:1 新的绝对坐标减去旧的绝对坐标得出的值,content:'文本内容',fontWeight:0}}
|
|
|
*/
|
|
|
updateDataAndGraph: function (dataType, operType, exprObj) {
|
|
|
var dataArr =
|
|
@@ -702,6 +684,11 @@ export default {
|
|
|
_dataObj.style.fontSize = exprObj.fontSize;
|
|
|
_stageStyle.fontSize = exprObj.fontSize;
|
|
|
stageChild.style = _stageStyle;
|
|
|
+ this.resetTextBack({
|
|
|
+ textId: exprObj.id,
|
|
|
+ textOriginalWidth: stageChild.width,
|
|
|
+ textOriginalHeight: stageChild.height,
|
|
|
+ });
|
|
|
break;
|
|
|
case 3:
|
|
|
_dataObj.style.fontColor = exprObj.fontColor;
|
|
@@ -709,23 +696,10 @@ export default {
|
|
|
stageChild.style = _stageStyle;
|
|
|
break;
|
|
|
case 4:
|
|
|
- let rectId = this.constructorTextBackId(exprObj.id);
|
|
|
- let stageRectChild = this.pixiApp.stage.getChildByName(rectId);
|
|
|
- // stageChild.fill.color = "0x000000";
|
|
|
- let _cachData = stageRectChild._data;
|
|
|
- stageRectChild.clear();
|
|
|
- stageRectChild.beginFill(
|
|
|
- "0x" + exprObj.fontBackColor.substring(1)
|
|
|
- );
|
|
|
- stageRectChild.drawRect(
|
|
|
- _cachData.x,
|
|
|
- _cachData.y,
|
|
|
- _cachData.width,
|
|
|
- _cachData.height
|
|
|
- );
|
|
|
- stageRectChild.endFill();
|
|
|
-
|
|
|
- _dataObj.style.backColor = exprObj.fontBackColor;
|
|
|
+ this.resetTextBack({
|
|
|
+ textId: exprObj.id,
|
|
|
+ backColor: exprObj.fontBackColor,
|
|
|
+ });
|
|
|
break;
|
|
|
case 6:
|
|
|
let newCordObj = this.convertCoordToLeftOrigina({
|
|
@@ -733,12 +707,30 @@ export default {
|
|
|
y: _dataObj.absolutePosition.y,
|
|
|
});
|
|
|
stageChild.position.set(newCordObj.x, newCordObj.y);
|
|
|
+ this.resetTextBack({
|
|
|
+ textId: exprObj.id,
|
|
|
+ textOriginalX: _dataObj.absolutePosition.x,
|
|
|
+ textOriginalY: _dataObj.absolutePosition.y,
|
|
|
+ });
|
|
|
break;
|
|
|
case 7:
|
|
|
stageChild.text = exprObj.text.content;
|
|
|
+ this.resetTextBack({
|
|
|
+ textId: exprObj.id,
|
|
|
+ textOriginalWidth: stageChild.width,
|
|
|
+ textOriginalHeight: stageChild.height,
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ case 9:
|
|
|
+ _stageStyle.fontWeight = exprObj.fontWeight;
|
|
|
+ stageChild.style = _stageStyle;
|
|
|
+ this.resetTextBack({
|
|
|
+ textId: exprObj.id,
|
|
|
+ textOriginalWidth: stageChild.width,
|
|
|
+ textOriginalHeight: stageChild.height,
|
|
|
+ });
|
|
|
break;
|
|
|
}
|
|
|
-
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
@@ -749,6 +741,79 @@ export default {
|
|
|
constructorTextBackId: function (textId) {
|
|
|
return "textback_" + textId;
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 重置或新增文本背景
|
|
|
+ * _paramObj:{type:'new | update',textId:'文本ID',textOriginalWidth:0,textOriginalHeight:0,backColor:'#000000',textOriginalX:1 原始坐标,textOriginalY:1 原始坐标}
|
|
|
+ */
|
|
|
+ resetTextBack: function (_paramObj) {
|
|
|
+ let rectId = this.constructorTextBackId(_paramObj.textId);
|
|
|
+ let stageRectChild =
|
|
|
+ _paramObj.type == "new"
|
|
|
+ ? new PIXI.Graphics()
|
|
|
+ : this.pixiApp.stage.getChildByName(rectId);
|
|
|
+ let _cachData = stageRectChild[this.graphInstanceAppendProName];
|
|
|
+
|
|
|
+ _paramObj.backColor = _paramObj.backColor || _cachData.backColor;
|
|
|
+ _paramObj.textOriginalX =
|
|
|
+ _paramObj.textOriginalX || _cachData.textOriginalX;
|
|
|
+ _paramObj.textOriginalY =
|
|
|
+ _paramObj.textOriginalY || _cachData.textOriginalY;
|
|
|
+ _paramObj.textOriginalWidth =
|
|
|
+ _paramObj.textOriginalWidth || _cachData.textOriginalWidth;
|
|
|
+ _paramObj.textOriginalHeight =
|
|
|
+ _paramObj.textOriginalHeight || _cachData.textOriginalHeight;
|
|
|
+
|
|
|
+ let newCordObjRect = this.computeTextBackPosition({
|
|
|
+ textOriginalX: _paramObj.textOriginalX,
|
|
|
+ textOriginalY: _paramObj.textOriginalY,
|
|
|
+ });
|
|
|
+
|
|
|
+ let rectSize = this.computeTextBackSize({
|
|
|
+ textOriginalWidth: _paramObj.textOriginalWidth,
|
|
|
+ textOriginalHeight: _paramObj.textOriginalHeight,
|
|
|
+ });
|
|
|
+
|
|
|
+ stageRectChild.clear();
|
|
|
+ stageRectChild.beginFill("0x" + _paramObj.backColor.substring(1));
|
|
|
+
|
|
|
+ stageRectChild.drawRect(
|
|
|
+ newCordObjRect.x,
|
|
|
+ newCordObjRect.y,
|
|
|
+ rectSize.width,
|
|
|
+ rectSize.height
|
|
|
+ );
|
|
|
+ stageRectChild.endFill();
|
|
|
+ stageRectChild.name = rectId;
|
|
|
+ stageRectChild[this.graphInstanceAppendProName] = _paramObj;
|
|
|
+
|
|
|
+ return stageRectChild;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 根据文本的宽、高计算文本背景的宽高
|
|
|
+ * _paramObj:{textOriginalWidth:文本原始宽,textOriginalHeight:文本原始高}
|
|
|
+ */
|
|
|
+ computeTextBackSize: function (_paramObj) {
|
|
|
+ let textDefaultConfig = window.__systemConf.systemGraph.peiDian.text;
|
|
|
+ var newWidth =
|
|
|
+ (_paramObj.textOriginalWidth + 2 * textDefaultConfig.padding) *
|
|
|
+ this.canvasProObj.originalScale;
|
|
|
+ var newHeight =
|
|
|
+ (_paramObj.textOriginalHeight + 2 * textDefaultConfig.padding) *
|
|
|
+ this.canvasProObj.originalScale;
|
|
|
+ return { width: newWidth, height: newHeight };
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 根据文本的坐标计算文本背景的坐标
|
|
|
+ * _paramObj:{textOriginalX:文本原始x坐标,textOriginalY:文本原始y坐标}
|
|
|
+ */
|
|
|
+ computeTextBackPosition: function (_paramObj) {
|
|
|
+ let textDefaultConfig = window.__systemConf.systemGraph.peiDian.text;
|
|
|
+ let newCordObjRect = this.convertCoordToLeftOrigina({
|
|
|
+ x: _paramObj.textOriginalX - textDefaultConfig.padding,
|
|
|
+ y: _paramObj.textOriginalY - textDefaultConfig.padding,
|
|
|
+ });
|
|
|
+ return { x: newCordObjRect.x, y: newCordObjRect.y };
|
|
|
+ },
|
|
|
},
|
|
|
created() {},
|
|
|
|