js组件系列中Gojs组件前端图形化插件的利器

前言：我分享了两个关于工艺图前端组件的部分，使用的是jsPlumb。这个组件本身还不错，容易使用，容易上手，而且轻量级。但是使用一段时间后，发现了一些缺点，比如成分不稳定。刚进入页面时，连接风格有时会比较混乱，刷新页面后会恢复正常。而且连接方式比较简单，容易造成视觉疲劳。另外，公司最近正在大力推广所谓的“工业4.0”，除了自动化控制需求的提升，这种图形界面的需求，基于以上的一切，Gojs组件终于被找到了，功能强大，api丰富。唯一的不足就是这个组件是充电组件，但是在中国，嘘.这是一个不能说的秘密！

本文原地址：http://www.cnblogs.com/landeanfen/p/7910530.html

一、组件效果预览

让我们从两个很酷的效果开始

就底层的两个效果而言，jsPlumb无法实现。但是这种效果在MES系统中是很有吸引力的，尤其是对于一些业务流程，可以让你一目了然的感觉到自己很高。而且乍一看，你不相信这是一个网页的效果。

其他效果的示例

可折叠树

这是一幅画吗？

甚至可以生成图表！

想接手visio的工作吗？

更多例子，见官网

第二，第一次接触

像往常一样，让我们从入门教程开始。

源代码下载：https://github.com/NorthwoodsSoftware/GoJS

原料药详情：https://gojs.net/latest/api/index.html

示例地址：https://gojs.net/latest/samples/index.html

1.Gojs简介

GoJS是一个功能丰富的JS库，可以在Web浏览器和平台上实现自定义的交互图和复杂的可视化效果。它用自定义模板和布局组件简化了节点、链接、组等复杂的JS图，为用户交互提供了很多高级功能，如拖拽、复制、粘贴、文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤销管理、调色板、概览等，无需切换服务器和插件，GoJS就可以实现用户交互，完全在浏览器中运行，渲染HTML5 Canvas元素或SVG，无需服务器端请求。GoJS不依赖于任何JS库或框架(如bootstrap、jquery等)。)，并且可以与任何HTML或JS框架一起工作，即使没有框架。

2.入门指南

(1)文件引用

复制代码的代码如下： script src=' http 3360 gojs/go-debug _ ok . js '/script

您可以使用最新版本的cdn，也可以参考本地的down文件。如果是开发，可以参考js的调试版本，正式运行的时候参考正式的js，不需要解释。

(2)创建画布

只需定义一个html元素作为我们的画布

复制的代码如下： div ID=' mydiagramdv ' style=' margin 3360 auto；宽度width:300px高度：300 px；背景-color : # DDD；'/div

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

//创建画布var objGo=go。GraphObject.makeVar my diagram=objgo (go。图，‘mydiagramdv’，{//模型图中心位置的坐标为initial contenttalign : go . spot . center，//允许用户使用Ctrl-Z撤销和Ctrl-Y重做快捷键‘撤销管理器’。操作图表时，isenabled' :为真。//不允许用户更改图表的比例。allowzoom : false。//网格' grid.visible': true是否出现在画布上。//允许在画布上双击时创建节点“clickcreationtool .原型节点data”。