原创：基于Prototype，利用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导航条

评论

15 楼 woshi555bin 2016-05-11  

14 楼 czwlucky 2009-02-06  

效果确实不错！

13 楼 SoloTerran 2008-11-15  

您对这方面有研究，为何不写个简略的教程？

12 楼 zqc53 2008-07-09  

http://draw2d.org/draw2d/

目前项目在用，除了布局外其他感觉都很不错。

11 楼 Patrick 2008-07-04  

鹤惊昆仑 写道

dojo的gfx封装了canvas,svg,silverlight,vml几种渲染途径。功能很好，很强大。。

请问性能如何？会不会有内存泄露的问题呢？

10 楼 鹤惊昆仑 2008-04-21  

dojo的gfx封装了canvas,svg,silverlight,vml几种渲染途径。功能很好，很强大。。

9 楼 zhengjing01 2008-04-19  

支持一下，
可以看看addflow这个组件进行更好的完善,

8 楼 gwallan 2008-04-17  

顶楼主!
我之前实现过一个类似这样的图形，不过是基于DOJO的。之所以用它是考虑到它里面已经提供了一些很丰富的图形器件，并且能自动识别当前浏览器的类型以便于使用何种引擎来绘制图形

7 楼 agile_boy 2008-04-17  

http://prototype-graphic.xilinus.com/
也不错，不过本人没有实践过。

6 楼 gyj129129 2008-04-17  

挺不错的...

5 楼 xyz20003 2008-04-16  

excanvas也是靠svg和vml，canvas实现的。
它连arcTo都不支持，搞得很多基于它的图表都没有饼图。

现在来说ie只支持vml，不支持svg,canvas，它是最大的拦路虎，还是看看ie8是不是支持svg再说吧。vml连ms自己都不支持了，要不要学习vml是个大问题。

要想跨平台画线，现在flash是王道。

另外www.mxgraph.com这里的demo太绚丽了，不过不是免费的。

4 楼 fins 2008-04-16  

看爱楼主对canvas研究很多啊
我还以前也没研究过呢 呵呵 
楼主能不能推荐一点资料啊 以及 混合canvas svg vml使之能够跨浏览器
我觉得 google到的那些都不够好

3 楼 笨笨狗 2008-04-16  

xyz20003 写道

只是这样你就只能把箭头放在连线的中间了。

没错，我也是故意放到中间的，因为需要有个地方来点击选择这条线：）

2 楼 xyz20003 2008-04-16  

只是这样你就只能把箭头放在连线的中间了。

1 楼 xyz20003 2008-04-16  

呵呵~，有意思，你这个倒方便了，让rect把line遮住了就不用计算与边的交点了。我还真没想到。