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
- 小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() // 开始执行
