通过Raphael工具画简单的流程图

一、介绍:
Raphael，一个开源和轻量级的JS库，它使用SVG和VML在浏览器中绘制矢量图形。 它提供了很多非常方便的用户绘制和变换矢量图的方法，在支持直接操作DOM的同时还支持导入位图以及文本的绘制。它就是SVG和VML的优秀合体。一位内它已经将底层封装完善，我们在使用时不需要去考虑SVG和VML的方面问题，只要集中精力搞好我们的Raphael就可以了。

二、本文demo实现效果
实现一个简单的横向和纵向的图排列


效果图.png

三、代码：
1、先开发一个process_manager.jsp页面

<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<%@include file="/coframe/tools/skins/common.jsp" %>
<!-- 
  - Author(s): wanghl
  - Date: 2013-02-28 13:45:18
  - Description:
-->
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="<%=request.getContextPath()%>/raphael/js/raphael-min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/raphael/js/raphael_extend.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/raphael/js/renhe.js"></script>
    <title>SOP环节展示</title>
</head>
<body oncontextmenu=self.event.returnValue = false onselectstart="return false">
<style>
#table1 .tit{
    height: 10px;
    line-height: 10px;
}
#table1 td{
    height: 10px;
    line-height: 10px;
}
</style>
<div class="mini-splitter" allowResize="true" style="width:100%;height:100%;">
    <div size="30%" showCollapseButton="false" style="padding:5px;">
        <div id="canvas" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;"></div>
    </div>
    <div showCollapseButton="false">
        <input id="text1" class="nui-textarea" style="width: 100%; height: 100%;position: absolute;top: 0px; left: 0px; bottom: 0px; right: 0px;"/>
    </div>        
</div>

    <script type="text/javascript">
        nui.parse();
        $_renhe.load(101);//竖向展示
        $_renhe.load_horizontal(101);//横向展示
        function showSOPData(sopID){
            alert("ID2:"+sopID);
            nui.get("text1").setValue(sopID);
        }     
    </script>

</body>
</html>

