之前看过
CS
版本的画工作流工具,在工作流节点中配置业务单据界面呈现,用
Gateway
决定业务单据的流程状态,用任务节点连接线配置业务操作。此工作流把界面层
view
、界面管理层
manager
、业务逻辑联系起来,并做为总入口,介绍业务单据的工作流程和每一流程节点的相应界面。这样一来,系统分析人员、实施人员、公司管理层可先一步跟踪流程是否正确,界面元素是否达到客户需求。主体方向正确了,对接下来的工作开展就有一定的把握。
在工作流程任务节点
task
中
配置或预览界面,这听起来很新鲜。传统方式下要整个系统跑起来,并且有记录才能看到界面。而这样在工作流就能先预览界面,这可真让测试人员惊喜:以前要测
试整个系统界面是否正确,要个个功能点准备记录,有时还要换登录用户才能看到相应的界面,这可是很花时间的大——工程。能先预览界面,测试人员眼睛闪着
光,带着疑问。在
CS
版本下预览跟
BS
网页上看到的界面是否差异太大,要能像网页那样出效果,该多好。
有网页预览效果,这也是我想追求的。于是才有了这个在网页上画工作流的想法。那
BS
式工作流可行性如何呢?试试呗。
先找画板
Canvas
,有画板才能画框、画线条之类的。呵呵,
HTML5
有
Canvas
。这
Canvas
可以画出来任务节点
Task
,分支
Gateway
,画起始点
Start, End
,流程线
Arrowline
。能画出来,那能拖拉不?
Canvas
只支持在画板上的拖拉,不支持画板上某一图型的拖拉事件响应。这真让人失望。网页上
flash
的表现这么灵活,用
flash
来画如何?
flash
可以对某一图形元素写响应事件,可是
flash
要与后台
java
进行数据交互又成为一个难点。怎么办呢?难道在网页上工作流只能止于想法阶段。
如果将网页元素浮起来做流程元素可不可行呢?任务节点
Task
图可以做背景
Table
,节点名字可以在
TD
中显示,
Table
做的任务节点可以响应拖拉事件。用这种方式可以画出
Task, Gateway, Start, End
流程元素,那流程线怎么做呢?箭头直线可以用
Canvas
动态画出来,可以用
Table
分行装载直线名称和直线图,或者在一个单元格换行装载。可直线都是有旋转角度的,
Table
可以旋转吗?
CSS
可以做到旋转
Table
。哈哈,这下可拖拉的网页流程元素都有了。有些人可能会问,像任务节点
Task
是可以整个
Table
中任意点点击都当选中,可非矩形的流程节点,如圆形的
Start/End
,菱形
Gateway
,拖拉可是有范围的。这点嘛,在流程节点中限制一定范围的才响应就可以了。
流程元素实验结果如上图。这期间遇到一个问题:怎样确定流程走线的角度。根据横坐标的长度
xMove
、竖坐标的长度
yMove
可以知道直线的角度,可是如果转的角度大于
90
,流程走线的名称跟着反了过来,不够直观。要保证直线名称的直观性,直线与水平线的夹角只能在
90
度以内。那样的话,箭头方向又不对了。只好在画直线的
Canvas
上下功夫,向水平线方向时画右箭头,反方向时画左箭头。
接下来开始画工作流。
第一步,先放上画板
Canvas
。
给用户画流程,流下画流程的轨迹,合符一定规则的图形则转化成标准流程元素。用户在画板上画中心点交叉的十字出一个流程交叉
Gateway
,即画好十字交叉后,在网页上从标准流程
Task
元素
Clone
放上一个流程交叉
Gateway
,并清空画板。用户在画板上画起点交叉的十字出一个流程任务
Task
,也是
Clone
后加到网页。设计上是这样寥寥几句,实现起来就是另一回事了。先写个
JavaScript
的画板
Draw
类,当
Canvas.onmousedown
时定位画板起点,并让
ducument.onmousemoving
时在画板上画鼠标走线,让
document.onmouseup
时起笔成图。下面是画的一个画:
第二步,画流程元素。画
Task, Gateway
都是两条直线成图的。
Draw
初始时
?
先定义两条线。
this.lines = [[0,0, 0,0], [0,0, 0,0]];
(看出来不?一条直线
[0,0, 0,0]
为起点
0,0
加上终点
0,0
)
画板起笔
?
定位当前直线起点
起笔成图
?
定位当前直线终点,并使下一直线为当前直线。
?
当前一次直线与这一次直线都移了一定长度,算两直线交点。如果交点在中心,则添加
Gateway
;如果交点在起点,则添加
Task
;
效果如下:
第三步:画流程路线。
在添加流程元素时
1.
让流程元素记录它的中心点坐标
x, y
2.
流程元素
onmousedown
记录直线起点坐标
3.
流程元素
onmouseup
记录直线终点坐标,添加流程走线
Arrowline
1.
起点流程元素
StartObj
的中心点坐标与终点流程无线
EndObj
的中心点坐标成一直线
line
。
2.
起点元素
StartObj
与
line
的交点
start
,终点元素与
line
的交点
end
。两交点的连线为流程走线。
3.
两交点的中点,加流程走线中心点与走线中的直线中心点的旋转长度,为流程走线的中点。(呵呵,这点很关键,要不流程走线的两端就不在
start
,
end
上了。)
4.
在中点添加
Arrowline
,并旋转一定的角度。
各流程元素实现流程元素基类方法。(
JS
也可以有接口、多态的)
1.
坐标是否在流程元素中
isMouseIn
2.
流程元素与中心直线的交点
效果如图:
第四步,让流程元素可移动起来。
添加流程走线
arrowline
时
?
在起点对象的出直线集合
outs
上添加
line
。
?
在终点对象的进直线集合
ins
上添加
line
。
?
在流程走线
line
上记起点对象
from
,终点对象
to
流程元素
ctlKey
并
onmouvedown
下笔时,记移动的起点对象,起点坐标。
鼠标移动时,在画板上流下移动痕迹。
鼠标起(完笔)时,移动距离确定。
让与流程元素连接的入直线集合、出直线集合重画。
效果如图:
第五步,美化流程元素图
分享到:
相关推荐
之前看过CS版本的画工作流工具,在工作流...于是才有了这个在网页上画工作流的制作。 这个上传的资源是工作流的粗制作版本,界面还有待进一步美化。 相关介绍博客文档为: http://dqqmq.iteye.com/admin/blogs/1450423
分享一个web端绘制流程图,感觉很实用。下载解压后直接导入eclipse,运行方式 HTTP Preview,访问地址http://localhost:8080/estd/index.html 希望能帮助到大家。
与【流程应用表】主表单配合使用,用户只需要根据业务需要,在子表单上画出所需的栏位 6. 自带的Sampe流程样例 【非生产采购审批】 7. 增加了Mail.Box设置 支持多Mail.box环境下的邮件提醒 8. 除了不再原生...
实现了在web网页上随意拖动画流程图的功能,可以保存到数据库和xml文件中,打开环境:.net2005
用于实现HTML 绘图,WEB工作流设计器,流程设计器连线的基本实现。
大图幻灯瀑布流扁平化HTML5网站模板_大图 幻灯 黑色 瀑布流 图片 相册 企业 整站 商业 摄影 画廊 html5 扁平化 工作室 案例 设计 简洁 纯色 精品 官网.rar
本文是关于当前国产商业漫画市场的小研究,分析所用数据都是从漫画网站上直接爬取的。这里我选择的数据来源有两个,一个是当前收录商业化国漫最多的快看漫画,另一个是使用用户最多、以日漫为主的动漫之家。 在这...
工作流(workflow)就是工作流程的计算模型,即将工作流程中的工作如何前后组织在一起的逻辑和规则在计算机中以恰当的模型进行表示并对其实施计算。它主要解决的是“使在多个参与者之间按照某种预定义的规则传递文档...
Hippo Animator 软件特色: 专业软件 Hippo Animator 是一家特色包装的动画工作室。对初学者来说,入门不难,专家们可以利用它的高端功能。...您在测试的 Javascript Hippo Animator 导出时的工作一样。
将AE动画转化为svg动画在网页上播放 canvas动画 自定义字体、拆分字体文件 引入单文件方式使用Vue 用Webpack进行打包、图片压缩等 模块按需进行懒加载 众所周知,只用考虑PC端,并且只考虑Chrome浏览器的前端项目是...
动态网页以数据库技术为基础,可以大大降低网站维护的工作量。采用动态 网页技术的网站可以实现更多的功能,如用户注册、用户登录等等,它实际上并 不是独立存在于服务器上的网页文件,只有当用户请求时服务器才返回...
这就是本文将重点讲述的核心,所谓“动态”,并不是指那几个放在网页上的GIF动态图片,在这里笔者为动态页面的概念制定了以下几条规则: 1、“交互性”即网页会根据用户的要求和选择而动态改变和响应,将浏览器...
HTML网站源码,专为图片展示打造。...具备响应式设计,适应各种屏幕和设备,无论在求职还是面试中,都能展现您的技术实力和创意视觉。快速部署,提升工作效率,让每一次展示都成为赢得机会的关键时刻。
本书以目前最流行的网页设计三剑客Dreamweaver 8、Fireworks 8和Flash 8作为支撑平台,由浅入深,系统地介绍了网页的构思、规划、制作和网站建设的全过程。本书还着重讲解了如何使用JavaScript进行客户端编程和如何...
功能在确认正常工作后才上传。 【适用人群】: 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】: 项目具有较高的学习借鉴价值,也可...
txt文件是微软在操作系统上附带的一种文本格式,是最常见的一种文件格式 ,早在DOS时代应用就很多,主要存文本信息,即为文字信息,在微软在操作系统等于直接存,就是它了,现在多用的操作系统得使用记事本等程序...
大图幻灯瀑布流扁平化HTML5网站模板_大图 幻灯 黑色 瀑布流 图片 相册 企业 整站 商业 摄影 画廊 html5 扁平化 工作室 案例 设计 简洁 纯色 精品 官网.rar
工作流在执行的过程中肯定会涉及到很多数据,Activiti是默认提供数据库表给我们使用的 Activiti工作流框架快速入门: 定义工作流,使用插件来把我们的流程图画出来。这个流程图就是我们定义的工作流。 ...
教师管理科asp网站源码,离退休人员管理科网内网站建设程序,市教育督导办公室宣传网站,网上市语言文字工作委员会办公室网站网页模版,广州市市高等学校招生委员会办公室网站模板下载,免费下载市直教育系统党建...
网 页艺术设计的设计师在设计的过程中需要将重要信息表达在网页最醒目的区域,视觉流 程的停留点设计也需要设计在一目了然的位置。网页设计先关人员可以依照具体信息资 源的传递的需求,画面所呈现不同的着重点,...