10betJS组件系列之Gojs组件 前端图形化插件之利器

来源:http://www.chinese-glasses.com 作者:Web前端 人气:133 发布时间:2020-03-31
摘要:时间: 2019-10-26阅读: 86标签: 库 前言:之前分享过两篇关于流程画图的前端组件,使用的jsPlumb。这个组件本身还不错,使用方便、入门简单、轻量级,但是使用一段时间下来,发现一些

时间: 2019-10-26阅读: 86标签: 库

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

GoJS是用于实现交互式图的JavaScript库。GoJS是依赖HTML5功能的JavaScript库

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

使用

一、组件效果预览

!DOCTYPE html !-HTML5文档类型-  html   head  !-开发时使用go-debug.js,部署时使用go.js-  script src = “ go-debug .js“  / script 

就最下面两个效果而言,就是jsPlumb无法实现的,可是这种效果在MES系统里面是很吸引人的,尤其是一些流程性的业务,用这种效果实现让可以一眼就感觉高大上了。并且咋一眼看上去,你根本都不相信这是一个web页面的效果。

直接链接到CDN提供的GoJS库:

其他效果示例

scriptsrc="-debug.js"/script

想抢visio的饭碗吗?

每个GoJS图表都包含在div您的HTML页面的HTML元素中,您可以提供明确的大小:

二、初次接触

!-图表的DIV需要明确的尺寸,否则我们将看不到任何内容。 在这种情况下,我们还添加了背景色,以便我们可以看到该区域。-  div id = “ myDiagramDiv” style = “ width:400px; height:150px; background-color:#DAE4E4;”  / div 

老规矩,还是先来个入门教程。

在JavaScript代码您传递div的id制作图表时:

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

var $ = go.GraphObject.make;var myDiagram = $(go.Diagram,“ myDiagramDiv”);

api详情:https://gojs.net/latest/api/index.html

注意,这go是所有GoJS类型所在的“名称空间”。GoJS类的所有代码用法(例如图或节点或面板或Shape或TextBlock)都将以“go.”作为前缀。本文将通过示例向您展示如何go.GraphObject.make用于构建GoJS对象。有关更多详细信息,请阅读GoJS中的Building Objects。使用$作为一个缩写,go.GraphObject.make是那么得心应手,我们将假设从现在开始使用它。如果你使用$你的代码别的东西,你总是可以选择一个不同的短变量名称,如$$或MAKE或GO。

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

图表和模型

10bet,1、Gojs简介

图的节点和链接是由模型管理的数据的可视化。GoJS具有模型视图架构,其中模型保存描述节点和链接的数据(JavaScript对象的数组),而图作为视图使用实际的Node和Link对象可视化此数据。在编辑后加载然后保存的是模型而不是图。您可以在模型的数据对象上添加应用所需的任何属性;您不向Diagram和GraphObject类添加属性或修改其原型。

GoJS是一个功能丰富的JS库,在Web浏览器和平台上可实现自定义交互图和复杂的可视化效果,它用自定义模板和布局组件简化了节点、链接和分组等复杂的JS图表,给用户交互提供了许多先进的功能,如拖拽、复制、粘贴、文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤销管理、调色板、概述、事件处理程序、命令和自定义操作的扩展工具系统。无需切换服务器和插件,GoJS就能实现用户互动并在浏览器中完全运行,呈现HTML5 Canvas元素或SVG,也不用服务器端请求。 GoJS不依赖于任何JS库或框架,可与任何HTML或JS框架配合工作,甚至可以不用框架。

这是一个模型和图的示例,后面是它生成的实际图:

2、使用入门

