自己调研的常用开源流程图组件

栏目: IT技术 · 发布时间: 3年前

内容简介:前期公司的一个项目需要绘制流程图,设计师给的效果大致是这样的对,全是马赛克。

前期公司的一个项目需要绘制流程图,设计师给的效果大致是这样的

自己调研的常用开源流程图组件

对,全是马赛克。

项目的大致要求如下:

  1. 点击流程节点后会弹出对应的流程详情,可以查看和编辑
  2. 最好是支持流程节点的拖拽来实现节点之间的层级改动
  3. 流程节点尽可能的居中

我就大致搜了下,找了不少不错的,但是都是付费的居多,比如gojs。

自己也看了几个开源的可以制作流程图的库,生成的全部是svg。

flowchart.js

效果图 自己调研的常用开源流程图组件

缺点:

  1. 这样的数据结构真心让人喜欢不起来,连数组都不是
  2. 数据的位置完全把控不了

优点:

  1. 不用自己指定流程节点的位置

obfc

obfc.js部分源代码 自己调研的常用开源流程图组件 效果图 自己调研的常用开源流程图组件

缺点:

  1. 库写的太简陋了,全部都用的是全局方法和变量。。。
  2. 需要指定流程节点的坐标位置(硬伤啊)

优点

  1. 库比较容易进行二次封装

Rappid/jointjs

它居然有开源版jointjs 自己调研的常用开源流程图组件 缺点

  1. 流程节点的连线默认使用弧线连接的

优点

  1. 不用自己指定流程节点位置
  2. 流程节点会自己尽量居中

可以自己改造下,加一层节点,再想办法让它连续变成直线。 自己调研的常用开源流程图组件

本来我是想拆分出里面的自动居中算法的,然后再结合前面几个库实现产品要求。看了它依赖几个库,一个是backbone,一个是dagre.js(里面又依赖graphlib.js)

这几个其实都不满意。

G6

前几天跟一个朋友说了下,他问我看过G6没有?G6?我听到没听过啊。看来我是孤陋寡闻了。

阿里的开源图可视化引擎,使用canvas画图的。

自己调研的常用开源流程图组件

这是我根据产品要求用G6写的demo,怎么样?是不是很符合产品的要求啊。 哈哈,感谢朋友的推荐,感谢G6。

缺点:

  1. canvas,不是svg,感觉没有svg那样更容易控制,得全靠对api的熟悉程度
  2. 需要多熟悉熟悉文档

优点:

  1. 不用自己指定流程节点的位置
  2. 背后有阿里
  3. 可以不指定位置,然后自己根据内容的宽高再调整位置 自己调研的常用开源流程图组件 4.继续发掘

最终的选型很明显了,肯定用G6了啊。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深入浅出MFC (第二版)

深入浅出MFC (第二版)

侯俊杰 / 华中科技大学出版社 / 2001-1 / 80.00元

《深入浅出MFC》分为四大篇。第一篇提出学习MFC程序设计之前的必要基础,包括Widnows程序的基本观念以及C++的高阶议题。“学前基础”是相当主观的认定,但作者是甚于自己的学习经验以及教学经验,其挑选应该颇具说服力。第二篇介绍Visual C++整合环境开发工具。此篇只是提纲挈领,并不企图取代Visual C++使用手册;然而对于软件使用的老手,此篇或已足以帮助掌握Visual C++整合环境......一起来看看 《深入浅出MFC (第二版)》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试