Web流程图绘制使用raphael
- - Web前端 - ITeye博客摘要：本文要实现一个流程图的绘制，最终的目标是实现流程图的自动绘制，并可进行操作，直接点击流程图上对应的方框就可以让后台跑相应的程序. 1、图形绘制raphael. 其中图形绘制使用了raphael，下载地址： http://raphaeljs.com，它的功能非常强大. 中文帮助教程： http://html5css3webapp.com/raphaelApi.htm#Paper.text.
Web流程图绘制使用raphael
标签：
web
流程图
raphael
| 发表时间：2015-09-29 00:33 | 作者：天梯梦
出处：http://www.iteye.com
摘要：本文要实现一个流程图的绘制，最终的目标是实现流程图的自动绘制，并可进行操作，直接点击流程图上对应的方框就可以让后台跑相应的程序。
一、插件介绍
1、图形绘制raphael
其中图形绘制使用了raphael，下载地址： http://raphaeljs.com，它的功能非常强大。
中文帮助教程： http://html5css3webapp.com/raphaelApi.htm#Paper.text
其中有一些DEMO如下：
Web流程图绘制使用raphael
2、鼠标右键菜单栏弹出smartMenu
教程及下载地址： 【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)
3、字体大小变化利器插件jquery.fontFlex
随着页面的放大或者缩小，字体也跟随着放大或者缩小。当然，可以设置一个最大值，一个中间值和一个最小值。此效果多半应用于响应式页面中，或者需要适用多版本终端浏览器的页面中
二、使用
1、首先，来看看要实现的流程图的样子。
Web流程图绘制使用raphael
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="paper">
<div id="paperBox1"></div>
<div id="spinner"></div>
</div>
</div>
</body>
<script type="text/javascript">
$('h1').fontFlex(10, 120, 40);//字体大小自适应
console.log(Raphael.svg);//查看是否支持Raphael,true为支持
var window_w = $(window).width();//浏览器窗口可见宽度
var window_h = $(window).height();////浏览器窗口可见高度
var rect_w = window_w / 8;//矩形的宽
var rect_h = window_h / 20;//矩形的高
var rect_r = rect_w / 15;//矩形圆角
var arrow_h = 35; // 箭头高
console.log(window_w);
console.log(window_h);
console.log(rect_w);
console.log(rect_h);
//创建一个画布
var paper = new Raphael("paper",window_w,window_h + 200);
//直线箭头
var arrow1 = paper.path("M21.786,12.876l7.556-4.363l-7.556-4.363v2.598H2.813v3.5h18.973V12.876z" ).attr({fill: "#5B9BD5", stroke: "none"});
var arrow2 = arrow1.clone();
var arrow3_1_1 = arrow1.clone();
var arrow3_1_2 = arrow1.clone();
var arrow3_2_1 = arrow1.clone();
var arrow3_2_2 = arrow1.clone();
var arrow3_2_3 = arrow1.clone();
var arrow3_3_1 = arrow1.clone();
var arrow3_3_2 = arrow1.clone();
var arrow3_3_3 = arrow1.clone();
var arrow3_4_1 = arrow1.clone();
var arrow3_4_2 = arrow1.clone();
var arrow3_4_3 = arrow1.clone();
var arrow3 = arrow1.clone();
var arrow4 = arrow1.clone();
var arrow5 = arrow1.clone();
var arrow6 = arrow1.clone();
var attr = {
fill: "#70AD47",//填充
stroke: "none",//边框
"stroke-width": 1,
"stroke-linejoin": "round"
};
//画圆角矩形
var rect1 = paper.rect((window_w-rect_w)*0.5,0,rect_w,rect_h,rect_r).attr(attr);
var rect2 = moveRectToRectDown(paper,rect1);
var rect3_1_1 = paper.rect((window_w-rect_w)*0.2,( arrow_h + rect_h ) * 2.5,rect_w,rect_h,rect_r).attr(attr);
var rect3_1_2 = moveRectToRectDown(paper,rect3_1_1);
var rect3_1_3 = moveRectToRectDown(paper,rect3_1_2);
var rect3_2_1 = paper.rect((window_w-rect_w)*0.4 ,( arrow_h + rect_h ) * 2.5,rect_w,rect_h,rect_r).attr(attr);
var rect3_2_2 = moveRectToRectDown(paper,rect3_2_1);
var rect3_2_3 = moveRectToRectDown(paper,rect3_2_2);
var rect3_2_4 = moveRectToRectDown(paper,rect3_2_3);
var rect3_3_1 = paper.rect(window_w-(window_w-rect_w)*0.4-rect_w,( arrow_h + rect_h ) * 2.5,rect_w,rect_h,rect_r).attr(attr);
var rect3_3_2 = moveRectToRectDown(paper,rect3_3_1);
var rect3_3_3 = moveRectToRectDown(paper,rect3_3_2);
var rect3_3_4 = moveRectToRectDown(paper,rect3_3_3);
var rect3_4_1 = paper.rect(window_w-(window_w-rect_w)*0.2-rect_w,( arrow_h + rect_h ) * 2.5,rect_w,rect_h,rect_r).attr(attr);
var rect3_4_2 = moveRectToRectDown(paper,rect3_4_1);
var rect3_4_3 = moveRectToRectDown(paper,rect3_4_2);
var rect3_4_4 = moveRectToRectDown(paper,rect3_4_3);
//文字描述
insertRectText(paper,rect1,"1.等待激活");
insertRectText(paper,rect2,"2.日切");
insertRectText(paper,rect3_1_1,"下载文件信息信息");
//直接箭头移动
moveArrowToRectDown(rect1,arrow1,90,2,null,null);
moveArrowToRectDown(rect2,arrow2,90,2,null,null);
moveArrowToRectDown(rect3_1_1,arrow3_1_1,90,2,null,null);
moveArrowToRectDown(rect3_1_2,arrow3_1_2,90,2,null,null);
moveArrowToRectDown(rect3_2_1,arrow3_2_1,90,2,null,null);
//moveArrowToRectDown(rect3_2_2,arrow3_2_2,90,2,null);
moveArrowToRectDown(rect3_2_3,arrow3_2_3,90,2,null,null);
moveArrowToRectDown(rect3_3_1,arrow3_3_1,90,2,null,null);
moveArrowToRectDown(rect3_3_2,arrow3_3_2,90,2,null,null);
moveArrowToRectDown(rect3_3_3,arrow3_3_3,90,2,null,null);
moveArrowToRectDown(rect3_4_1,arrow3_4_1,90,2,null,null);
moveArrowToRectDown(rect3_4_2,arrow3_4_2,90,2,null,null);
moveArrowToRectDown(rect3_4_3,arrow3_4_3,90,2,null,null);
//画边框
var rectbox3 = drawRectToRect(paper,rect3_1_1,rect3_4_4,( arrow_h + rect_h ) * 0.5);
var rectbox3_1 = drawRectToRect(paper,rect3_1_1,rect3_1_3,( arrow_h + rect_h ) * 0.15);
var rectbox3_2_1 = drawRectToRect(paper,rect3_2_1,rect3_2_2,( arrow_h + rect_h ) * 0.05);
var rectbox3_2_2 = drawRectToRect(paper,rect3_2_3,rect3_2_4,( arrow_h + rect_h ) * 0.05);
var rectbox3_3 = drawRectToRect(paper,rect3_3_1,rect3_3_4,( arrow_h + rect_h ) * 0.15);
//对应从积分计算到完
moveArrowToRectDown(rectbox3,arrow3,90,2,null,18);//最大外框下方箭头
moveArrowToRectDown(rectbox3_2_1,arrow3_2_2,90,1.1,-8,5);
var xx = Math.round($(rectbox3.node).attr("y"))*1+$(rectbox3.node).attr("height")*1+15+arrow_h;
console.log(xx);
var rect4 = paper.rect((window_w-rect_w)*0.5, xx ,rect_w,rect_h,rect_r).attr(attr);
moveArrowToRectDown(rect4,arrow4,90,2,null,null);
var rect5_1 = paper.rect((window_w-rect_w)*0.4 ,( arrow_h + rect_h ) * 8.5 ,rect_w,rect_h,rect_r).attr(attr);
var rect5_2 = paper.rect(window_w-(window_w-rect_w)*0.4-rect_w,( arrow_h + rect_h ) * 8.5,rect_w,rect_h,rect_r).attr(attr);
var rectbox5 = drawRectToRect(paper,rect5_1,rect5_2,( arrow_h + rect_h ) * 0.3);
moveArrowToRectDown(rectbox5,arrow5,90,2,null,18);//外框下方箭头
var rect6 = paper.rect((window_w-rect_w)*0.5 ,( arrow_h + rect_h ) * 10 ,rect_w,rect_h,rect_r).attr(attr);
moveArrowToRectDown(rect6,arrow6,90,2,null,null);//外框下方箭头
var rect6 = paper.rect((window_w-rect_w)*0.5 ,( arrow_h + rect_h ) * 11 ,rect_w,rect_h,rect_r).attr(attr);
//arrow2.transform("t650,300r90s4")
//给矩形增加居中的文字
function insertRectText(root,rectangle,str){
var x = Math.round($(rectangle.node).attr("x"));
var y = Math.round($(rectangle.node).attr("y"));
var w = $(rectangle.node).attr("width");
var h = $(rectangle.node).attr("height");
var textStr = root.text(x + w / 2,y + h / 2,str).attr({fill:"#FFFFFF"});
textStr.attr({
"fill":"#FFFFFF",
"font-size":"15px",
});
rectangle.data("cooperative", textStr);
}
//将箭头移动到矩形下方
function moveArrowToRectDown(rectangle,arrowbox,angle,scale,offset_x,offset_y){
var angle = angle == null ?0:angle; //默认旋转90度
var scale = scale == null ?1:scale;
var offset_y =offset_y ==null?0:offset_y;
var offset_x =offset_x ==null?0:offset_x;
var x = Math.round($(rectangle.node).attr("x"));
var y = Math.round($(rectangle.node).attr("y"));
var w = $(rectangle.node).attr("width");
var h = $(rectangle.node).attr("height");
console.log("x=" + x);
console.log("y=" + y);
console.log("w=" + w);
console.log("h=" + h);
var xNew = x + w*0.5 -8*scale + offset_x;
var yNew = y + h*1 + offset_y;
var pos = "t"+ xNew + "," + yNew + 'r' + angle + 's' + scale;
console.log(pos);
arrowbox.transform(pos);
}
//将一个矩形移动到另一个矩形下方
function moveRectToRectDown(root,rectangle){
var x = Math.round($(rectangle.node).attr("x"));
var y = Math.round($(rectangle.node).attr("y"));
var w = Math.round($(rectangle.node).attr("width"));
var h = Math.round($(rectangle.node).attr("height"));
var r = $(rect1.node).attr("rx");
var rectNew = root.rect(x,y + h + arrow_h,w,h,r).attr(attr);
return rectNew;
}
function drawRectToRect(root,rectangle1,rectangle2,offset){
var x1 = Math.round($(rectangle1.node).attr("x"));
var y1 = Math.round($(rectangle1.node).attr("y"));
var x2 = Math.round($(rectangle2.node).attr("x"));
var y2 = Math.round($(rectangle2.node).attr("y"));
var w2 = Math.round($(rectangle2.node).attr("width"));
var h2 = Math.round($(rectangle2.node).attr("height"));
x2 += w2;
y2 += h2;
return drawRect(root,x1,y1,x2,y2,offset);
}
//在一个矩形外画矩形,传入左上角和右下角的位置
function drawRect(root,x1,y1,x2,y2,offset){
var offset =offset == null?0:offset;
var x = x1 - offset;
var y = y1 - offset;
var w = x2 - x1 + 2*offset;
var h = y2 - y1+ 2*offset;
var rectbox = root.rect(x,y,w,h).attr({stroke: "#F4B183","stroke-width": 1,});
return rectbox;
}
//更新圆盘
var spinner;
function spinner(holderid, R1, R2, count, stroke_width, colour) {
var sectorsCount = count || 12,
color = colour || "#fff",
width = stroke_width || 15,
r1 = Math.min(R1, R2) || 35,
r2 = Math.max(R1, R2) || 60,
cx = r2 + width,
cy = r2 + width,
spinner = Raphael(holderid, r2 * 2 + width * 2, r2 * 2 + width * 2),
sectors = [],
opacity = [],
beta = 2 * Math.PI / sectorsCount,
pathParams = {stroke: color, "stroke-width": width, "stroke-linecap": "round"};
Raphael.getColor.reset();
for (var i = 0; i < sectorsCount; i++) {
var alpha = beta * i - Math.PI / 2,
cos = Math.cos(alpha),
sin = Math.sin(alpha);
opacity[i] = 1 / sectorsCount * i;
sectors[i] = spinner.path([["M", cx + r1 * cos, cy + r1 * sin], ["L", cx + r2 * cos, cy + r2 * sin]]).attr(pathParams);
if (color == "rainbow") {
sectors[i].attr("stroke", Raphael.getColor());
}
}
var tick;
(function ticker() {
opacity.unshift(opacity.pop());
for (var i = 0; i < sectorsCount; i++) {
sectors[i].attr("opacity", opacity[i]);
}
// r.safari();
tick = setTimeout(ticker, 1000 / sectorsCount);
})();
return function () {
clearTimeout(tick);
spinner.remove();
};
}
rect1.node.onclick = function () {
rect1.attr("fill", "red");
var x = Math.round($(rect1.node).attr("x"));
var y = Math.round($(rect1.node).attr("y"));
var w = $(rect1.node).attr("width");
var h = $(rect1.node).attr("height");
var xx = (x*1 + w*1)+"px";
var yy = (80 + y+ h/2 -20 )+"px";
console.log("xx="+xx);
var remove = spinner("spinner",10, 20, 8, 5, "#FFFF00");
$('#spinner').css("left",xx);
$('#spinner').css("top",yy);
};
function change(){
var x = Math.round($(rect1.node).attr("x"));
var y = Math.round($(rect1.node).attr("y"));
var w = $(rect1.node).attr("width");
var h = $(rect1.node).attr("height");
var xx = (x*1 + w*1)+"px";
var yy = (80 + y+ h/2 -20 )+"px";
console.log("xx="+xx);
//remove();
var remove = spinner("spinner",10, 20, 8, 5, "#FFFF00");
$('#spinner').css("left",xx);
$('#spinner').css("top",yy);
}
var imageMenuData = [
[{
text: "方法一",
func: function() {
alert("方法一")
rect1.attr("fill", "blue");
// remove();
change()
}
}, {
text: "方法二",
func: function() {
alert("方法二")
rect1.attr("fill", "yellow");
// remove();
change()
}
}],
[{
text: "方法三",
func: function() {
alert("方法三")
rect1.attr("fill", "#FF84FF");
// remove();
change()
}
}]
];
//增加右键菜单
$(rect1.node).smartMenu(imageMenuData, {
name: "image"
});
$("rect").smartMenu(imageMenuData, {
name: "image"
});
$('text').fontFlex(15, 50, 90);//字体大小自适应
//当浏览器窗口大小改变时，设置显示内容的高度
window.onresize=function(){
//paper.safari()
}
</script>
</html>
最终效果展示：
Web流程图绘制使用raphael
Web流程图绘制使用raphael
右键点击：
Web流程图绘制使用raphael
方法调用后结果：
Web流程图绘制使用raphael
原文： http://blog.csdn.net/evankaka/article/details/48439017
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
相关 [web 流程图 raphael] 推荐：
Raphael调研例子
- - JavaScript - Web前端 - ITeye博客Raphael 是一个用于在网页中绘制矢量图形的. 它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础，你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表，还可以绘制任意形状的图形，可以进行图表或图像的裁剪和旋转等复杂操作. Raphaël 是跨浏览器的矢量图形库，目前支持的浏览器包括： Firefox 3.0+，Safari 3.0+，Chrome 5.0+，Opera 9.5+ 以及 Internet Explorer 6.0+.
【转载】对Web开发人员极有帮助的10个流程图
- - HTML5研究小组摘要： 在做决策时，流程图是一个非常有用的工具，可以对某个问题给出一步接一步的解决方案. 流程图有助于可视化待解决的问题，故而可以让观察者理解流程，发现问题. 在做决策时，流程图是一个非常有用的工具，可以对某个问题给出一步接一步的解决方案. 和其他类型的图表一样，流程图有助于可视化待解决的问题，故而可以让观察者理解流程，或许也能发现瑕疵、瓶颈或者其他不明显的问题.
用raphael实现的jbpm4web流程设计器
- - Web前端 - ITeye博客最近准备自己根据raphael学习和网上查阅到得知识，实现一个jbpm4风格的web流程设计器. 有部分功能参考了CSDN网友 wow4464提供的一个控件连线的实例，下载地址： http://download.csdn.net/detail/wow4464/7549803. 连线的方式使用的是raphael拖拽的特性来实现的，发现在firefox下有问题，其他浏览器正常支持.
Web未死
- Sinan - GeekPark 捕风捉影App的极限已经浮现，而Web则是突破此极限，推动下一个数字时代革命的起点. 距离美国《连线》杂志发表《Web已死，互联网永生》这篇文章还不到一年的时间，业界为Web平反的声音渐起. 2010年1月，苹果发布iPad，紧随其后在6月又发布了iPhone4. 没有人质疑过苹果的iTunes+App的商业模式，App可谓如日中天.
web的演变
- 酿泉 - 前端观察这是一个基于GAE的项目，有mgmt design、GOOD、Hyperakt和Vizzuality开发，也有Google chrome团队的参与，记录了浏览器与互联网技术的演变. 不多介绍，直接去看看吧：Evolution Of Web. 值得一提的是，这个项目的代码很不错，值得学习一下.
Web Service入门
- - 博客 - 伯乐在线本文来自文章作者 @Jeremy黄国华 的投稿. 伯乐在线也欢迎其他朋友投稿，投稿时记得留下您的新浪微博账号哦~. 目前对Web Service没有统一的定义，定义一：Web Service是自包含的、模块化的应用程序，它可以在Web中被描述、发布、查找以及调用. 定义二：Web Service是基于网络的、分布式的模块化组件，它执行特定的任务，遵守具体的技术规范，这些规范使得Web Service能与其他兼任的组件进行操作.
Web Apps来袭
- - HTML5研究小组如同历史上任何一次互联网基础标准的变化都会在随后几年中带来应用创新的大爆发一样，当HTML5在2011年逐渐被主流厂商所接受之后，围绕Web Apps领域的创新风暴正山雨欲来. 2012年1月12日，老牌传媒集团《金融时报》（Financial Times，以下简称FT）宣布收购为其开发移动Web App的研发公司Assanka ，这样，FT将不再以外包的形式雇佣Assanka为其打造移动Web App，而可以直接让它在内部进行开发.
Google 的 Web Desinger
- - 极客公园-GeekPark[核心提示]Google 的免费 Web 设计工具虽然现在主要目的是为广告设计，今后会不会成为 Chrome 应用的开发工具. 听到 Google 推出了一个名为 Google Web Designer 的网页设计还有点惊讶. 虽然 Google 是 Web 技术的大力倡导者，毕竟自己严重依赖这个平台，但市面上相关的产品太多了，从专业的开发工具到小白的所见即所得软件数不胜数，还有 Adobe 这个专业玩家.