问题:
最近工作中使用到了审核流程框架Osworkflow,为了让用户对审核流程的状态有个直观的理解,本人打算使用Canvas来绘制流程图,网上发现已经有人实现了,直接拿来使用,非常不错。
网上的实现参考链接:http://www.iteye.com/topic/1130774
研究了之后,发现网上的版本存在下面的问题:
1、配置复杂,需要配置每个Step(Osworkflow的一种概念,下面都称节点)的x、y坐标,宽、高
2、需要配置Step之间的连接connector,还要配置connector经过的所有点的x轴和y轴坐标
3、需要配置历史节点id集合,历史节点显示为绿色背景颜色。
这样的配置比较繁琐,每次配置都相当容易出错,需要慢慢调试很久才能完成。
解决方法:
所以本人在其基础上,开发了节点之间动态连接的功能。我将canvas划分为一个个单元格,每个单元格都固定宽度和高度,每个Step(节点)都位于某个单元格上,这样只需要配置row、col属性即可,改进的配置如下:
<?xml version="1.0"?> <layout> <cell id="0" row="1" col="1" type="InitialActionCell" /> <cell id="1" row="1" col="2" type="StepCell" /> <cell id="2" row="1" col="3" type="StepCell" /> <cell id="3" row="1" col="4" type="StepCell" /> <cell id="4" row="2" col="3" type="StepCell" /> <cell id="5" row="2" col="4" type="StepCell" /> <cell id="7" row="2" col="2" type="StepCell" /> <cell id="8" row="3" col="2" type="StepCell" /> <cell id="9" row="5" col="2" type="StepCell" /> <cell id="40" row="4" col="2" type="StepCell" /> <cell id="41" row="3" col="3" type="StepCell" /> <cell id="42" row="4" col="3" type="StepCell" /> <cell id="43" row="6" col="2" type="StepCell" /> <cell id="44" row="7" col="2" type="StepCell" /> </layout>
至于connector,程序根据配置动态生成。要实现动态连接,必须计算好每个连接的源节点和目标节点,以及中间经过的所有的点,而且整体看起来必须是有序的。我制定了下面的规则让单元格之间可以动态连接:
1、每个节点都有四个端口(上、下、左、右),上、左是入口,下右端口是出口。
2、判断源节点和目标节点的相对位置,可以得到8种结果,源在目标的正上方、左上方、右上方、正左方、正右方、左下方、正下方、右下方。
3、每种结果又可能会有两种情况,即源和目标之间有其它节点以及源和目标可以直连,这样8*2总共得到16中情况,使用if else写完16中情况即可。
4、动态根据当前的节点计算历史完成的节点。
例子:
1、源位于目标左上方向,中间没有障碍
2、源位于目标左上方向,中间有障碍
3、源位于目标的正左方,中间无障碍,直接连接
4、源位于目标的左下方,中间有障碍
其它情况相应推理,这里不再一一举例,这样整套动态生成连接的规则就建立了!
代码的Github地址:https://github.com/cunjinli/osworkflow-canvas
参考链接:
用canvas绘制的osworkflow流程显示:http://www.iteye.com/topic/1130774
Osworkflow:http://blog.csdn.net/lifuxiangcaohui/article/details/6534335
相关推荐
HTML5 canvas绘制流程图,无需flash,支持形状伸缩、编辑文字、拖拽、节点连线功能,类似visio。
html5 canvas 制作流程图 EaselJS html5 canvas 制作流程图 EaselJS
动态添加/删除视图树节点
HTML5_canvas动态画出视图树,HTML5_canvas绘制动态树视图 类似结构图的形式,点击新增节点即可以自动生成 树状图形,可通过删除节点删除树节点。
运用canvas和js,实现流程图的web绘制
osworkflow-canvas-master_nginx_源码.rar
canvas绘制动态心电图,和监护仪上的一样,可参考使用!
使用Canvas进行鼠标画图和线程画线,创建一个Canvas,用鼠标在画布上乱画,可以设置画笔大小和颜色,开启线程会自动从屏幕顶部开始一行一行画线,直到画满整个屏幕
canvas类似画板的功能,在地图上选择区域。判断重合、覆盖、交叉。 可回显
canvas动态划线(canvas跟随鼠标变幻线条,知乎登录页面动态线条背景动画代码) 每次被下载,所需积分就被平台自动叠加,感觉有点傻,无奈重新编辑上传,感觉可选的这个1-5积分就有点少,算了无所谓了你们能下载就好
wpf Canvas重写可视化流程图配置 类型VISIO功能 VS2013 可编译 有生成exe可参考
uni-app 利用canvas进行画框,移动框,放大缩小并删除,目前支持小程序,h5,其他没测试过
html5基于canvas制作酷炫带背景动画的后台登录页面模板下载。
TweenMax.js+HTML5 Canvas动态水彩画板涂色特效是一款绚丽多彩的canvas水彩画板上色代码,有一种抽象艺术美感。
canvas绘制的流程图 未实现交互 可用于熟悉html5中的canvas
学习使用canvas 制作的水杯
Android 自定义画布canvas 实现绘制和清空画布功能,内含源码、apk
网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。(抖音资料)网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画...
HTML5 使用canvas画布做小球回弹动画,使绘画出来的小球沿着矩形的轨迹进行对称回弹,代码简单易懂,适合初学者练习。
android 画曲线图 画三角形(多边形),可以画成股票K线图,儿童成长曲线等,使用android的canvas