基于Prototype，利用Canvas绘图实现的web流程图设计器（原型）

基于Prototype，利用Canvas绘图实现的web流程图设计器（原型）

关键字: javascript prototype script.aculo.us canvas 流程图 web画线

刚才在首页看到这么个帖子 图形间连线算法 ，说来也巧，最近自己也在做这么个玩意儿，就是在web上拖放图标，然后连线，这段时间也算有点收获，实现了这么个玩意儿，发上来给大家看看，顺便征求点意见。附件是效果图和源码示例。

特点：
1、基于Prototype、Script.aculo.us，利用HTML5的标签Canvas实现，因为ie目前不支持这个，所以引入了google的excanvas库适配到VML，但是对于开发人员来说，api都是同一的一套，比较爽；

2、节点可动态生成、可拖放，并显示了拖放行为，比如不会拖出画板，也不会重叠在一起（这样对以后连线开了方便之门）；

3、绘制连线的时候，可根据鼠标移动，实时反映线段状态，拖动节点也能试试反映连线状态；

4、节点、连线都可响应鼠标点击选中事件，并可响应键盘delete键删除选中的元素（线段或节点）；

5、源码结构实现了OO封装以及经典的MVC模式，大大降低各部分耦合度。

绘图步骤：
1、您可以在右侧拖放一个项目到左侧的画板生成一个新方块（这个以后可以用漂亮的图标代替），在初始化的时候我已经加入了三个；

2、点击画板上方的“单向连线”按钮之后，即可点击起始节点，然后移动鼠标至结束节点再点击一下，即可在这两个节点间绘制有向线段。每次只能画一条线，画完了需要再次点击按钮重复绘制；

3、节点可拖动，但是不会被拖出画板，如果两个节点重叠了，那么不会允许放置在最终位置，而是弹回原始位置；

4、点击节点可选中当前节点，要选择线段的话必须点击中部的箭头处，被选中的元素以红色区分，此时可通过敲击键盘delete键删除此元素，而且，如果删除的是有连线的节点，此节点相关的连线都将被删除。

结语：这只是个原型，还有待完善，最大的问题还是对于OP9，连线中点的箭头显示还有问题，慢慢来吧，先放出来给大家看看，欢迎交流。如果大家有非直线连接图形的好算法，希望能提供出来，非常感谢！

顺便广告一下，昨天在je也发布了一个基于Canvas的仿Google动画导航条实现，可惜关注的人不多，我觉得canvas是个好玩的东西，希望大家能关注下，有兴趣的可以移驾这里看看：

基于Prototype和Canvas实现的仿Google导航条

• demo.rar (51.9 KB)
• 描述: 源码示例
• 下载次数: 710

• 
• 描述: 操作截图，其中一条线正在绘制之中
• 大小: 6.4 KB