RaphaelJS通用画图方法

http://blog.csdn.net/witsonx/article/details/52386277

http://lblovesnow-163-com.iteye.com/blog/1481028

/**
     *
     * @param {Object} X x坐标
     * @param {Object} Y y坐标
     * @param {Object} rX 矩形宽度
     * @param {Object} rY 矩形高度
     * @param {Object} R 圆角半径
     * @param {Object} H 连接线长度
     * @param {Object} LD 方向
     * @param {Object} tX 内容x坐标(相对框距离)
     * @param {Object} tY 内容y坐标(相对框距离)
     * @param {Object} textVal 内容
     * @param {Object} textTip 内容提示
     */
    function showClosedPic(X,Y,rX,rY,R,H,LD,tX,tY,textVal,textTip,rectFill,rectStroke){
        //框
        var showRect = paper.rect(X,Y,rX,rY,R).attr({
          "fill":rectFill,    
          "stroke":rectStroke,    
          "stroke-width":2   
        });
        showRect.data({  
          "name": "heihei",  
          "age":2  
        });  
        //连接线
        var directionPath = "";
        var lineX = "";
        var lineY = "";
        var lineH = "";
        var textX = "";
        var textY = "";
        if(LD == "top"){
            lineX = X+rX/2;
            lineY = Y;
            lineH = lineY-H;
            directionPath = "M"+lineX+","+lineY+" V "+lineH+"";
        }else if(LD == "bottom"){
            lineX = X+rX/2;
            lineY = Y+rY;
            lineH = lineY+H;
            directionPath = "M"+lineX+","+lineY+" V "+lineH+"";
        }else if(LD == "left"){
            lineX = X;
            lineY = Y+rY/2;
            lineH = lineX-H;
            directionPath = "M"+lineX+","+lineY+" H "+lineH+"";
        }else if(LD == "right"){
            lineX = X+rX;
            lineY = Y+rY/2;
            lineH = lineX+H;
            directionPath = "M"+lineX+","+lineY+" H "+lineH+"";
        }
        var showLine = paper.path(directionPath).attr({  
                    stroke: "#8c8c8c",  
                    "stroke-width": "2px",  
                    "arrow-end": "classic-wide-long"  
                });
        //内容
        textX = X+tX;
        textY = Y+tY;
        var showText=paper.text(textX,textY,textVal);
            showText.attr({
               "fill":"#ffffff",
                "font-size":"20px",
                "text-anchor":"start"
            });
        var x = 15;
        var y = 10;
        showText.mouseover(function(e){  
            //layer.msg(textTip);
            var tooltip = "<div id='tooltip'>"+textTip+"</div>";
            $("body").append(tooltip);
            $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");
        }).mouseout(function() { //当鼠标指针从元素上移开时
            $("#tooltip").remove();
        }).mousemove(function(e) { //当鼠标指针从元素上移动时
            $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });
        });
    }