gojs

Gojs项目文档

简介:

Gojs 用canvas 作图,一般用来绘制流程图,关系图,表示节点与节点之间的关系,节点与节点用线条连接;不仅如此,它还封装了动画过渡的api,利用这个特性,我们还可以用它绘制其他方面的界面,不一定就是节点之间连线.

一个最简单的例子:

1.首先安装依赖 npm i gojs --save
2.import * as go from 'gojs';
3.去除水印,可以百度gojs去除水印,或者用以前项目去除过的gojs源码替换掉当现项目中node_modules中的go.js

image.png

4. 小demo

mounted() {
    var $ = go.GraphObject.make;  // 用go.GraphObject.make来创建一个GoJS对象，如果$被占用了，可以使用其他名称

    // 第一步: 创建图表对象，绑定HTML中的DIV，给这个DIV加个id叫myDiagramDiv, 初始化图表风格
    var myDiagram =
      $(go.Diagram, "myDiagramDiv", // 这个名称"myDiagramDiv"必须同HTML中画布DIV的id一致
        {
          initialContentAlignment: go.Spot.Center, // 居中显示内容
          "undoManager.isEnabled": true, // 启用Ctrl-Z撤销和Ctrl-Y重做功能
           // ... 一堆其他关于全局的配置
        });
    
    // 第二步: 定义模板,首先他需要先创建模板,就好比网页先写html骨架,每个元素需要绑定的值
    myDiagram.nodeTemplate =
      $(go.Node, "Horizontal",   // 节点中的内容水平排列
        { background: "#44CCFF" },   // 节点的背景色
        // 定义图片尺寸，边间距，绑定图片地址，如果没指定图片地址则默认显示红色
        $(go.Picture,
          { margin: 10, width: 50, height: 50, background: "red" },
          new go.Binding("source")),      // 节点中的图片地址绑定模型中的"source"属性
        // 定义字体风格，默认显示"空白"字样，绑定文字内容
        $(go.TextBlock, "空白",
          { margin: 12, stroke: "white", font: "bold 16px sans-serif" },
          new go.Binding("text", "name")) // 节点中显示的文字绑定模型中的"name"属性
      );
      
    // 第三步: 指定布局
    var model = $(go.GraphLinksModel);  // 声明模型变量的类型是树形

    // 第四步: 绑定数据到模板上
    model.nodeDataArray =
      [   // 你还可以添加任何需要的其他字段，只需要在Node节点模板里绑定就行
        { key: "1", name: "小花", source: "img/cat1.png" },
        { key: "2", name: "小黄", source: "img/cat2.png" },
        { key: "3", name: "小灰", source: "img/cat3.png" },
        { key: "4", name: "小白", source: "img/cat4.png" },
        { key: "5", name: "小喵", source: "img/cat5.png" },
        { key: "6", name: "小黑", source: "img/cat6.png" },
        { /* 空节点数据 */ }  // 空节点会使用节点模板中定义的默认值，如本例红色图片，"空白"字样
      ];

    // 第五步: 将模型绑定到图表上
    myDiagram.model = model;
  }

常用api:

go.Node // 一个模板只能有一个go.Node,可以看做是树的根节点,比如body一样,然后Node下面有N个小组件,比如
go.Picture加载图片的
go.Panel(面板,用来定位的,或者看做是一个组)
go.Binding('location', 'loc') // 接受nodeDataArray传过来的值,用来跟组件的属性进行绑定,比如Picture肯定有个属性叫src,那么new go.Binding('source'), 他可以接受两个参数,如果nodeDataArray 传过来的键名跟Binding绑定的一样那就传一个就行,如果不一样那就传到第二个参数上做个映射;

image.png

比如这是创建了一个图片组件,第一个参数指定他是图片类型的组件,第二个是一个对象,指定他的一些属性,你可以在这边设置他的默认值,有些是字符串,有些是数值,有些是类似枚举的东西;
第三个或更多的参数,都是绑定数据的部分,如果有跟第二个参数中属性相同的部分会替换成绑定的值;
一般创建组件都是这种结构的参数;

组件常用属性:
itemTemplate: 用来创建N个相同的小组件,比如钢坯,都是长方形的,只是位置,颜色可能不一样;,配合itemArray,数组多长就生成多少个钢坯; 例子：

image.png

首先用了一个panel容器，容器是水平布局，里面的itemTemplate又是一个panel里面就放一个文本组件

image.png

然后在nodeDataArray中的小黑这个节点绑定了itemArray两段文本，效果就如图所示

image.png

当画布渲染完成之后常见的操作：
更新某个元素的状态，比如文本修改，背景色修改等等
要修改某个元素，要先找到这个元素，寻找画布中的某个元素：
首先进入文档找到这个类

image.png
右侧api列表一堆，找到关键的findXXX， 有很多方式去找元素， 我一般是用
let node = myDiagram.findNodeForData(data), 这种寻找
image.png
找到之后使用:myDiagram.model.set(node, '属性', 值) 来更新值,界面也就变化了
但是呢,这个model.set只能更新带拥有的属性,比如图片有source,你可以更新,但是有些是值比如钢坯的status,悬浮后的颜色hoverfill这些自定义的属性
image.png
这些值我不需要给模板绑定,只是给模板传递信息,比如模板中根据status展示不同颜色,或者钢坯绑定hover事件,我告诉他hoverfill,悬浮时是什么颜色

另外myDiagram.findNodeForData只能找go.Node类型的元素,也就是说他找不到模板里面的子元素,子组件;
要想找子元素,比如itemTemplate遍历出来的,比如某个go.Picture,这时候需要另一个方法findObject,
使用这个方法,你必须先找通过findNodeForData找到根元素,然后返回的node.findObject("名字"),这个名字是组件的name属性,任何子组件都可以定义一个name属性,就是为了方便查找~

image.png

使用动画:

任何使用动画的插件都差不多,给定开始结束值,然后过渡时间,延迟多少秒,运动曲线
比如:

      let animation = new go.Animation()   // 定义动画类
      animation.easing = go.Animation.EaseLinear  // 曲线
      animation.finished = () => {}   // 完成后的回调
      animation.add(part, 'position', part.position, newPoint)   // 指定哪个元素做动画,开始位置,结束位置
      animation.duration = 3000 // 过渡时间
      animation.start() // 开始执行

参考文档

https://gojs.net.cn/intro/index.html