首先在网上找到了这样一篇文章,用于制作简单的流程设计软件的基本架构
http://scriptfans.iteye.com/blog/183163
刚才在首页看到这么个帖子 图形间连线算法 ,说来也巧,最近自己也在做这么个玩意儿,就是在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是个好玩的东西,希望大家能关注下,有兴趣的可以移驾这里看看:
这里有个网站里边有很多不错的流程设计器,但是可能是收费的http://www.jgraph.com/jgraph5.html
]
http://draw2d.org/draw2d/examples_all
多谢评论
http://xyz20003.iteye.com/blog/184345
分享到:
相关推荐
JBPM Web流程设计器,用js+extjs画的jbpm流程设计器,与eclipse插件类似,可以进行自定义。
jbpm4整合流程例子及附代web流程设计器可以进行流程设计
一个用JavaScript 实现的web流程设计器,可用于Web OA定制工作流,欢迎下载!
学习了咖啡兔的damo后剥离出来的,相当精简的web流程设计器(5.19.0版的哦),直接部署就能用,想嵌入自己项目的童鞋,把上面的配置和代码搬到自己项目稍微改改文件路径就行啦,完全是干货。
基于Flex的Web流程设计器开发
基于web的流程设计器,jsplumb+jqueryUI实现,支持拖拽功能,支持主流浏览器,可用于二次开发。
web流程设计器extjs做的design
springboot2.1整合activiti5.2,web流程设计器,跑起来直接可用,终极版整合,去掉了其它整合版的很多bug
Activiti工作流整合Web流程设计器,Activiti工作流整合Web流程设计器
Activiti的Web流程图设计器,BPMN-JS也可在官网下载并配置,这里压缩包是配置好的 1、需要提前下载好Node.js(中文官网连接:http://nodejs.cn/),傻瓜式安装。 2、解压后在bpmnjs目录打开dos命令窗口,输入npm ...
NULL 博文链接:https://2621380266.iteye.com/blog/1774767
demo里整合了web流程设计器。可直接导入eclipse。导入后先执行程序生成activiti所需要的25张表(CreateTable.java),然后配置数据库连接后,启动项目即可。
分享个自己写的WEB流程设计器。基于jquery, raphael实现,采用MVC框架backbone组织代码,参考了网上的myflow(不知来源),codiqa上的设计器。不过,很抱歉的是,目前不能画折线,只作为分享、学习用,有需要的可以...
非自己编写,所有插件都收集于其它网站,是从网上down下来觉得样子还行就分享出来 另外推荐一款http://jsplumbtoolkit.com/jquery/demo.html 这个也不错可以去看下
web设计器--设计流程图(raphael)源码myflow.js,可实现在线设计流程图,也可以根据后台数据生成前台流程图
将Orchestra Designer部署到一款web容器中,例如Tomcat、JBoss等。下面以Tomcat为例,说明部署好的Orchestra Designer的目录结构。 apache-tomcat-6.2.20 |__webapps |__OrchestraDesigner.war 在浏览器中打开...
可视化流程设计器,基于jQuery和Raphaël ,兼容性强,使用方便,扩展性强。经过一夜的努力反编译了一位大神的代码,整理了整体思路并添加注释。 具体描述可在我博客中找到。 10分确实有点贵,但是绝对超值,而且我...