在网页上画工作流
之前看过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下笔时，记移动的起点对象，起点坐标。
鼠标移动时，在画板上流下移动痕迹。
鼠标起（完笔）时，移动距离确定。
让与流程元素连接的入直线集合、出直线集合重画。
效果如图：
??
第五步，美化流程元素图
