林炳文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不断画椭圆、直线箭头、方框等。
画好之后,添加文字,给方框添加右键点击事件
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="smartMenu.css" rel="stylesheet">
<script src="jquery-1.8.1.min.js"></script>
<script src="jQuery.fontFlex.js"></script>
<script src="jquery-smartMenu.js"></script>
<script src="raphael-min.js"></script>
<script src="jQuery.fontFlex.js"></script>
<style>
body div{ background:#333333;}
#paperBox1{ background:#70AD47;}
.exp1 {color:#FFFFFF;line-height:80px;}
rect{cursor:pointer}
text{cursor:pointer}
#spinner{ position:absolute;
left:10px;top:10px;}
</style>
</head>
<body>
<div>
<h1 class="exp1">
<center>任务计划流程</center>
</h1>
<!-- 在这上面画图 -->
<div id="