码上快乐

相关内容   简体   繁体

Web流程图绘制使用raphael

本文转载自  查看原文  2020-03-13 10:17  1641    JavaScript

来源于  https://www.iteye.com/blog/justcoding-2246634

 

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

 

一、插件介绍

1、图形绘制raphael

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

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

其中有一些DEMO如下：

Web流程图绘制使用raphaelWeb流程图绘制使用raphael

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

教程及下载地址：【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)

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

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

 

二、使用

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

Web流程图绘制使用raphaelWeb流程图绘制使用raphael

 

2、代码实现

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

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

Html代码   收藏代码
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <link href="smartMenu.css" rel="stylesheet">  
  6. <script src="jquery-1.8.1.min.js"></script>  
  7. <script src="jQuery.fontFlex.js"></script>  
  8. <script src="jquery-smartMenu.js"></script>  
  9. <script src="raphael-min.js"></script>  
  10. <script src="jQuery.fontFlex.js"></script>  
  11.   
  12. <style>  
  13. body div{ background:#333333;}  
  14. #paperBox1{ background:#70AD47;}  
  15. .exp1 {color:#FFFFFF;line-height:80px;}   
  16. rect{cursor:pointer}  
  17. text{cursor:pointer}  
  18. #spinner{ position:absolute;  
  19. left:10px;top:10px;}   
  20. </style>  
  21. </head>  
  22. <body>  
  23.     <div>  
  24.         <h1 class="exp1">  
  25.             <center>任务计划流程</center>  
  26.         </h1>  
  27.         <!-- 在这上面画图 -->  
  28.         <div id="paper">  
  29.         <div id="paperBox1"></div>        
  30.         <div id="spinner"></div>          
  31.         </div>          
  32.     </div>  
  33. </body>  
  34. <script type="text/javascript">  
  35. $('h1').fontFlex(10, 120, 40);//字体大小自适应  
  36. console.log(Raphael.svg);//查看是否支持Raphael,true为支持  
  37. var window_w = $(window).width();//浏览器窗口可见宽度  
  38. var window_h = $(window).height();////浏览器窗口可见高度  
  39. var rect_w = window_w / 8;//矩形的宽  
  40. var rect_h = window_h / 20;//矩形的高  
  41. var rect_r = rect_w / 15;//矩形圆角  
  42. var arrow_h = 35; // 箭头高  
  43. console.log(window_w);  
  44. console.log(window_h);  
  45. console.log(rect_w);  
  46. console.log(rect_h);  
  47. //创建一个画布  
  48. var paper = new Raphael("paper",window_w,window_h + 200);    
  49. //直线箭头  
  50. 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"});  
  51. var arrow2 = arrow1.clone();  
  52. var arrow3_1_1 = arrow1.clone();  
  53. var arrow3_1_2 = arrow1.clone();  
  54.   
  55. var arrow3_2_1 = arrow1.clone();  
  56. var arrow3_2_2 = arrow1.clone();  
  57. var arrow3_2_3 = arrow1.clone();  
  58.   
  59. var arrow3_3_1 = arrow1.clone();  
  60. var arrow3_3_2 = arrow1.clone();  
  61. var arrow3_3_3 = arrow1.clone();  
  62.   
  63. var arrow3_4_1 = arrow1.clone();  
  64. var arrow3_4_2 = arrow1.clone();  
  65. var arrow3_4_3 = arrow1.clone();  
  66.   
  67. var arrow3 = arrow1.clone();  
  68. var arrow4 = arrow1.clone();  
  69. var arrow5 = arrow1.clone();  
  70. var arrow6 = arrow1.clone();  
  71.   
  72. var attr = {  
  73.                 fill: "#70AD47",//填充  
  74.                 stroke: "none",//边框  
  75.                 "stroke-width": 1,  
  76.                 "stroke-linejoin": "round"  
  77.             };  
  78. //画圆角矩形       
  79. var rect1 = paper.rect((window_w-rect_w)*0.5,0,rect_w,rect_h,rect_r).attr(attr);  
  80. var rect2 = moveRectToRectDown(paper,rect1);  
  81.   
  82. 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);  
  83. var rect3_1_2 = moveRectToRectDown(paper,rect3_1_1);  
  84. var rect3_1_3 = moveRectToRectDown(paper,rect3_1_2);  
  85.   
  86. 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);  
  87. var rect3_2_2 = moveRectToRectDown(paper,rect3_2_1);  
  88. var rect3_2_3 = moveRectToRectDown(paper,rect3_2_2);  
  89. var rect3_2_4 = moveRectToRectDown(paper,rect3_2_3);  
  90.   
  91.  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);  
  92.  var rect3_3_2 = moveRectToRectDown(paper,rect3_3_1);  
  93.  var rect3_3_3 = moveRectToRectDown(paper,rect3_3_2);  
  94.  var rect3_3_4 = moveRectToRectDown(paper,rect3_3_3);  
  95.    
  96.  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);  
  97.  var rect3_4_2 = moveRectToRectDown(paper,rect3_4_1);  
  98.  var rect3_4_3 = moveRectToRectDown(paper,rect3_4_2);  
  99.  var rect3_4_4 = moveRectToRectDown(paper,rect3_4_3);  
  100.   
  101. //文字描述  
  102. insertRectText(paper,rect1,"1.等待激活");  
  103. insertRectText(paper,rect2,"2.日切");  
  104. insertRectText(paper,rect3_1_1,"下载文件信息信息");  
  105.   
  106.   
  107. //直接箭头移动  
  108. moveArrowToRectDown(rect1,arrow1,90,2,null,null);  
  109. moveArrowToRectDown(rect2,arrow2,90,2,null,null);  
  110.   
  111. moveArrowToRectDown(rect3_1_1,arrow3_1_1,90,2,null,null);  
  112. moveArrowToRectDown(rect3_1_2,arrow3_1_2,90,2,null,null);  
  113.   
  114. moveArrowToRectDown(rect3_2_1,arrow3_2_1,90,2,null,null);  
  115. //moveArrowToRectDown(rect3_2_2,arrow3_2_2,90,2,null);  
  116. moveArrowToRectDown(rect3_2_3,arrow3_2_3,90,2,null,null);  
  117.   
  118. moveArrowToRectDown(rect3_3_1,arrow3_3_1,90,2,null,null);  
  119. moveArrowToRectDown(rect3_3_2,arrow3_3_2,90,2,null,null);  
  120. moveArrowToRectDown(rect3_3_3,arrow3_3_3,90,2,null,null);  
  121.   
  122.   
  123. moveArrowToRectDown(rect3_4_1,arrow3_4_1,90,2,null,null);  
  124. moveArrowToRectDown(rect3_4_2,arrow3_4_2,90,2,null,null);  
  125. moveArrowToRectDown(rect3_4_3,arrow3_4_3,90,2,null,null);  
  126. //画边框  
  127. var rectbox3 = drawRectToRect(paper,rect3_1_1,rect3_4_4,( arrow_h  + rect_h ) * 0.5);  
  128. var rectbox3_1 = drawRectToRect(paper,rect3_1_1,rect3_1_3,( arrow_h  + rect_h ) * 0.15);  
  129. var rectbox3_2_1 = drawRectToRect(paper,rect3_2_1,rect3_2_2,( arrow_h  + rect_h ) * 0.05);  
  130. var rectbox3_2_2 = drawRectToRect(paper,rect3_2_3,rect3_2_4,( arrow_h  + rect_h ) * 0.05);  
  131. var rectbox3_3 = drawRectToRect(paper,rect3_3_1,rect3_3_4,( arrow_h  + rect_h ) * 0.15);  
  132.   
  133. //对应从积分计算到完  
  134. moveArrowToRectDown(rectbox3,arrow3,90,2,null,18);//最大外框下方箭头  
  135. moveArrowToRectDown(rectbox3_2_1,arrow3_2_2,90,1.1,-8,5);  
  136. var xx = Math.round($(rectbox3.node).attr("y"))*1+$(rectbox3.node).attr("height")*1+15+arrow_h;  
  137. console.log(xx);  
  138. var rect4 = paper.rect((window_w-rect_w)*0.5, xx ,rect_w,rect_h,rect_r).attr(attr);  
  139. moveArrowToRectDown(rect4,arrow4,90,2,null,null);  
  140. 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);  
  141. 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);  
  142. var rectbox5 = drawRectToRect(paper,rect5_1,rect5_2,( arrow_h  + rect_h ) * 0.3);  
  143. moveArrowToRectDown(rectbox5,arrow5,90,2,null,18);//外框下方箭头  
  144. var rect6 = paper.rect((window_w-rect_w)*0.5 ,( arrow_h  + rect_h ) * 10 ,rect_w,rect_h,rect_r).attr(attr);  
  145. moveArrowToRectDown(rect6,arrow6,90,2,null,null);//外框下方箭头  
  146. var rect6 = paper.rect((window_w-rect_w)*0.5 ,( arrow_h  + rect_h ) * 11 ,rect_w,rect_h,rect_r).attr(attr);  
  147.   
  148. //arrow2.transform("t650,300r90s4")  
  149. //给矩形增加居中的文字  
  150. function insertRectText(root,rectangle,str){  
  151.     var x = Math.round($(rectangle.node).attr("x"));  
  152.     var y = Math.round($(rectangle.node).attr("y"));  
  153.     var w = $(rectangle.node).attr("width");  
  154.     var h = $(rectangle.node).attr("height");  
  155.     var textStr = root.text(x + w / 2,y + h / 2,str).attr({fill:"#FFFFFF"});  
  156.     textStr.attr({  
  157.          "fill":"#FFFFFF",  
  158.          "font-size":"15px",  
  159.      });  
  160.     rectangle.data("cooperative", textStr);  
  161. }  
  162. //将箭头移动到矩形下方  
  163. function moveArrowToRectDown(rectangle,arrowbox,angle,scale,offset_x,offset_y){  
  164.     var angleangle = angle == null ?0:angle; //默认旋转90度  
  165.     var scalescale = scale == null ?1:scale;  
  166.     var offset_yoffset_y =offset_y ==null?0:offset_y;  
  167.     var offset_xoffset_x =offset_x ==null?0:offset_x;  
  168.     var x = Math.round($(rectangle.node).attr("x"));  
  169.     var y = Math.round($(rectangle.node).attr("y"));  
  170.     var w = $(rectangle.node).attr("width");  
  171.     var h = $(rectangle.node).attr("height");  
  172.     console.log("x=" + x);  
  173.     console.log("y=" + y);  
  174.     console.log("w=" + w);  
  175.     console.log("h=" + h);  
  176.     var xxNew = x + w*0.5 -8*scale + offset_x;  
  177.     var yyNew = y + h*1 + offset_y;  
  178.     var pos = "t"+ xNew + "," + yNew + 'r' + angle + 's' + scale;  
  179.     console.log(pos);  
  180.     arrowbox.transform(pos);      
  181. }  
  182.   
  183. //将一个矩形移动到另一个矩形下方  
  184. function moveRectToRectDown(root,rectangle){  
  185.     var x = Math.round($(rectangle.node).attr("x"));  
  186.     var y = Math.round($(rectangle.node).attr("y"));  
  187.     var w = Math.round($(rectangle.node).attr("width"));  
  188.     var h = Math.round($(rectangle.node).attr("height"));  
  189.     var r = $(rect1.node).attr("rx");  
  190.     var rectNew = root.rect(x,y + h + arrow_h,w,h,r).attr(attr);  
  191.     return rectNew;  
  192. }  
  193.   
  194.   
  195. function drawRectToRect(root,rectangle1,rectangle2,offset){  
  196.     var x1 = Math.round($(rectangle1.node).attr("x"));  
  197.     var y1 = Math.round($(rectangle1.node).attr("y"));  
  198.       
  199.     var x2 = Math.round($(rectangle2.node).attr("x"));  
  200.     var y2 = Math.round($(rectangle2.node).attr("y"));  
  201.     var w2 = Math.round($(rectangle2.node).attr("width"));  
  202.     var h2 = Math.round($(rectangle2.node).attr("height"));  
  203.     x2 += w2;  
  204.     y2 += h2;     
  205.     return drawRect(root,x1,y1,x2,y2,offset);  
  206. }  
  207. //在一个矩形外画矩形,传入左上角和右下角的位置  
  208. function drawRect(root,x1,y1,x2,y2,offset){  
  209.     var offsetoffset =offset == null?0:offset;  
  210.     var x = x1 - offset;  
  211.     var y = y1 - offset;  
  212.     var w = x2 - x1 + 2*offset;  
  213.     var h = y2 - y1+ 2*offset;  
  214.     var rectbox = root.rect(x,y,w,h).attr({stroke: "#F4B183","stroke-width": 1,});    
  215.     return rectbox;  
  216. }  
  217.   
  218. //更新圆盘  
  219. var spinner;  
  220. function spinner(holderid, R1, R2, count, stroke_width, colour) {  
  221.     var sectorsCount = count || 12,  
  222.         color = colour || "#fff",  
  223.         width = stroke_width || 15,  
  224.         r1 = Math.min(R1, R2) || 35,  
  225.         r2 = Math.max(R1, R2) || 60,  
  226.         cx = r2 + width,  
  227.         cy = r2 + width,  
  228.         spinner = Raphael(holderid, r2 * 2 + width * 2, r2 * 2 + width * 2),  
  229.           
  230.         sectors = [],  
  231.         opacity = [],  
  232.         beta = 2 * Math.PI / sectorsCount,  
  233.   
  234.         pathParams = {stroke: color, "stroke-width": width, "stroke-linecap": "round"};  
  235.         Raphael.getColor.reset();  
  236.     for (var i = 0; i < sectorsCount; i++) {  
  237.         var alpha = beta * i - Math.PI / 2,  
  238.             cos = Math.cos(alpha),  
  239.             sin = Math.sin(alpha);  
  240.         opacity[i] = 1 / sectorsCount * i;  
  241.         sectors[i] = spinner.path([["M", cx + r1 * cos, cy + r1 * sin], ["L", cx + r2 * cos, cy + r2 * sin]]).attr(pathParams);  
  242.         if (color == "rainbow") {  
  243.             sectors[i].attr("stroke", Raphael.getColor());  
  244.         }  
  245.     }  
  246.     var tick;  
  247.     (function ticker() {  
  248.         opacity.unshift(opacity.pop());  
  249.         for (var i = 0; i < sectorsCount; i++) {  
  250.             sectors[i].attr("opacity", opacity[i]);  
  251.         }  
  252.        // r.safari();  
  253.         tick = setTimeout(ticker, 1000 / sectorsCount);  
  254.     })();  
  255.     return function () {  
  256.         clearTimeout(tick);  
  257.         spinner.remove();  
  258.     };  
  259. }  
  260.   
  261.   
  262.   
  263. rect1.node.onclick = function () {  
  264.     rect1.attr("fill", "red");  
  265.     var x = Math.round($(rect1.node).attr("x"));  
  266.     var y = Math.round($(rect1.node).attr("y"));  
  267.     var w = $(rect1.node).attr("width");  
  268.     var h = $(rect1.node).attr("height");  
  269.     var xx = (x*1 + w*1)+"px";  
  270.     var yy = (80 + y+ h/2 -20 )+"px";  
  271.     console.log("xx="+xx);  
  272.     var remove = spinner("spinner",10, 20, 8, 5, "#FFFF00");  
  273.     $('#spinner').css("left",xx);  
  274.     $('#spinner').css("top",yy);  
  275. };  
  276. function change(){  
  277.     var x = Math.round($(rect1.node).attr("x"));  
  278.     var y = Math.round($(rect1.node).attr("y"));  
  279.     var w = $(rect1.node).attr("width");  
  280.     var h = $(rect1.node).attr("height");  
  281.     var xx = (x*1 + w*1)+"px";  
  282.     var yy = (80 + y+ h/2 -20 )+"px";  
  283.     console.log("xx="+xx);  
  284.     //remove();  
  285.     var remove = spinner("spinner",10, 20, 8, 5, "#FFFF00");  
  286.     $('#spinner').css("left",xx);  
  287.     $('#spinner').css("top",yy);  
  288. }  
  289.       
  290. var imageMenuData = [  
  291. [{  
  292.   text: "方法一",  
  293.   func: function() {  
  294.       alert("方法一")  
  295.       rect1.attr("fill", "blue");  
  296.      // remove();  
  297.       change()  
  298.   }  
  299. }, {  
  300.   text: "方法二",  
  301.   func: function() {  
  302.       alert("方法二")  
  303.       rect1.attr("fill", "yellow");  
  304.      // remove();  
  305.       change()  
  306.   }  
  307. }],  
  308. [{  
  309.   text: "方法三",  
  310.   func: function() {  
  311.       alert("方法三")  
  312.       rect1.attr("fill", "#FF84FF");  
  313.      // remove();  
  314.       change()  
  315.   }  
  316. }]  
  317. ];  
  318. //增加右键菜单  
  319. $(rect1.node).smartMenu(imageMenuData, {  
  320. name: "image"      
  321. });  
  322. $("rect").smartMenu(imageMenuData, {  
  323.     name: "image"      
  324.     });   
  325. $('text').fontFlex(15, 50, 90);//字体大小自适应  
  326. //当浏览器窗口大小改变时，设置显示内容的高度    
  327.             window.onresize=function(){    
  328.                 //paper.safari()  
  329.             }    
  330.   
  331. </script>  
  332. </html>  

 

最终效果展示：

Web流程图绘制使用raphaelWeb流程图绘制使用raphael
Web流程图绘制使用raphaelWeb流程图绘制使用raphael

右键点击：

Web流程图绘制使用raphaelWeb流程图绘制使用raphael

方法调用后结果：

Web流程图绘制使用raphaelWeb流程图绘制使用raphael

 

原文：http://blog.csdn.net/evankaka/article/details/48439017

转自：Web流程图绘制使用raphael

 


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 使用Raphael绘制流程图，自绘动态箭头，可拖动，有双击事件，纯前端，兼容各种浏览器 raphael.js 流程图实例 使用Typora绘制流程图 使用SVG绘制流程图 (转)使用graphviz绘制流程图 流程图绘制 使用Typora绘制类图、流程图、时序图 【转】Visio绘制WEB流程图的心得 JointJS绘制流程图 canvas绘制流程图
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM