gojs(一)

原创

韩志伟 2022-04-22 11:16:27 ©著作权

©著作权归作者所有：来自51CTO博客作者韩志伟的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

什么是 GoJs

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

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

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

安装

npm i gojs -S

去水印

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

gojs(一)_自定义

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

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

首先找到这个文件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(一)_初始化_02

使用

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;
}

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

gojs(一)_自定义_03