Java Script语言流程图绘制框架

最近调研了射流研究…画流程图的框架，最后选择了接头。配合上达格雷可以画出像模像样的流程图。

JointJS简介

JointJS是一个开源前端框架，支持绘制各种各样的流程图、工作流图等拉普德。是共同的的商业版，提供了一些更强的插件JointJS。的特点有下面几条，摘自官网：

能够实时地渲染上百（或者上千)个元素和连接支持多种形状（矩形、圆、文本、图像、路径等)高度事件驱动，用户可自定义任何发生在纸下的事件响应元素间连接简单可定制的连接和关系图连接平滑（基于贝塞尔插值贝塞尔插值)智能路径选择基于挽救(保存的简写)的可定制、可编程的图形渲染开发支持通过数据进行序列化和反序列化总之JoingJS是一款很强的流程图制作框架，开源版本已经足够日常使用了。

一些常用地址：

AP :https://ReSoUrces。联合js。com/docs/joint js/v 1.1/joint。超文本标记语言

Tutorials:https://resources.jointjs.com/tutorial

你好，世界

！' DOCTYPE htmlhtmlhead链接rel='样式表type=' text/CSS ' href=' https://cdnjs。云耀斑。com/Ajax/libs/joint js/2。1 .0/关节。CSS ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'/head dy！- content - div id='myholder'/div！-依赖性通过加拿大加载依赖-script src=' http :https://cdnjs。云耀斑。com/Ajax/libs/jquery/3。1 .1/jquery。js '/script script src=' http :3359 cdnjs。云耀斑。com/Ajax/libs/lodash。js/3。10 .1/lodash。js '/script script src=' http 33603359 cdnjs。云耀斑。com/com-code-script type=' text/JavaScript ' var graph=new joint。迪亚。图表；var paper=新关节。迪亚。论文({ El :文档。getelementbyid(' my holder ')，model: graph，width: 600，height: 100，grid size : 1 })；新关节。形状。标准。矩形()；rect.position(100，30)；rect.resize(100，40)；rect。attr({ body : { fill : ' blue ' }，label: { text: 'Hello '，fill : ' white ' })；rect.addTo(图形);var rect 2=rect。clone()；rect2.translate(300，0)；rect2.attr('标签/文字','世界！');rect2.addTo(图形);var link=新关节。形状。标准。link()；链接。来源(rect)；链接。目标(rect 2)；link.addTo(图形);/脚本/正文/htmlhello world代码没什么好说的。要注意这里的图形并没有自动排版，而是通过移动第二个矩形实现的手动排版。

前后端分离架构

既然支持NodeJs，那就可以把繁重的图形绘制任务交给服务器，再通过数据序列化在超文本传送协议上传输对象，这样减轻客户端的压力。

开发后端

