2008-04-16

原创：基于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)
  • 描述: 源码示例
  • 下载次数: 528
  • 7bcc33ba-91a1-3846-91b6-85209d525354-thumb
  • 描述: 操作截图，其中一条线正在绘制之中
  • 大小: 6.4 KB
  • 查看次数: 282
评论
鹤惊昆仑 2008-04-21
dojo的gfx封装了canvas,svg,silverlight,vml几种渲染途径。功能很好，很强大。。
zhengjing01 2008-04-19
支持一下，
可以看看addflow这个组件进行更好的完善,
gwallan 2008-04-17
顶楼主!
我之前实现过一个类似这样的图形，不过是基于DOJO的。之所以用它是考虑到它里面已经提供了一些很丰富的图形器件，并且能自动识别当前浏览器的类型以便于使用何种引擎来绘制图形
agile_boy 2008-04-17
http://prototype-graphic.xilinus.com/
也不错，不过本人没有实践过。
xyz20003 2008-04-16
excanvas也是靠svg和vml，canvas实现的。
它连arcTo都不支持，搞得很多基于它的图表都没有饼图。

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

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

另外www.mxgraph.com这里的demo太绚丽了，不过不是免费的。
fins 2008-04-16
看爱楼主对canvas研究很多啊
我还以前也没研究过呢 呵呵
楼主能不能推荐一点资料啊 以及 混合canvas svg vml使之能够跨浏览器
我觉得 google到的那些都不够好
笨笨狗 2008-04-16
xyz20003 写道
只是这样你就只能把箭头放在连线的中间了。


没错，我也是故意放到中间的，因为需要有个地方来点击选择这条线：）
xyz20003 2008-04-16
只是这样你就只能把箭头放在连线的中间了。
xyz20003 2008-04-16
呵呵~，有意思，你这个倒方便了，让rect把line遮住了就不用计算与边的交点了。我还真没想到。
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论

笨笨狗
搜索本博客
存档
最新评论