web流程图设计器 flex版（一）

公司项目中需要一个web版的流程图设计器，来对业务处理流程进行定义和过程展现，考虑到浏览器的兼容性，最终选择用Flex开发。最近刚刚完成基本功能开发，发出来给大家瞧瞧，希望大家能多给点意见和指导。

 

 

 

本版本的web流程图设计器，使用as3.0开发，实现内容如下：

一、基本功能:
1、创建流程【节点】。点击【控件栏】中的【节点】按钮后，在画布区的空白处按下鼠标单击来创建【节点】。
2、创建流程【连线】。点击点击【控件栏】中的【连线】按钮后，将鼠标移动到起始【节点】，按下鼠标左键不放，拖动鼠标直到目标【节点】后释放。
连线必须发送在两个流程【节点】之间，在鼠标移动过程中即可以看到自按下鼠标点到鼠标指针间连线出现。
3、单选。点击点击【控件栏】中的【选择】按钮后，进入选择状态；通过鼠标单击目标来选择【节点】或【连线】，被选中的控件会出现红色光晕。
4、多选、反选、全选。进入选择状态后，通过按住【Ctrl】单击进行多选、反选，【Ctrl+Shift+a】进行全选。
5、框选。进入选择状态后，在画布的空白处按下鼠标不放，拖动鼠标，在按下鼠标点到鼠标指针间会出现一个变化的选择框，释放鼠标完成选择，
则被包含在选择框范围内的【节点】或【连线】会被选中，出现红色光晕。
6、取消选择。单击画布的空白处，可以取消选择，空间的红色光晕消失。
7、拖拽。在【节点】上按下鼠标并拖动，释放鼠标即完成拖拽。【节点】属性变化时相关的连线会自动调整，【连线】不能单独拖拽。
8、团体移动。多选或全选后，在任一选择的【节点】或【连线】上按下鼠标不放，可以自由拖拽移动选择的全部对象。
9、微距移动。多选或全选后，通过按下方向键来向上、下、左、右移动选择的【节点】或【连线】。
10、删除控件。选择【节点】或【连线】后，按下【Delete】或【Backspace】进行删除，控件将会从画布中消失。

 

二、编辑功能
1、对齐。选择【节点】或【连线】后，点击工具栏中的对齐按钮，完成【节点】直接的位置对齐，对其操作对【连线】不起作用。
2、调整间距。选择【节点】或【连线】后，点击工具栏中的【横等距】、【纵等距】按钮。
3、网格对齐、显示网格。
4、编辑文字。双击【节点】或【连线】激活文字输入框，或者选择【节点】或【连线】后，按下【Enter】键激活文字输入框，完成输入后按下【Enter】或移出光标即完成文字编辑。
4、导入、导出。
5、自动排列。

 

三、鹰眼功能
1、实时鹰眼同步。画布中的图像变化会立即呈现在右下方的小视图中。小视图中的红色矩形视区的位置变化时，画布会移动到对应的视区位置。
2、最小化、最大化小地图。