基于easyui开发Web版Activiti流程定制器详解（五）——Draw2d详解（一）


背景：

小弟工作已有十年有余，期间接触了不少工作流产品，个人比较喜欢的还是JBPM，因为出自名门Jboss所以备受推崇，但是现在JBPM版本已经与自己当年使用的版本（3.X）大相径庭，想升级也不太容易，后来得知JBPM的老大转战到了Activiti，处于对JBPM的喜欢所以研究了一下Activiti，发现Activiti不但保留下JBPM优秀的DNA而且还进行了优化，相比之前JBPM设计更简单更清晰更容易掌握。

三年前Activiti开始进入公司的正式项目中并且表现非常良好，但是它的Web版的定制器无法满足我们的需求，可能是由于当初Activiti刚发布不久这方面的成型的产品比较少，所以没有找到合适的替代产品，那该怎么办呢？经过一番的思想斗争，小弟决定先自己做一个Demo，如果可行则自己研发。

经过研究其他工作流引擎的定制器，小弟发现找到一个能够支持多浏览器的绘图脚本库很关键，所以开始在网上疯狂的寻找，俗话说：黄天不负有心人，最后终于发现一个新大陆——Draw2d，但是接下来一个问题来了，这个脚本库是收费的，怎么办？谁叫咱们是做JAVA出身的呢！对免费的开源的情有独钟，后来在网上找到早期的版本是免费的，下载下来研究一番发现功能基本够用，哈哈哈。。。。搞定！

好了罗嗦的这么多，就是想引出本篇的主人公——Draw2d，至于它有多牛可以访问官网了解一下，不过现在都是收费的而且比早期的版本功能强大很多。

下面进入正题，详细讲解一下Draw2d，讲解之前请注意以下内容都是基于Draw2d早期版本而且都是本人通过研读代码获得（由于收费所以没有文档，只能靠自己），如果与现在版本有出入或者理解错误的地方请指正。

Draw2d类图：



以上是Draw2d中各种组件（如：窗口、对话框、菜单、图形、线的起点和终点、注释等等）类图，这些组件在绘图时经常用到，其中带颜色的类是本设计器使用的组件（后面的章节会着重介绍）。



以上是Draw2d中连接线类图，设计器中的连接线就是Connection扩展而来，一个Connection实例一般由三个部分组成：Color、ConnectionDecorator和ConnectionRouter。

Color：定义连接线的颜色（RGB）

ConnectionRouter：定义连接线是折线还是曲线等

ConnectionDecorator：定义连接线是否有箭头

后面会重点介绍，这里不在赘述。



以上是Draw2d中画布类图，绘图时在画布上添加图形（上面提到的类的实例）即可实现相应图形的绘制。Draw2d中已经内置了WorkFlow类型的画布这为定制器的开发带来了很大的方便。



这幅图是Draw2d中指令类图，Draw2d中使用了Command模式响应事件处理，方便实现自定义工具栏功能按钮，如：设置颜色、设置文本功能等等。

除了以上类图中展示的类，Draw2d中还有很多静态工具方法和工具类（如：XML解析、序列化/反序列化、ArrayList、String等），这里不在过多的展开查看源代码很容易理解，有问题的话可以给我留言。