欢迎大家来到IT世界,在知识的湖畔探索吧!

上一片文章讲解了Raphael基础及使用场景，头条连接：前端绘图利器-Raphael

大家估计会问，前天才写了文章，今天又发布连Demo都开发完了，我应该拿一个喇叭大喊：最近不加班！最近不加班！最近不加班！[看]

今天这篇文章将介绍使用Raphael绘制流程图，现在前端使用JS进行流程图绘制的框架非常多（如果你需要了解绘制流程的框架可以留言，我偷偷告诉你或者留言我可以单独开模块介绍），这里不重点讲解其他框架。绘制流程图不是Raphael的强项，今天使用Raphael用作流程演示。

为什么说Raphael绘制流程图不是他的强项了？

作者观点：

1、 绘制流程图需要拖拽节点，Raphael需要依赖其他拖拽框架（Vue项目可以使用vuedraggable，js项目可以使用easyui-draggable）

2、 Raphael绘制的图形为svg对象，如果我们需要进行样式修改和其他操作比较困难，需要结合div层来使用，思路如下：分为两成，上层是div-dom布局层，下层为Raphael绘图层；如下示意图：

Raphael流程图布局示例图

写代码前要理清思路，绘制流程图逻辑如下（不涉及后台接口）

绘制设计思路，先思考后编程

需要使用到的Raphael-API

1. paper.circle(x,y,r)// 圆形
2. paper.ract(x,y,width,height,[r]) // 长方形
3. paper.path([pathString]) // 绘制横线箭头
4. paper.text(x,y,text)// 绘制文本

设计节点对象

节点结构设计

布局

1、分析连接节点-圆形

圆形的起点就是为圆心，即圆形（x,y）是我们设计node节点里面的x和y属性；

圆形使用C代替，举行使用RT代替

起点坐标：mx = C.x ; my =C.y

2、分析连接节点-矩形

矩形连接我们需要连接到矩形左边的中间点（箭头连接点），其实算法较简单：矩形的y坐标+1/2矩形高

终点坐标：lx = RT.x ; ly = RT.y + RT.h/2

3、有了起点和终点坐标，如何连接呢？

这里需要使用paper.path([pathString]) 方法连接，参数是一个svg路径，使用如下图：

绘制横线和箭头

将属性arrow-end 参数设置为：classic-wide-long 就可以显示箭头了。

绘图事件

在每个节点单独封装了draw方法，接受paper参数即Raphael实例对象。

draw方法，根据shape类型进行绘图

这里为什么需要单独将绘图事件提出来呢？

1、独立的模块完成单独的事情；

2、为了后续的扩展，例如后续如果需要增加判断节点，根据shape类型进行绘制菱形；

3、可以增加div-dom或者增加click/dbclick事件；

执行一下看看回放

模拟数据：

模拟数据

最终效果：

最终运行效果

说明：这里主要讲解思路，如需完整代码请@作者或者留言

是否期待更多精彩讲解，可以点赞鼓励一下+1[比心],未完待续……

宁为代码累弯腰，不为BUG点提交