前言

什么是 GoJs

GoJs 是一个 JavaScript 和 typescript 库，用于构建交互式图表，可以轻易的实现日常开发中所需要的各种示意图、结构图、组织图、流程图、状态图、思维导图、树状图等。

它用自定义模板和布局组件简化了节点、链接和分组等复杂的 JS 图表，给用户交互提供了许多先进的功能，如拖拽、复制、粘贴、文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤销管理、调色板、概述、事件处理程序、命令和自定义操作的扩展工具系统。

无需切换服务器和插件，GoJS 就能实现用户互动并在浏览器中完全运行，呈现 HTML5 Canvas 元素或 SVG，也不用服务器端请求。

安装

npm i gojs -S 

去水印

GoJs 是一个商业软件，所以我们通过 NPM 安装的模块，如果没有支付费用的话，默认会带有水印。

方法仅供学习，请支持正版软件。

我们可以通过修改源码的方式去除水印。

• 首先找到这个文件 node_modules\gojs\release\go.js
• 然后在文件中搜索 7eba17a4ca3b1a8346
• 找到类似于 a.kv=d[w.Jg(“7eba17a4ca3b1a8346”) **][w.Jg(“78a118b7”)]****(d,w.um,4,4) 这样的一句代码
• 将此条语句替换成 a.Jv=function(){return true}; 保存即可

最终如果呈现以下效果，则说明去除水印成功。

使用

GoJS 不依赖于任何 JS 库或框架（例如 bootstrap、jquery 等），可与任何 HTML 或 JS 框架配合工作。本文基于 vue2.x 作为基础前端框架。

初始化

GoJs 需要提供一个节点作为容器，并且图形的容器 div 需要明确指定大小（支持固定值以及百分比），否则无法显示，容器支持部分 CSS 样式，比如背景颜色，边框等，这个容器可以理解为画布。

<template>
  <!-- 图形的容器 div 需要明确指定大小，否则无法显示 -->
  <div id="diagram" style="width:50%; height:50%; background-color: #DAE4E4;"></div>
</template> 

因为全局都会用到 go.GraphObject.make 这个方法，所以我们在导入以后直接声明一个全局变量，这个变量可以理解为画笔。

import go from 'gojs'
// 获取 gojs 的方法
const $ = go.GraphObject.make; 

接下来进行 GoJs 的初始化部分。这个是官网的例子，先不用知道每一行代码的作用，我们先把程序跑起来，页面画出来。

// 初始化gojs
initGoJs() {
  // 将 gojs 挂载到 div 上 ,canvas 的大小由 div 的宽高决定
  this.diagram =
    $(go.Diagram, "diagram",
      {
        "undoManager.isEnabled": true
      });

  const myModel = $(go.Model);
  myModel.nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" },
    { key: "Gamma" }
  ];
  this.diagram.model = myModel;
} 

以上简单的代码呈现出下面的结果。

其可以实现的功能如下

• 点击空白并按住鼠标左键，可以通过平移整个图表
• 点击节点可以选中某个节点，选中的节点高亮显示
• 使用 Ctrl+A 可以选中所有元素
• 按住 ctrl 键，点击鼠标左键可以选择多个元素
• 选中节点并按住鼠标左键，可以移动特定节点
• 点击空白并按住鼠标左键，点击后等 1s 再滑动鼠标，可以画出一个选择框，选中多个节点
• 选中节点后，使用 ctrl+c，ctrl+v 的方式可以复制节点
• 选中节点后，使用 delete 按钮可以删除节点
• 按住 ctrl 键，滑动鼠标滚轮（或者 + - 号）可以进行整个图表的缩放，ctrl + 0 恢复初始大小
• 使用 ctrl+z，ctrl+y 可以进行撤回和重做操作（由代码中的 "undoManager.isEnabled": true 控制）

可以看到，当前代码量只有几行，在一个代码量比较少的情况可以完成这么多功能，可以看出 GoJs 本身已经将大部分交互的动作内置到框架本身，只需要通过设置相应的属性即可完成。