Web流程图绘制使用raphael

最新推荐文章于 2024-06-26 13:49:19 发布

置顶

Evankaka

最新推荐文章于 2024-06-26 13:49:19 发布

阅读量2.3w

点赞数 6

分类专栏： Js/JQuery/Ajax 文章标签： raphael web 流程图

本文链接：https://blog.csdn.net/evankaka/article/details/48439017

版权

本文介绍了如何利用Raphael库来绘制Web流程图。通过结合鼠标右键菜单插件和字体大小调整插件，实现了流程图的绘制和交互功能。流程图支持点击方框触发后台程序，提供了详细的代码实现和最终效果展示。

摘要由CSDN通过智能技术生成

林炳文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="