首页 > 其他分享 >Web流程图绘制使用raphael

Web流程图绘制使用raphael

时间：2023-07-24 17:06:33浏览次数：34  
标签：Web attr raphael rect3 paper var null rect 流程图


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

一、插件介绍

1、图形绘制raphael

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

其中有一些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.οnresize=function(){  
            	//paper.safari()
            }  

</script>
</html>

 

最终效果展示：


Web流程图绘制使用raphael

Web流程图绘制使用raphael

右键点击：


Web流程图绘制使用raphael

方法调用后结果：


Web流程图绘制使用raphael


 

 

标签：Web,attr,raphael,rect3,paper,var,null,rect,流程图
From： https://blog.51cto.com/u_8895844/6836751

相关文章

  • 【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)
    DEMO: http://sources.ikeepstudying.com/menu-mail-qq/ 一、这是什么样的一个插件我们都知道，默认状态下，我们右键web页面，会出现一个上下文菜单，例如下图：【jQuery】smartMenu右键自定义上下文菜单插件(似webQQ)但是，浏览器默认的右键选项有时候并不是我们所需要的，......
  • eWebEditor实现word图片自动转存
    ​图片的复制无非有两种方法，一种是图片直接上传到服务器，另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例：打开umeditor.js，找到UM.plugins['autoupload']，然后找到autoUploadHandler方法，注释掉其中的代码。加入下面的代码：//判断剪贴......
  • 实现在Vue应用中播放实时视频，使用WebRTC技术和Canvas API来完成
    要实现在Vue应用中播放实时视频，您需要使用WebRTC技术和CanvasAPI来完成。下面是基本的实现步骤：1.使用getUserMediaAPI获取用户的摄像头和麦克风访问权限；javascript复制代码navigator.mediaDevices.getUserMedia({video:true,audio:true}).then(function(stream){//......
  • ASP.NET实现Web网站本地化
    1、重写InitializeCulture方法。在Global.asax中的Application_BeginRequest获取或设置语言，每次页面的请求都首先运行这个方法，然后再运行具体页面的InitializeCulture重载方法。附上一张图，看看  1、重写InitializeCulture方法。在Global.asax中的Application_BeginRe......
  • WEB漏洞—文件操作之文件包含漏洞
    文件包含原理 ----传递一个参数（可以是一个文件），然后PHP脚本包含这个文件，则无论这个文件是什么格式，访问PHP脚本，传递参数的文件都能以PHP格式执行。本地文件包含测试 #本地创建一个1.php和shell.txt，代码如下#访问PHP脚本并且传递1.txt文件为参数，发现txt里的内容以php代码执行......
  • 【WebGL系列-01】获取WebGL上下文
    获取WebGL上下文获取上下文WebGL上下文是从<canvas>标签中获取到的，通过canvas对象的getContext()函数可以获取WebGLRenderingContext。跟据参数的不同，getContext()函数可以获取不同种类的渲染上下文。接口canvas.getContext(contextType:String,contextAttributes?:Objec......
  • 【WebGL系列-02】创建program上下文
    WebGL程序program对象的创建program对象由顶点着色器对象和片元着色器对象构成，因此，创建program对象包含了两部分，一个是着色器对象的创建，一个是program对象的创建。总体流程创建顶点着色器对象创建片元着色器对象创建program对象将顶点着色器和片元着色器添加到程序中将程......
  • 【WebGL系列-03】获取shader变量地址及赋值
    获取shader变量地址及赋值上一节创建了WebGL程序对象，创建好program对象后，对象中包含顶点着色器和片元着色器，着色器中含有变量，我们需要对其进行赋值后才能够进行绘制。着色器代码如下：constVSHADER_SOURCE=/*glsl*/`attributevec4a_Position;voidmain(){gl_P......
  • 【WebGL系列-04】清除缓冲区并绘制图形
    清除缓冲区并绘制图形前文中已经准备好了webgl程序和绘制所用的数据，但是在绘制图像之前，还要对画布进行处理。清除缓冲区由于图像的绘制是一帧一帧绘制，每一帧针对当前的状态，计算屏幕上每个像素的颜色，得到最终的绘制结果。这些状态被保存在一个叫帧缓冲区的地方。帧缓冲区不仅能......
  • CTFer成长记录——CTF之Web专题·bugku-eval
    一、题目链接https://ctf.bugku.com/challenges/detail/id/75.html?id=75二、解法步骤  打开网页是一段php代码，其中include"flag.php"提示可能有文件包含漏洞，接着使用了eval函数，那么可能存在命令执行漏洞。    先用system('ls')命令看看：?hello=system('ls'):......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99