论坛首页 Web前端技术论坛

原创:基于Prototype,利用Canvas绘图实现的web流程图设计器(原型)

浏览 30311 次
该帖已经被评为精华帖
作者 正文
   发表时间:2008-04-16   最后修改:2010-07-12
刚才在首页看到这么个帖子 图形间连线算法 ,说来也巧,最近自己也在做这么个玩意儿,就是在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导航条
  • 描述: 操作截图,其中一条线正在绘制之中
  • 大小: 6.4 KB
   发表时间:2008-04-16  
呵呵~,有意思,你这个倒方便了,让rect把line遮住了就不用计算与边的交点了。我还真没想到。
0 请登录后投票
   发表时间:2008-04-16  
只是这样你就只能把箭头放在连线的中间了。
0 请登录后投票
   发表时间:2008-04-16  
xyz20003 写道
只是这样你就只能把箭头放在连线的中间了。


没错,我也是故意放到中间的,因为需要有个地方来点击选择这条线:)
0 请登录后投票
   发表时间:2008-04-16  
看爱楼主对canvas研究很多啊
我还以前也没研究过呢 呵呵 
楼主能不能推荐一点资料啊 以及 混合canvas svg vml使之能够跨浏览器
我觉得 google到的那些都不够好
0 请登录后投票
   发表时间:2008-04-16  
excanvas也是靠svg和vml,canvas实现的。
它连arcTo都不支持,搞得很多基于它的图表都没有饼图。

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

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

另外www.mxgraph.com这里的demo太绚丽了,不过不是免费的。
0 请登录后投票
   发表时间:2008-04-17  
http://prototype-graphic.xilinus.com/
也不错,不过本人没有实践过。
0 请登录后投票
   发表时间:2008-04-17  
顶楼主!
我之前实现过一个类似这样的图形,不过是基于DOJO的。之所以用它是考虑到它里面已经提供了一些很丰富的图形器件,并且能自动识别当前浏览器的类型以便于使用何种引擎来绘制图形
0 请登录后投票
   发表时间:2008-04-19  
支持一下,
可以看看addflow这个组件进行更好的完善,
0 请登录后投票
   发表时间:2008-04-21  
dojo的gfx封装了canvas,svg,silverlight,vml几种渲染途径。功能很好,很强大。。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics