最近研究了下web流程设计器,写了个小demo。
用的是raphael图形库,兼容性不错,IE6/IE9/Firefox/Chrome都没问题。
功能比较简单,图形上参考了visio的锚点设计,目前实现的功能、操作有:
- 每个任务图形由矩形、图标、文本标签、4个锚点组成;
- 拖拽任务图形的锚点可以生成连线,到另一个图形的锚点释放后完成连接;
- 选中连线后拖动一端的锚点就可以改变连接;
- 可以转换成BPMN2.0规范的XML,以及从XML重建图形;
- 选择图形或连线后,在属性窗口可以查看、修改属性值(定义或图形部分);
(待续)