公司项目中需要一个web版的流程图设计器,来对业务处理流程进行定义和过程展现,考虑到浏览器的兼容性,最终选择用Flex开发。最近刚刚完成基本功能开发,发出来给大家瞧瞧,欢迎拍砖。
本版本的web流程图设计器,使用as3.0开发,实现内容如下:
一、基本功能:
1、创建流程【节点】。点击【控件栏】中的【节点】按钮后,在画布区的空白处按下鼠标单击来创建【节点】。
2、创建流程【连线】。点击点击【控件栏】中的【连线】按钮后,将鼠标移动到起始【节点】,按下鼠标左键不放,拖动鼠标直到目标【节点】后释放。
连线必须发送在两个流程【节点】之间,在鼠标移动过程中即可以看到自按下鼠标点到鼠标指针间连线出现。
3、单选。点击点击【控件栏】中的【选择】按钮后,进入选择状态;通过鼠标单击目标来选择【节点】或【连线】,被选中的控件会出现红色光晕。
4、多选、反选、全选。进入选择状态后,通过按住【Ctrl】单击进行多选、反选,【Ctrl+a】进行全选。
5、框选。进入选择状态后,在画布的空白处按下鼠标不放,拖动鼠标,在按下鼠标点到鼠标指针间会出现一个变化的选择框,释放鼠标完成选择,
则被包含在选择框范围内的【节点】或【连线】会被选中,出现红色光晕。
6、取消选择。单击画布的空白处,可以取消选择,空间的红色光晕消失。
7、拖拽。在【节点】上按下鼠标并拖动,释放鼠标即完成拖拽。【节点】属性变化时相关的连线会自动调整,【连线】不能单独拖拽。
8、团体移动。多选或全选后,在任一选择的【节点】或【连线】上按下鼠标不放,可以自由拖拽移动选择的全部对象。
9、微距移动。多选或全选后,通过按下方向键来向上、下、左、右移动选择的【节点】或【连线】。
10、删除控件。选择【节点】或【连线】后,按下【Delete】或【Backspace】进行删除,控件将会从画布中消失。
二、编辑功能
1、对齐。选择【节点】或【连线】后,点击工具栏中的对齐按钮,完成【节点】直接的位置对齐,对其操作对【连线】不起作用。
2、调整间距。选择【节点】或【连线】后,点击工具栏中的【横等距】、【纵等距】按钮。
3、网格对齐、显示网格。
4、编辑文字。双击【节点】或【连线】激活文字输入框,或者选择【节点】或【连线】后,按下【Enter】键激活文字输入框,完成输入后按下【Enter】或移出光标即完成文字编辑。
4、导入、导出。
5、自动排列。
三、鹰眼功能
1、实时鹰眼同步。画布中的图像变化会立即呈现在右下方的小视图中。小视图中的红色矩形视区的位置变化时,画布会移动到对应的视区位置。
2、最小化、最大化小地图。