通過Raphael工具畫簡單的流程圖

一、介紹:
Raphael，一個(gè)開源和輕量級(jí)的JS庫，它使用SVG和VML在瀏覽器中繪制矢量圖形。 它提供了很多非常方便的用戶繪制和變換矢量圖的方法，在支持直接操作DOM的同時(shí)還支持導(dǎo)入位圖以及文本的繪制。它就是SVG和VML的優(yōu)秀合體。一位內(nèi)它已經(jīng)將底層封裝完善，我們?cè)谑褂脮r(shí)不需要去考慮SVG和VML的方面問題，只要集中精力搞好我們的Raphael就可以了。

二、本文demo實(shí)現(xiàn)效果
實(shí)現(xiàn)一個(gè)簡單的橫向和縱向的圖排列


效果圖.png

三、代碼：
1、先開發(fā)一個(gè)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環(huán)節(jié)展示</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、再開發(fā)一個(gè)renhe.js文件

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

        //創(chuàng)建一個(gè)節(jié)點(diǎn)對(duì)象
        $_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'});
            }
         };
         
        //創(chuàng)建一個(gè)水平節(jié)點(diǎn)對(duì)象
         $_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'});
                }
             };
         
        //創(chuàng)建一個(gè)連線對(duì)象
         $_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
                });
            }
         };
         //創(chuàng)建一個(gè)開始節(jié)點(diǎn)對(duì)象
         $_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});
             }
         };
         //創(chuàng)建一個(gè)結(jié)束節(jié)點(diǎn)對(duì)象
         $_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});
             }
         };
         
         //縱向加載流程圖函數(shù)
         $_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("數(shù)據(jù)查詢異常"); 
                        }
                    }
             });
         };
         //橫向加載流程圖函數(shù)
         $_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("數(shù)據(jù)查詢異常"); 
                            }
                        }
                 });
             };
         
         $_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、項(xiàng)目結(jié)構(gòu)如下


項(xiàng)目結(jié)構(gòu).png

四、結(jié)論

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。