流程設計器jQuery + svg/vml(Demo4 - 畫連線)

流程結點能夠添加了以後，接下來到畫結點與結點之間的連線，效果圖以下

 

很眼饞visio的連線能夠折來折去，這裏實現的連線比較簡單。

首先是把連線的類型分爲Z（折線）、N（折線）及I（直線）3種類型，而後在兩個結點間劃線的時候，根據兩個結點間的位置來決定畫哪一種線。

一、結點2在結點1左邊

二、結點2在結點1右邊

//計算兩個結點間連線的類型
p.calcLineType = function (n1, n2) {
    var x11 = n1.left, x12 = n1.left + n1.width, x21 = n2.left, x22 = n2.left + n2.width;
    var y11 = n1.top, y12 = n1.top + n1.height, y21 = n2.top, y22 = n2.top + n2.height;
    var x1m = (x11 + x12) / 2, x2m = (x21 + x22) / 2, y1m = (y11 + y12) / 2, y2m = (y21 + y22) / 2;
    if (x1m >= x22) {//結點2在結點1左邊(x軸有交集)
        if (y11 > y22) { //結點2在結點1左上方（y軸無交集）
            return "N";
        }
        else if (y12 < y21) {//結點2在結點1左下方（y軸無交集）
            return "N";
        }
        else {//y軸有交集 
            return (Math.abs(y1m - y2m) < 20 ? "I" : "Z");
        }
    }
    else { //結點2在結點1右邊(x軸有交集)
        if (y11 > y22) { //結點2在結點1右上方（y軸無交集）
            return (Math.abs(x1m - x2m) < 20 ? "I" : "N");
        }
        else if (y12 < y21) {//結點2在結點1右下方（y軸無交集）
            return (Math.abs(x1m - x2m) < 20 ? "I" : "N");
        }
        else {//y軸有交集 
            return (Math.abs(y1m - y2m) < 20 ? "I" : "Z");
        }
    }
}; 

目前連線就是這樣的簡單實現，哪位朋友有心思的幫忙整個好點的實現。 

代碼：GoFlow_04.zip

演示地址：Demo

微信演示公衆號：

另：Silverlight版

      Silverlight版Demo