Browse Source

系统图编辑工具支持修改文本背景色

niuheng 2 years ago
parent
commit
997c9d7e89
3 changed files with 62 additions and 3 deletions
  1. 2 1
      public/systemConf.js
  2. 1 1
      src/components/systemGraph/edit.vue
  3. 59 1
      src/components/systemGraph/graph.vue

+ 2 - 1
public/systemConf.js

@@ -28,7 +28,8 @@ var __systemConf = {
         size: 16,
         color: '#646C73',
         weight: 600,
-        backGround: '#FFFFFF'
+        backGround: '#ffffff',
+        padding: 4
       },
       line:{
         width: 2,

+ 1 - 1
src/components/systemGraph/edit.vue

@@ -614,7 +614,7 @@ export default {
       //更新图形以及图形数据源
       this.$refs.graphc.updateDataAndGraph(3, 4, {
         id: this.selText.id,
-        fontColor: this.fontBackColor,
+        fontBackColor: this.fontBackColor,
       });
     },
     //文本X轴坐标变化后事件

+ 59 - 1
src/components/systemGraph/graph.vue

@@ -157,6 +157,7 @@ export default {
         });
 
         pixiContainer.appendChild(pixiApp.view);
+        pixiApp.stage.sortableChildren = true;
         _this.pixiApp = pixiApp;
       } else pixiApp = _this.pixiApp;
 
@@ -223,6 +224,7 @@ export default {
       });
 
       //文本
+      let textDefaultConfig = window.__systemConf.systemGraph.peiDian.text;
       _this.labelArr.forEach((_labelObj) => {
         var pixiTextStyle = new PIXI.TextStyle({
           fill: _labelObj.style.fontColor,
@@ -240,6 +242,8 @@ export default {
         });
 
         textInstance.position.set(newCordObj.x, newCordObj.y);
+        //zIndex没用?
+        // textInstance.zIndex = 2000000;
         // console.log(textInstance.width, "-", textInstance.height);
         //启用事件
         textInstance.interactive = true;
@@ -247,6 +251,39 @@ export default {
           _this.isClickGraphNode = true;
           _this.clickEventCall(event, 3);
         });
+
+        //----------------------------------------绘制文本的矩形背景框
+        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 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);
       });
 
@@ -668,11 +705,26 @@ export default {
               break;
             case 3:
               _dataObj.style.fontColor = exprObj.fontColor;
-              _dataObj.style.backColor = exprObj.fontBackColor;
               _stageStyle.fill = exprObj.fontColor;
               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;
               break;
             case 6:
@@ -691,6 +743,12 @@ export default {
         }
       }
     },
+    /**
+     * 构造文本背景项的ID
+     */
+    constructorTextBackId: function (textId) {
+      return "textback_" + textId;
+    },
   },
   created() {},