2、再开发一个renhe.js文件

        //申明工作空间
        var renhe = renhe || {};
        renhe.workspace = {};
        var $_renhe = renhe.workspace;

        //创建一个节点对象
        $_renhe.SOPNode = function(x,y,width,height,Paper,xid,url,tip){
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.Paper = Paper;
            this.xid = xid;
            this.url = url;
            this.tip = tip;
            this.show = function(){
                var sopID = this.xid;
                var rectR = Paper.rect(this.x, this.y, this.width, this.height, 10);
                rectR.attr({
                        'stroke-width': 1,
                        fill:"url('"+this.url+"')"
                    });
                rectR.node.onclick = function(evt){
                    /*debugger;
                    if(1==evt.which){//左键单击
                        alert("左键");
                    }else if(3==evt.which){//右键单击
                        alert("右键");
                    }*/
                    showSOPData(sopID);};
                    var titleLen = tip.length;
                    var temStr ="";
                    var i;
                    for(i=0;i<titleLen/7;i++){
                        temStr = temStr+this.tip.substr(i*7,7)+"\n";
                    } 
                var title = Paper.text(this.x+this.width+10, this.y+this.height/2, temStr);
                title.attr({'font-size':15, fill:'black', 'text-anchor':'start'});
            }
         };
         
        //创建一个水平节点对象
         $_renhe.SOPNode_horizontal = function(x,y,width,height,Paper,xid,url,tip){
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
                this.Paper = Paper;
                this.xid = xid;
                this.url = url;
                this.tip = tip;
                this.show = function(){
                    var sopID = this.xid;
                    var rectR = Paper.rect(this.x, this.y, this.width, this.height, 10);
                    rectR.attr({
                            'stroke-width': 1,
                            fill:"url('"+this.url+"')"
                        });
                    rectR.node.onclick = function(evt){
                        /*debugger;
                        if(1==evt.which){//左键单击
                            alert("左键");
                        }else if(3==evt.which){//右键单击
                            alert("右键");
                        }*/
                        showSOPData(sopID);};
                        var titleLen = tip.length;
                        var temStr ="";
                        var i;
                        for(i=0;i<titleLen/7;i++){
                            temStr = temStr+this.tip.substr(i*7,7)+"\n";
                        } 
                    var title = Paper.text(this.x, this.y+this.height+30, temStr);
                    title.attr({'font-size':15, fill:'black', 'text-anchor':'start'});
                }
             };
         
        //创建一个连线对象
         $_renhe.SOPLine = function(x1,y1,x2,y2,width,Paper){
            this.x1 = x1;
            this.x2 = x2;
            this.y1 = y1;
            this.y2 = y2;
            this.width = width;
            this.show = function(){
                Paper.path("M"+this.x1+" "+this.y1+"L"+this.x2+" "+this.y2+"").attr({
                    'arrow-end': 'classic-wide-long',
                    stroke: "#0000ff",
                    "stroke-width": this.width
                });
            }
         };
         //创建一个开始节点对象
         $_renhe.SOPStart = function(x,y,r,color,Paper){
             this.x = x;
             this.y =y;
             this.r = r;
             this.color = color;
             this.show = function(){
                Paper.circle(this.x,this.y,this.r).attr({fill: this.color});
             }
         };
         //创建一个结束节点对象
         $_renhe.SOPEnd = function(x,y,r,color,Paper){
             this.x = x;
             this.y =y;
             this.r = r;
             this.color = color;
             this.show = function(){
                Paper.circle(this.x,this.y,this.r).attr({fill: this.color});
             }
         };
         
         //纵向加载流程图函数
         $_renhe.load = function(xid){
            $.ajax({
                url:"com.renhe.raphael.renhe.QuerySOP.biz.ext",
                type:'POST',
                data:"{xid:"+xid+"}",
                cache: false,
                contentType:'text/json',
                success:function(text){
                    var returnJson = nui.decode(text.results);
                    if(returnJson.exception == null){
                        var offsetHeight = document.getElementById("canvas").offsetHeight;
                        var offsetWidth =document.getElementById("canvas").offsetWidth;
                        if(offsetHeight<900){offsetHeight=900;}
                        debugger;
                        var Paper = Raphael("canvas",300,offsetHeight);
                        $_renhe.draw(80,20,returnJson,Paper);
                        }else{
                           alert("数据查询异常"); 
                        }
                    }
             });
         };
         //横向加载流程图函数
         $_renhe.load_horizontal = function(xid){
                
                $.ajax({
                    url:"com.renhe.raphael.renhe.QuerySOP.biz.ext",
                    type:'POST',
                    data:"{xid:"+xid+"}",
                    cache: false,
                    contentType:'text/json',
                    success:function(text){
                        var returnJson = nui.decode(text.results);
                        if(returnJson.exception == null){
                            var offsetHeight = document.getElementById("canvas").offsetHeight;
                            var offsetWidth =document.getElementById("canvas").offsetWidth;
                            if(offsetWidth<1600){offsetWidth=1600;}
                            debugger;
                            var Paper = Raphael("canvas",offsetWidth,300);
                            $_renhe.draw_horizontal(80,80,returnJson,Paper);
                            }else{
                               alert("数据查询异常"); 
                            }
                        }
                 });
             };
         
         $_renhe.draw =function(x,y,json,Paper){
                debugger;
                this.Paper = Paper;
                var i ;
                var r =14;
                var resultLen = json.length;
                new $_renhe.SOPStart(x,y,r,"#00C000",this.Paper).show();
                for(i=0;i<resultLen;i++){
                    var data = json[i];
                    var imageUrl = "";
                    var width = 64;
                    var height = 44;
                    var jiange =40;
                    var tempY = jiange+y+jiange*2*(i);
                    if(i==0){
                        new $_renhe.SOPLine(x,y+r,x,tempY,2,this.Paper).show();
                    }else{
                        new $_renhe.SOPLine(x,jiange+y+jiange*2*(i-1)+height,x,tempY,2,this.Paper).show();
                    }
                    if(data.isok=="Y"){
                        imageUrl="../images/manual_7_0.gif";
                    }else{
                        imageUrl="../images/manual_1.gif";
                    }
                    new $_renhe.SOPNode(x-width/2, tempY, width, height,this.Paper,data.sortno,imageUrl,data.title).show();
                    
                    if(i==resultLen-1){
                        new $_renhe.SOPLine(x,tempY+height,x,jiange+y+jiange*2*(resultLen)-r,2,this.Paper).show();
                    }
                }
                
                new $_renhe.SOPEnd(x,jiange+y+jiange*2*(resultLen),r,"#00C000",this.Paper).show();
            };
         
         $_renhe.draw_horizontal =function(x,y,json,Paper){
                debugger;
                this.Paper = Paper;
                var i ;
                var r =14;
                var resultLen = json.length;
                new $_renhe.SOPStart(x,y,r,"#00C000",this.Paper).show();
                for(i=0;i<resultLen;i++){
                    var data = json[i];
                    var imageUrl = "";
                    var width = 64;
                    var height = 44;
                    var jiange =70;
                    var tempX = jiange+x+jiange*2*(i);
                    if(i==0){
                        new $_renhe.SOPLine(x+r,y,jiange+x+jiange*2*(i),y,2,this.Paper).show();
                    }else{
                        new $_renhe.SOPLine(x+jiange*i+width*i,y,x+jiange*(i+1)+width*i,y,2,this.Paper).show();
                    }
                    if(data.isok=="Y"){
                        imageUrl="../images/manual_7_0.gif";
                    }else{
                        imageUrl="../images/manual_1.gif";
                    }
                    new $_renhe.SOPNode_horizontal(x+jiange*(i+1)+width*i, y-height/2, width, height,this.Paper,data.sortno,imageUrl,data.title).show();
                    
                    if(i==resultLen-1){
                        new $_renhe.SOPLine(x+jiange*(i+1)+width*(i+1),y,x+jiange*(i+2)+width*(i+1)-r,y,2,this.Paper).show();
                    }
                }
                
                new $_renhe.SOPEnd(x+jiange*(resultLen+1)+width*resultLen,y,r,"#00C000",this.Paper).show();
            };
           
         $_renhe.showSOPData = function(sopID){
                alert("ID:"+sopID);
            }

3、项目结构如下


项目结构.png

四、结论

五、参照：
[https://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html]

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,271评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,275评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,151评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,550评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,553评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,559评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,924评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,580评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,826评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,363评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,940评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2赞 342