var $ = go.GraphObject.make;var myDiagram = $(go.Diagram,“ myDiagramDiv”, { “ undoManager.isEnabled”:true //启用Ctrl-Z撤消和Ctrl-Y重做 }); var myModel = $(go.Model);//在模型数据中,每个节点都由一个JavaScript对象表示: myModel.nodeDataArray = [ { key:“ Alpha” }, { key:“ Beta” }, { key:“ Gamma” } ]; myDiagram.model = myModel; 显示了模型中的三个节点。已经可以进行一些交互:* 单击并拖动上图中的背景以平移视图。* 单击一个节点以将其选中,或者按下并拖动一个节点以将其移动。* 要创建选择框,请单击并按住背景,然后开始拖动。* 使用CTRL-C和CTRL-V或按住Control并拖放来制作所选内容的副本。* 按Delete键删除选定的节点。(了解有关更多[键盘命令的信息]()。)* 由于启用了撤消管理器,因此CTRL-Z和CTRL-Y将撤消和重做移动以及复制和删除操作。 

复制代码 代码如下:

样式节点

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

通过创建由GraphObject组成的模板并在这些对象上设置属性来设置节点的样式。要创建Node,我们可以使用几个构建基块类:

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

Shape,以显示带有颜色的预定义或自定义几何TextBlock,以显示各种字体的文本(可能可编辑)图片,显示图像Panel,用于容纳其他对象集合的容器,这些对象可以根据Panel的类型以不同的方式放置和调整大小(例如桌子,垂直堆栈和拉伸容器)

复制代码 代码如下:

所有这些构建块均来自GraphObject抽象类,因此我们随便将它们称为GraphObjects或对象或元素。请注意,GraphObject_不是_HTML DOM元素,因此在创建或修改此类对象时没有太多开销。

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

我们希望模型数据属性影响我们的节点,这是通过数据绑定来完成的。数据绑定使我们可以通过将GraphObject上的属性自动设置为从模型数据中获取的值来更改GraphObject在Nodes中的外观和行为。模型数据对象是普通的JavaScript对象。您可以选择在模型的节点数据上使用所需的任何属性名称。

//创建画布 var objGo = go.GraphObject.make; var myDiagram = objGo(go.Diagram, "myDiagramDiv", { //模型图的中心位置所在坐标 initialContentAlignment: go.Spot.Center, //允许用户操作图表的时候使用Ctrl-Z撤销和Ctrl-Y重做快捷键 "undoManager.isEnabled": true, //不运行用户改变图表的规模 allowZoom: false, //画布上面是否出现网格 "grid.visible": true, //允许在画布上面双击的时候创建节点 "clickCreatingTool.archetypeNodeData": { text: "Node" }, //允许使用ctrl+c、ctrl+v复制粘贴 "commandHandler.copiesTree": true, //允许使用delete键删除节点 "commandHandler.deletesTree": true, // dragging for both move and copy "draggingTool.dragsTree": true, });

默认的Node模板很简单:一个包含一个TextBlock的Node。TextBlock的text属性和模型数据的key属性之间存在数据绑定。在代码中,模板看起来像这样:

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

myDiagram.nodeTemplate = $(go.Node, $(go.TextBlock, // TextBlock.text is bound to Node.data.key new go.Binding("text", "key")) );

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

TextBlocks,Shape和Pictures是GoJS的原始构建块。TextBlocks不能包含图像。形状不能包含文本。如果要让节点显示一些文本,则必须使用TextBlock。如果要绘制或填充一些几何图形,则必须使用“形状”。

var myModel = objGo;//创建Model对象 // model中的数据每一个js对象都代表着一个相应的模型图中的元素 myModel.nodeDataArray = [ { key: "工厂" }, { key: "车间" }, { key: "工人" }, { key: "岗位" }, ]; myDiagram.model = myModel; //将模型数据绑定到画布图上

更一般地,Node模板的框架看起来像这样:

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

myDiagram.nodeTemplate = $(go.Node, "Vertical", //节点/面板的第二个参数可以是面板类型 / *在此处设置节点属性* / { // Node.location点将位于每个节点 locationSpot: go.Spot.Center }, / *在此处添加绑定* / //示例节点绑定将Node.location设置为Node.data.loc的值 new go.Binding("location", "loc"), / *添加包含在Node中的GraphObjects * / //此Shape将垂直位于TextBlock $(go.Shape, "RoundedRectangle", //字符串参数可以命名预定义的图形 { / *在这里设置Shape属性* / }, //示例Shape绑定将Shape.figure设置为Node.data.fig的值 new go.Binding("figure", "fig")), $(go.TextBlock, "default text", //字符串参数可以是初始文本字符串 { / *在这里设置TextBlock属性* / }, //示例TextBlock绑定将TextBlock.text设置为Node.data的值.key new go.Binding("text", "key")) );

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

Panel中GraphObjects的嵌套可以任意深,每个类都有其自己独特的属性集可进行探索,但这表明了基本思想。

Shape:形状——Rectangle、RoundedRectangle,Triangle,Circle等TextBlock:文本域Picture:图片Panel:容器来保存其他Node的集合 默认的节点模型代码只是由一个TextBlock组件构建成

既然我们已经了解了如何制作Node模板,那么让我们来看一个实时示例。我们将制作一个在组织结构图中常见的简单模板-名称旁边的图像。考虑以下节点模板:

// 定义一个简单的节点模板 myDiagram.nodeTemplate = objGo(go.Node, "Horizontal",//横向布局的面板 // 节点淡蓝色背景 { background: "#44CCFF" }, objGo(go.Shape, "RoundedRectangle", //定义形状,这是圆角矩形 { /* Shape的参数。宽高颜色等等*/figure: "Club", width: 40, height: 60, margin: 4, fill: 'red' }, // 绑定 Shape.figure属性为Node.data.fig的值,Model对象可以通过Node.data.fig 获取和设置Shape.figure new go.Binding, new go.Binding, objGo(go.TextBlock, "Default Text", // 默认文本 // 设置字体大小颜色以及边距 { margin: 12, stroke: "white", font: "bold 16px sans-serif" }, //绑定TextBlock.text 属性为Node.data.name的值,Model对象可以通过Node.data.name获取和设置TextBlock.text new go.Binding; var myModel = objGo;//创建Model对象 // model中的数据每一个js对象都代表着一个相应的模型图中的元素 myModel.nodeDataArray = [ { name: "工厂", fig: 'YinYang', fill2: 'blue' }, { name: "车间", fig: 'Peace', fill2: 'red' }, { name: "工人", fig: 'NotAllowed', fill2: 'green' }, { name: "岗位", fig: 'Fragile', fill2: 'yellow' }, ]; myDiagram.model = myModel; //将模型数据绑定到画布图上

一个“水平”面板类型的节点,表示其元素将水平并排放置。它包含两个元素:

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

本文由10bet发布于Web前端,转载请注明出处:10betJS组件系列之Gojs组件 前端图形化插件之利器

关键词:

上一篇:没有了

下一篇:vuex结合localstorage动态监听storage的变化

最火资讯