记录--VUE使用GOJS（操作数据、消除水印、导出图片等）

因为GOJS属于不能免费商用的插件，后改用antv X6来实现流程图效果，使用方法可查看我另一篇记录

GOJS官网

首先引入GOJSnpm install gojs --save
文件中引入import go from "gojs";

关于去除左上角水印网上找的方法基本查找那串数字但是我的版本为"gojs": "^2.1.48"，找遍了没有找到，最后发现一篇文章中的方法完美实现去除水印；

方法是在node_modules\gojs\release\go.js文件中找到String.fromCharCode(a.charCodeAt(g)^b[(b[c]+b[d])%256])这串代码，然后在代码后面return f前面加上if(f.indexOf('GoJS 2.1 evaluation')>-1|| f.indexOf('(c) 1998-2021 Northwoods Software')>-1|| f.indexOf('Not for distribution or production use')>-1|| f.indexOf('gojs.net')>-1){return '';}else{return f};后完美去除水印；

导出图片：

// img生成的是base64
let img = this.myDiagram.makeImageData({
	scale: 1 // 图片比例：为1生成整个图像并截取周围空白
});
// 下载
      if (window.navigator.msSaveOrOpenBlob) {
        var bstr = atob(img.split(",")[1]);
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        var blob = new Blob([u8arr]);
        window.navigator.msSaveOrOpenBlob(blob, "图片.png");
      } else {
        // 这里就按照chrome等新版浏览器来处理
        const a = document.createElement("a");
        a.href = img;
        a.setAttribute("download", "chart-download");
        a.click();
      }

下面是绘制图形（我使用的是state Chart状态图）

数据的增删改查可以参考此篇文章gojs入门笔记

初始化设置以及我所用到的一些方法：

