Raphael绘制流程图(二)，添加带箭头的直线

上一篇文章中，我们添加了元素(矩形框)，接下来给矩形框加上带箭头的直线，代码如下:

var wf_r = null; //画板对象
var wf_steps = []; //步骤数组
var wf_width = 108; //步骤宽度
var wf_height = 50; //步骤高度
var wf_rect = 8;
var wf_stepDefaultName = "新步骤";//默认步骤名称
var addToJSON = false;
var wf_nodeBorderColor = "#587aa9"; //节点边框颜色
var wf_noteColor = "#efeff0"; //节点填充颜色

var wf_focusObj=null;

var mouseX=0;

var mouseY=0;

var wf_option="";

var wf_conns = [];    //连线数组

//添加连线
function addConn() {
    if (!wf_focusObj || !isStepObj(wf_focusObj)) {
        alert("请选择要连接的步骤!"); return false;
    }
   
    wf_option = "line";
    document.body.onmousemove = mouseMove;
    document.body.onmousedown = function () {
        for (var i = 0; i < tempArrPath.length; i++) {
            tempArrPath[i].arrPath.remove();
        }
        tempArrPath = [];
        document.body.onmousemove = null;
    };
}

//判断一个对象是否是步骤对象
function isStepObj(obj) {
    return obj && obj.type1 && (obj.type1.toString() == "normal");
}

function mouseMove(ev) {
    ev = ev || window.event;
    var mousePos = mouseCoords(ev);
    mouseX = mousePos.x;
    mouseY = mousePos.y;
    var obj = { obj1: wf_focusObj, obj2: null };
    wf_r.drawArr(obj);
}

//判断一个节点与另一个节点之间是否可以连线
function isLine(obj) {
    if (!obj || !obj.obj1 || !obj.obj2) {
        return false;
    }
    if (obj.obj1 === obj.obj2) {
        return false;
    }
    if (!isStepObj(obj.obj1) || !isStepObj(obj.obj2)) {
        return false;
    }
    for (var i = 0; i < wf_conns.length; i++) {
        if (obj.obj1 === obj.obj2 || (wf_conns[i].obj1 === obj.obj1 && wf_conns[i].obj2 === obj.obj2)) {
            return false;
        }
    }
    return true;