JS组件系列之Gojs组件前端图形化插件之利器(js组件是什么)

编辑：rootadmin

推荐整理分享JS组件系列之Gojs组件前端图形化插件之利器(js组件是什么)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:javascript go,javascript go,js表格组件,js组件封装,js组件开发教程,js开发组件,组件中js可以做什么,组件中js可以做什么,内容如对您有帮助，希望把文章链接给更多的朋友！

前言：之前分享过两篇关于流程画图的前端组件，使用的jsPlumb。这个组件本身还不错，使用方便、入门简单、轻量级，但是使用一段时间下来，发现一些弊病，比如组件不太稳定，初始进入页面的时候连线的样式有时会乱掉，刷新页面之后才能恢复正常，而且连线样式比较单一，容易让人产生视觉疲劳，加之最近公司在大力推行所谓的“工业4.0”，除了对自动化控制要求的提高之外，对这种图形化界面的要求也随之提高，所以单纯的jsPlumb组件效果已经不能满足日益发展的公司业务。基于以上种种，最终找到了Gojs组件，它效果强大、api丰富，唯一的不足就是这个组件是一个收费组件，可是在天朝，嘘...这是个不能说的秘密！

本文原创地址： Canvas元素或SVG，也不用服务器端请求。 GoJS不依赖于任何JS库或框架（例如bootstrap、jquery等），可与任何HTML或JS框架配合工作，甚至可以不用框架。

2、使用入门

（1）文件引用

可以用cdn上面的最新版本，也可以引用本地down下来的文件。如果是开发，可以引用debug版本的js，正式运行的时候引用正式的js，这个无需多讲。

（2）创建画布

随便定义一个html元素，作为我们的画布

然后使用gojs的api初始化画布

官方示例用的$符号作为变量，博主觉得$符号太敏感，还是换个名字吧~以上几个参数都是博主摘选的，更多初始化画布的参数请参考官方api下图：

（3）创建模型数据（Model）

接着上面的代码，我们增加如下几行

效果预览

（4）创建节点（Node）

上面有了画布和节点数据，只是有了一个雏形，但是还没有任何的图形化效果。我们加入一些效果试试

在gojs里面给我们提供了几种模型节点的可选项：

Shape:形状——Rectangle（矩形）、RoundedRectangle（圆角矩形），Ellipse（椭圆形），Triangle（三角形），Diamond（菱形），Circle（圆形）等TextBlock:文本域（可编辑）Picture:图片Panel:容器来保存其他Node的集合默认的节点模型代码只是由一个TextBlock组件构建成

我们增加如下一段代码

代码释疑：以上我们给画布对象定义了两种节点模板，一种是文本节点，另一种是形状节点（Node）。在形状节点中，我们定义了数据模型的通用节点样式，就是这一段代码{ /* Shape的参数。宽高颜色等等*/figure: "Club", width: , height: , margin: 4, fill: 'red' },然后通过new go.Binding("figure", "fig")方法将模板里面的属性映射到数据实例中，比如这里模板里面的figure属性定义的是Club，如果在我们的数据里面定义fig属性，那么它就会覆盖模板里面的figure的默认值。同样，fill和fill2也是通过同样的原理去区别模板中的样式和实例中的实际样式的！

注：更多figure属性的取值详见这里

效果如下

由此可见我们数据里面的属性会覆盖模板的原始属性，如果是新增的节点，由于没有自定义数据属性，所以呈现到界面上面的时候就是模板里面的原生样式！

（5）节点连线

有了上面的基础，我们可以在画布上面画出我们想要的图形效果了，可是还没有连线。我们知道连线是建立在节点模型的上面的，于是乎我们的Model又分为了以下三种类型：

Model：最基本的（不带连线，如上面的例子）

GraphLinksModel ：高级点的动态连线图

TreeModel：树形图的模型（从例子看好像用的不多）

GraphLinksModel中为model.nodeDataArray提供model.linkDataArray为node节点连线保存数据模型信息，其实也是的一个JSON数组对象，每个线条都有两个属性 “to” 和 “from” 即Node节点的“key”值，两个属性代表两个key表示两个节点间的连线。

我们上面已经写过最基本的Model的例子了，我们再来个带连线的Model的示例

效果如下

学习了Model、GraphLinksModel，还剩下一种TreeModel树节点的模型，这个博主不打算做详细介绍，有兴趣可以直接查看官网。

三、综合效果

关于综合效果，博主不打算将gojs的api逐个翻个遍了，这样太耗时间，伤不起，只是将官方示例中的部分源码截取出来供大家参考。有需要的再细究！

1、自定义流程的使用

效果如下：

建议各位copy代码，在本地看到效果，然后再根据实际需求去研究它的api，这样才不会太盲目而花费太多时间。

2、工业流程图

工业流程图

四、总结

本文根据js的一些基础用法做了简单介绍，今天就先到这里，以后有问题了再来跟大家分享。如果你的项目里面也有这种业务需求，可以用起来试试！需要说明一点，如果您的公司不缺钱，建议使用正版授权的组件，毕竟尊重作者的劳动成果很重要！