const make = go.GraphObject.make; // 创建原型
let model = { "class": "go.GraphLinksModel",
  "nodeKeyProperty": "id",
  "nodeDataArray": [ // 节点数据
  {"id":-1, "loc":"155 -138", "category":"开始"},
  {"id":0, "loc":"190 15", "text":"Shopping"},
  {"id":1, "loc":"353 32", "text":"Browse Items"},
  {"id":2, "loc":"353 166", "text":"Search Items"},
  {"id":3, "loc":"512 12", "text":"View Item"},
  {"id":4, "loc":"661 17", "text":"View Cart"},
  {"id":5, "loc":"644 171", "text":"Update Cart"},
  {"id":6, "loc":"800 96", "text":"Checkout"},
  {"id":-2, "loc":"757 229", "category":"结束"}
  ],
  "linkDataArray": [ // 连线数据
    { "from": -1, "to": 0, "text": "Visit online store" },
    { "from": 0, "to": 1,  "progress": "true", "text": "Browse" },
    { "from": 0, "to": 2,  "progress": "true", "text": "Use search bar" },
    { "from": 1, "to": 2,  "progress": "true", "text": "Use search bar" },
    { "from": 2, "to": 3,  "progress": "true", "text": "Click item" },
    { "from": 2, "to": 2,  "text": "Another search", "curviness": 20 },
    { "from": 1, "to": 3,  "progress": "true", "text": "Click item" },
    { "from": 3, "to": 0,  "text": "Not interested", "curviness": -100 },
    { "from": 3, "to": 4,  "progress": "true", "text": "Add to cart" },
    { "from": 4, "to": 0,  "text": "More shopping", "curviness": -150 },
    { "from": 4, "to": 5,  "text": "Update needed", "curviness": -50 },
    { "from": 5, "to": 4,  "text": "Update made" },
    { "from": 4, "to": 6,  "progress": "true", "text": "Proceed" },
    { "from": 6, "to": 5,  "text": "Update needed" },
    { "from": 6, "to": -2, "progress": "true", "text": "Purchase made" }
  ]
}
let myDiagram = make(go.Diagram, "绑定画布的ID", {
	"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, // 有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
	"undoManager.isEnabled": false, // 支持 Ctrl-Z 和 Ctrl-Y 操作 （撤回和复原）
	scale: 1.0, // 初始视图大小比例
    minScale: 0.5, // 最小视图的缩小比例
    maxScale: 2, // 最大视图的放大比例
    initialContentAlignment: go.Spot.Center, // 居中显示
    LinkDrawn: showLinkLabel, // 创建新连接
    ExternalObjectsDropped: nodeChange, // Diagram外部拖拽复制到Diagram中
    SelectionDeleted: deleteNodeList,
    "commandHandler.canDeleteSelection": deleteVerification // 判断是否是可删除项
    //   isReadOnly: false, // 只读，无法编辑操作
    //   allowMove: true, // 允许拖动画板
    //   allowDragOut: true, // 允许拖拽节点
    //   allowDelete: true, // 允许删除节点
    //   allowCopy: false, // 允许复制节点
    //   allowClipboard: false, // 允许粘贴节点
    //   scrollMargin: 500, // 默认下拖拽画布的时候边界是已最外的节点为边距，这个就是增加边距的，类似padding设置
    // fixedBounds: , //设置图表边界
    //   "toolManager.hoverDelay": 100, // tooltip提示显示延时
    //   "toolManager.toolTipDuration": 10000, // tooltip持续显示时间
    //   "grid.visible": true, // 显示网格
})
// 节点配置
      this.myDiagram.nodeTemplate = make(
        go.Node,
        "Auto", // 文字位置
        {
          locationSpot: go.Spot.Top,
          isShadowed: true,
          shadowBlur: 10,
          shadowOffset: new go.Point(0, 1),
          shadowColor: "rgba(0, 0, 0, .14)"
        },
        // 设置节点位置
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
          go.Point.stringify
        ),
        // 外部样式
        make(go.Shape, "RoundedRectangle", {
          name: "SHAPE",
          fill: "#ffffff",
          strokeWidth: 0, // 描边宽度
          stroke: null,
          portId: "",
          fromLinkable: true,
          fromLinkableSelfNode: true,
          fromLinkableDuplicates: true,
          toLinkable: true,
          toLinkableSelfNode: true,
          toLinkableDuplicates: true,
          cursor: "pointer"
        }),
        // 字体样式
        make(
          go.TextBlock,
          {
            font: "bold small-caps 11pt helvetica, bold arial, sans-serif",
            margin: 7,
            // width: 150,
            // textAlign: "center",
            stroke: "#000000",
            editable: false // 是否可编辑
          },
          new go.Binding("text").makeTwoWay()
        )
      );
      // 设置开始节点样式
      this.myDiagram.nodeTemplateMap.add(
        "开始",
        make(
          go.Node,
          "Spot",
          {
            desiredSize: new go.Size(75, 75)
          },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
            go.Point.stringify
          ),
          make(go.Shape, "Circle", {
            fill: "#52ce60",
            /* green */
            stroke: null,
            portId: "",
            fromLinkable: true,
            fromLinkableSelfNode: true,
            fromLinkableDuplicates: true,
            toLinkable: true,
            toLinkableSelfNode: true,
            toLinkableDuplicates: true,
            cursor: "pointer"
          }),
          make(go.TextBlock, "开始", {
            font: "bold 16pt helvetica, bold arial, sans-serif",
            stroke: "whitesmoke"
          })
        )
      );
      // 设置结束节点样式
      this.myDiagram.nodeTemplateMap.add(
        "结束",
        make(
          go.Node,
          "Spot",
          {
            desiredSize: new go.Size(75, 75)
          },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
            go.Point.stringify
          ),
          make(go.Shape, "Circle", {
            fill: "maroon",
            stroke: null,
            portId: "",
            fromLinkable: true,
            fromLinkableSelfNode: true,
            fromLinkableDuplicates: true,
            toLinkable: true,
            toLinkableSelfNode: true,
            toLinkableDuplicates: true,
            cursor: "pointer"
          }),
          make(go.Shape, "Circle", {
            fill: null,
            desiredSize: new go.Size(65, 65),
            strokeWidth: 2,
            stroke: "whitesmoke"
          }),
          make(go.TextBlock, "结束", {
            font: "bold 16pt helvetica, bold arial, sans-serif",
            stroke: "whitesmoke"
          })
        )
      );
      // 连接线配置
      this.myDiagram.linkTemplate = make(
        go.Link,
        {
          curve: go.Link.Bezier,
          adjusting: go.Link.Stretch,
          reshapable: true,
          relinkableFrom: true,
          relinkableTo: true,
          toShortLength: 3,
          selectable: true
          // routing: go.Link.AvoidsNodes // 绕行节点
        },
        // 线样式
        make(
          go.Shape,
          {
            strokeWidth: 1.5
          },
          new go.Binding("stroke", "progress", function(progress) {
            return progress == "true" ? "#52ce60" : "maroon";
          }),
          new go.Binding("strokeWidth", "progress", function(progress) {
            return progress == "true" ? 2.5 : 1.5;
          })
        ),
        // 箭头样式
        make(
          go.Shape,
          {
            toArrow: "standard",
            stroke: null
          },
          new go.Binding("fill", "progress", function(progress) {
            return progress == "true" ? "#52ce60" : "maroon";
          })
        ),
        // 显示配置
        make(
          go.Panel,
          "Auto",
          make(
            go.TextBlock,
            {
              textAlign: "center",
              font: "12pt helvetica, arial, sans-serif",
              margin: 7,
              editable: false // 是否可编辑
            },
            new go.Binding("text").makeTwoWay()
          )
        )
      );
this.myDiagram.model = go.Model.fromJson(data);
function showLinkLabel(e){
	console.log(e.subject.data)
}// 监听新增连线
function nodeChange(e){
	e.subject.each(function(p) {
		console.log(p.data)
	}
}// 监听新增节点
function deleteNodeList(e){
	e.subject.each(function(p) {
		console.log(p.data)
	}
}// 监听删除节点
function deleteVerification(e){
return myDiagram.selection.all(nodeOrLink => {
          if (
            nodeOrLink.data.text == "开始" ||
            nodeOrLink.data.text == "结束"
          ) {
            return false;
          } else {
            return true;
          }
        });
}// 判断是否可以删除