var express=require(' express ')；var joint=require(' joint js ')；var app=express()；函数get _ graph(){ var graph=new joint。迪亚。graph()；新关节。形状。标准。矩形()；rect.position(100，30)；rect.resize(100，40)；rect。attr({ body : { fill : ' blue ' }，label: { text: 'Hello '，fill : ' white ' })；rect.addTo(图形);var rect 2=rect。clone()；rect2.translate(300，0)；rect2.attr('标签/文字','世界!');rect2.addTo(图形);var link=新关节。形状。标准。link()；链接。来源(rect)；链接。目标(rect 2)；link.addTo(图形);返回图。to JSON()；}app.all('* '，函数(req，res，next){ RES . header(' Access-Control-Allow-Origin '，' *)；res.header('访问控制-允许-头，' X-请求-与');res.header('访问控制-允许-方法、“放、贴、拿、删、选”)；next()；});app.get('/graph '，函数(请求，资源){ console.log('[ ]将图形json发送到客户端)RES . send(get _ graph())；});app。听(8071)；超文本标记语言前端

！' DOCTYPE htmlhtmlhead链接rel='样式表type=' text/CSS ' href=' https://cdnjs。云耀斑。com/Ajax/libs/joint js/2。1 .0/关节。CSS ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'/head dy！- content - div id='myholder'/div！-依赖性通过加拿大加载依赖-script src=' http :https://cdnjs。云耀斑。com/Ajax/libs/jquery/3。1 .1/jquery。js '/script script src=' http :3359 cdnjs。云耀斑。com/Ajax/libs/lodash。js/3。10 .1/lodash。js '/script script src=' http 33603359 cdnjs。云耀斑。com/com-code-script type=' text/JavaScript ' var graph=new joint。迪亚。图表；var paper=新关节。迪亚。论文({ El :文档。getelementbyid(' my holder ')，model: graph，width: 600，height: 100，grid size : 1 })；$.get(' http://192。168 .237 .128:8071/graph '，函数（数据，雕像){ graph.fromJSON(数据);});/脚本/正文/html其他

自动布局自动布局

JointJS内置了插件进行自动排版，原理是调用达格雷库。官方美国石油学会(美国石油协会)中有样例。

使用方法：

var图bbox=关节。布局。directedgraph。布局(图，{nodeSep: 50，edgeSep: 80，rank dir : ' TB ' })；配置参数注释节点九相同等级的邻接节点的距离edgeSep相同等级的邻接边的距离rankSep不同等级元素之间的距离rankDir布局方向(“TB”(从上到下)/“BT”(从下到上)/“LR”(从左到右)/“RL”(从右到左))边距用作图表左右边缘的像素数。边距用作图表顶部和底部边距的像素数。出身行伍的军官排序算法可能的值："网络-单工"(默认)、"紧树"或"最长路径"。如果不希望父元素为了适合所有嵌入的子元素而拉伸，请将调整集群大小设置为假的.默认为。集群填充父元素与其嵌入子元素的边界之间的间隙。它可以是一个数字或一个对象，例如{左： 10,右： 10,上： 30,下： 10 }。默认为10。设定位置(元素，位置)用于设置布局末端元素位置的函数。如果您不想使用defaultelement.set('position '，position)，但想通过动画形式设置位置，这很有用。设置顶点（链接，顶点)如果设置为，布局将通过设置顶点来调整链接。它默认为阿尔塞.如果该选项被定义为一个函数，它将用于设置布局末端的链接顶点。如果您不想使用defaultlink.set('顶点，顶点),但想以动画方式设置顶点，这很有用。设置标签（链接、标签位置、点)如果设置为，布局将通过设置标签的位置来调整标签。它默认为阿尔塞.如果该选项被定义为一个函数，它将用于设置布局末端的链接标签。注意：只有第一个标签(链接。标签(0)；)由布局定位。达格雷默认情况下达戈应该在全局命名空间当中，不过你也可以当作参数传进去graphlib默认情况下，graphlib应该在全局命名空间当中，不过你也可以当作参数传进去我们来试一下NodeJS。后端

var express=require(' express ')；var joint=require(' joint js ')；var dagre=required(' dagre ')var graph lib=required(' graph lib ')；var app=express()；函数get _ graph(){ var graph=new joint。迪亚。graph()；新关节。形状。标准。矩形()；rect.position(100，30)；rect.resize(100，40)；rect。attr({ body : { fill : ' blue ' }，label: { text: 'Hello '，fill : ' white ' })；rect.addTo(图形);var rect 2=rect。clone()；rect2.translate(300，0)；rect2.attr('标签/文字','世界!');rect2.addTo(图形);for(var I=0；i10I){ var cir=新关节。形状。标准。圆圈()；cir.resize(100，100)；cir.position(10，10)；cir.attr('root/title '，' joint。形状。标准。圆圈')；cir.attr('标签/文本','圆圈(一)；cir.attr('body/fill '，'浅蓝色')；cir.addTo(图形);var ln=新关节。形状。标准。link()；在。来源(cir)；在。目标(rect 2)；ln.addTo(图表);} var link=新关节。形状。标准。link()；链接。来源(rect)；链接。目标(rect 2)；link.addTo(图形);//自动布局关节。布局。directedgraph。布局(图，{ nodeSep: 50，edgeSep: 50，rankDir: 'TB '，dagre: dagre，graph lib : graph lib })；返回图。to JSON()；}app.all('* '，函数(req，res，next){ RES . header(' Access-Control-Allow-Origin '，' *)；res.header('访问控制-允许-头，' X-请求-与');res.header('访问控制-允许-方法、“放、贴、拿、删、选”)；next()；});app.get('/graph '，函数(请求，资源){ console.log('[ ]将图形json发送到客户端)RES . send(get _ graph())；});app。听(8071)；超文本标记语言前端

！' DOCTYPE htmlhtmlhead链接rel='样式表type=' text/CSS ' href=' https://cdnjs。云耀斑。com/Ajax/libs/joint js/2。1 .0/关节。CSS ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'/head dy！- content - div id='myholder'/div！-依赖性通过加拿大加载依赖-script src=' http :https://cdnjs。云耀斑。com/Ajax/libs/jquery/3。1 .1/jquery。js '/script script src=' http :3359 cdnjs。云耀斑。com/Ajax/libs/lodash。js/3。10 .1/lodash。js '/script script src=' http 33603359 cdnjs。云耀斑。com/com-code-script type=' text/JavaScript ' var graph=new joint。迪亚。图表；var paper=新关节。迪亚。论文({ El :文档。getelementbyid(' my holder ')，model: graph，width: 2000，height: 2000，grid size : 1 })；$.get(' http://192。168 .237 .128:8071/graph '，函数（数据，雕像){ graph.fromJSON(数据);});/脚本/正文/html结果：

使用超文本标记语言定制元素

流程图中的每个点，也就是是元素，都可以自定义，直接编写超文本标记语言代码能添加按钮、输入框、代码块等。

我的一个代码块演示，搭配highlight.js可以达到类似国际开发协会控制流图的效果。这个特征可玩度很高。

关节。形状。BBL={ }；关节。形状。机筒元素=关节。形状。基本的。rect。扩展({默认s :关节。乌提尔。深度补充({ type : ' BBL .Element '、attrs : { rect : { stroke : ' none '、' fill-opacity ' : { 0 } }、joint。形状。基本的。rect。原型。默认值)})；//为该元素创建一个自定义视图，在它上面显示一个HTML分区.//-接头。形状。机筒元素视图=关节。迪亚。元素视图。扩展({ template :[' div class=' html-element ' data-collapse '，' label/labelbr/'，' div class=' hljs ' precode/pre/span/div '，'/div ').join(" ")，initialize:函数(){ _ .bindAll(这个，' updateBox ')；关节。迪亚。元素视图。原型。初始化。应用(这个，参数)；这个$box=$(_ .模板(这个。模板())；//防止纸张处理尖锐物。这个$box.find('h3 ').on('mousedown click '，函数(evt){ evt。stopperpagation()；});//每当基础模型改变时，更新框的位置. this.model.on('change '，this.updateBox，this)；//当模型从图形中移除时，移除该框. this.model.on('remove '，this.removeBox，this)；这个。updatebox()；}，render:函数(){关节。迪亚。元素视图。原型。渲染。应用(这个，参数)；this . paper . El . prepend(this .$ box)；这个。updatebox()；归还这个；}，updateBox:函数(){ //设置框的位置和尺寸，使其覆盖JointJS元素var bbox=这个。模特。getbbox()；//用存储在单元格模型中的数据更新超文本标记语言的示例。这个$box.find('标签')。正文(这个。模特。get(' label ')；这个$box.find('代码').html(这个。模特。get(' code ')；var color=这个。模特。get(' color ')；这个$box.css({ width: bbox.width，height: bbox.height，left: bbox.x，top: bbox.y，background: color，' border-color ' : color })；}，removeBox:函数{这个.$ box。移除()；}});以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。