Web流程图绘制使用raphael

          林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka

          摘要：本文要实现一个流程图的绘制，最终的目标是实现流程图的自动绘制，并可进行操作，直接点击流程图上对应的方框就可以让后台跑相应的程序。

本文工程免费下载

一、插件介绍

   1、图形绘制raphael

      其中图形绘制使用了raphael，下载地址：http://raphaeljs.com，它的功能非常强大。

     中文帮助教程：http://html5css3webapp.com/raphaelApi.htm#Paper.text

其中有一些DEMO如下：

    

  2、鼠标右键菜单栏弹出smartMenu

    教程及下载地址： http://www.cnblogs.com/ATree/archive/2011/06/30/jQuery-smartMenu-javascript.html

3、字体大小变化利器插件jquery.fontFlex

    随着页面的放大或者缩小，字体也跟随着放大或者缩小。当然，可以设置一个最大值，一个中间值和一个最小值。此效果多半应用于响应式页面中，或者需要适用多版本终端浏览器的页面中

二、使用

1、首先，来看看要实现的流程图的样子。

2、代码实现

    这里其实就是把上面的插件都引用进来，然后其它的就是用JS不断画椭圆、直线箭头、方框等。

画好之后，添加文字，给方框添加右键点击事件

	

		

			任务计划流程
		
		
		

		
		
		
		
		
		
	

最终效果展示：

右键点击：

方法调用后结果：

本文工程免费下载