js流程图:aworkflow.js
auto-workflow
用于快速构建各种关系图的库
github地址:https://github.com/auto-workflow/AWorkflow
快速开始
npm install aworkflow
或者引用dist文件夹下的产出文件
访问demo
npm install
npm run dev
默认模版:http://localhost:9999/
动画:http://localhost:9999/demo/animate
自动排列:http://localhost:9999/demo/autosort
自定义模版:http://localhost:9999/demo/custom
登陆流程图:http://localhost:9999/demo/process
也可以访问在线demo:
默认模版:http://zhoushengfe.com/flow/dist/index.html
动画:http://zhoushengfe.com/flow/dist/demo/animate/index.html
自动排列:http://zhoushengfe.com/flow/dist/demo/autosort/index.html
自定义模版:http://zhoushengfe.com/flow/dist/demo/custom/index.html
登录流程图:http://zhoushengfe.com/flow/dist/demo/process/index.html
技术文档
快速开始
1,定义node:
let node1 = {// 唯一标识,必须id: '123', // 自定义数据,用于填充模版,nodeName为组件文案 defineData: { nodeName: '数据拆分' }, // 画布中位置 position: [100, 100], // 输入圈,对象数组,每个对象表示一个输入,以下标区分 input: [ { } ], // 输出圈,对象数组,每个对象表示一个输出,allInputs:能链接到所有node的输入,enbaleInputs:对象数组,每个对象定义可以输入的圈信息(id对应节点,inputIndex对应输入点下标) output: [ { allInputs: true, enbaleInputs: [{ id: '124', inputIndex: 0 }] } ] }; let node2 = { // 使用的模版,默认使用defaultTemplate templateName: 'iconTemplate', id: '124', defineData: { nodeName: '随机采样', imgSrc: 'base64...' }, // 画布中位置 position: [300, 100], // 输入 input: [ { } ], // 输出 output: [ ] };
2,定义节点关系:
let edges = [{// 输出节点及输出圈,‘123:0’表示id为123的node的下标为0的输出点src: '123:0', // 输入节点及输入圈,'124:0'表示id为124的node的下标为0的输入点 to: '124:0' } ];
3,实例化:
// 全局配置 let globalConfig = {// 是否静态图片,true:节点和连线都不可拖动,false:可以添加事件监听 isStatic: false, // 整个图默认模版,默认为defaultTemplate templateName: 'defaultTemplate', // templateName: 'iconTemplate', // 是否需要自动排序,true: 程序智能计算每个node的位置,false: 根据node position来定位 autoSort: true, // 自动排序时,true: 水平排序,false: 垂直排序 horizontal: false, // 可选,node对齐方式,start: 水平排列时表示上对齐,垂直排列时表示左对齐 middle: 中间对齐 end: 水平排列时表示下对齐,垂直排列时表示右对齐 align: 'middle', // 可选,beginX 起点X坐标,默认10 beginX: 30, // 可选,beginY 起点Y坐标,默认10 beginY: 30, // 可选,spaceX 横向间距,默认200 spaceX: 200, // 可选,spaceY 纵向间距,默认100 spaceY: 60 }; // 实例化 let workflow = new AWrokflow(document.getElementById('aw'), {nodes, edges}, globalConfig);
API
接口文档: http://zhoushengfe.com/flow/api/index.html
基础概念
模版
模版是形状和样式的结合体,定义了节点(node)和连线(edge)的具体形状和样式
默认为defaultTemplate,由矩形和文案组成
系统内置iconTemplate模版,由一个icon和文案组成
系统内置菱形模版diamondTemplate,由菱形和文案组成
当然还可以自定义模版,可以参考demo,定义了一个红色模版
定义的模版可以在node和edge中使用,这样就可以画出不同的节点和连线了
node
节点,可以定义使用的模版,模版中参数,输入,输出圈信息
edge
连线,可以定义模版,连线信息
高级用法,自定义node和edge的基础绘制方法
DrawView
在渲染工作流中,为了方便地处理缩放,所以整个工作流的图形集合是一个对象,对应zrender中的Group
类,默认情况下是Aworkflow中的DrawView
类,在DrawView
中包含了NodeView
和EdgeView
,NodeView
和EdgeView
是由不同的Shape组成的Group。
如果想自定义一个渲染规则,可以参考src/draw/basicdraw/DrawView.js
中的代码,使用Draw.extend()
实现一个自定义的类,需要设置type
字段,并且实现render()
方法,render()
方法中需要将最终使用的zrender的形状实例对象return出去,以便于在Aworkflow中add到zrender对象中。
(这个地方实现的好像不太好)
NodeView
Node是工作流中的节点,默认的实现类是src/draw/basicDraw/NodeView
,父类是src/draw/Node
,Node也是一个Group
,包含了像文字(Text),图标(Image),矩形(Rect)等基本形状。在NodeView中render输入输出点的时候,会根据点的个数和Node的position来计算出每个点的坐标来绘制,同时可以在config中配置input或者output在node中的位置,如top、right、bottom、left。
同样,如果想要自定义一个Node,需要使用Node.extend()
方法,需要定义type和实现render()
方法,render()
方法中需要将最终使用的zrender的形状实例对象return出去,以便于在DrawView
或者父集合对象中add到对应的Group对象中。
EdgeView
Edge是工作流中的连线,默认的实现类是src/draw/basicDraw/EdgeView
,父类是src/draw/Edge
,Edge也是一个Group
,包含了像贝塞尔曲线和三角形箭头基本形状。渲染连线需要在渲染节点之后进行,因为连线的信息只有节点信息没有坐标信息,所以需要在节点渲染后,根据起止节点来计算处连线的起始点坐标,同时会根据箭头的位置对终点坐标进行细微的调整。
同样,如果想要自定义一个Edge,需要使用Edge.extend()
方法,需要定义type和实现render()
方法,render()
方法中需要将最终使用的zrender的形状实例对象return出去,以便于在DrawView
或者父集合对象中add到对应的Group对象中。
Shape
Shape是一些基本形状,目前实现了的有BezierCurve、CirCle、Image、Text、React、Triangle,是对zrender中Displayable中的简单封装。在使用Shape的时候,需要先实例化,然后调用shape.init()
方法实例化对应的zrender对象,init之后shape.dom
中存储便是对应的zrender对象。 需要自定义Shape的时候,需要使用Shape.extend()
方法。和上面几个类似,具体可参考src/draw/shape
目录中的代码
测试
npm run test
如何贡献
讨论
qq群:869605396
转载于:https://www.cnblogs.com/mufc-go/p/9732722.html
js流程图:aworkflow.js相关推荐
- pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
- php提交表单关闭弹出层,使用js实现关闭js弹出层的窗口
本篇文章主要是对使用js实现关闭js弹出层的窗口的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 function toggle() { theObj = document.getE ...
- Vue.js 使用 Swiper.js 在 iOS 11 时出现错误
前言 在H5项目中,需要用到翻页效果,通过 Swiper 来实现,安装 Swiper npm i swiper -S 但是实际使用中,发现低版本 iOS < 11 会出现下面这个错误: Synt ...
- Mustache.js和Handlebars.js有什么区别?
本文翻译自:What are the differences between Mustache.js and Handlebars.js? Major differences I've seen ar ...
- js修改display_Vue.js从零开始——过渡 / 动画效果(2)
题图是2013年在 OSRAM 的顶层拍的远景,能看到慕尼黑的高楼大厦不算多,远近也就看到4栋,左上的富士通,右侧远处的奥林匹克公园的高塔还有宝马大厦,最远处的那一栋我不知道是哪里了--这是因为不在老 ...
- video.min.js php,使用flv.js与video.js做一个视频直播效果
这次给大家带来使用flv.js与video.js做一个视频直播效果,使用flv.js与video.js做出视频直播效果的注意事项有哪些,下面就是实战案例,一起来看一下. 环境配置 首先运行livego ...
- 微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js)
微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞 ...
- RAP、Mock.js、Vue.js、Webpack
最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...
- 低版本浏览器支持css3 Media查询的方法, ie6-ie8 不支持css3 的时候用respond.js,html5shiv.js 【非常实用哦】。。。。。。。。。。。。...
Respond.js 是一个快速.轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width ...
- js课程 5-14 js如何实现控制动画角色走动
js课程 5-14 js如何实现控制动画角色走动 一.总结 一句话总结:首先是onkeydown事件,然后是改变元素的left和top属性 1.常用键盘事件有哪些? • onkeydown和 onke ...
最新文章
- 如何在团队中做好Code Review
- Andrew Ng 深度学习课后测试记录-01-week2-答案
- python基础知识点总结-Python基础知识总结
- python xlrd简单读取excel
- 使用SHA256证书进行微软数字签名代码签名
- 负载均衡器上实现客户端IP限制
- .net自定义控件Control、WebControl、CompositeControl
- python开发实践教程_Python开发实践教程
- Android入门简书,android ndk开发入门随笔(一)
- 必备的Linux基础命令
- 微信小程序:冒泡事件及其阻止
- 从“救火”到“井然有序”
- hdu 5461(2015沈阳网赛 简单暴力) Largest Point
- “磁碟机”病毒详尽分析报告
- 2022-2027年中国新能源车电控电机市场竞争态势及行业投资前景预测报告
- 异步十二进制加法计数器(统一使用上升沿触发的D触发器)设计
- HTML页面布局适配不同分辨率
- session 、cookie、token的区别及联系
- git rebase origin/develop
- 深入浅出理解 MyBatis-Plus(最新版3.5.2)
热门文章
- python读取csv文件并修改指定内容-pandas读取CSV文件时查看修改各列的数据类型格式...
- c+和python哪个快-python比c更快
- 会计学python有用吗-会计转到数据分析值得吗?
- python下载地址-python下载网址
- python随机画散点图-Python使用Plotly绘图工具,绘制散点图、线形图
- 电脑安装python为什么不能用-python安装后不能运行怎么办
- 学python入门书-如何学习Python,以及新手如何入门?
- 零基础自学python的app-零基础学Python需要用哪些软件?
- python读取大文件-强悍的Python读取大文件的解决方案
- 怎样看python源代码-如何直接从IDE读取Python源代码