一步一步jQuery流程設計器插件goflow(附代碼)-4-畫連線

2024-04-27 15:01:59

字體：大中小

來源：轉載

供稿：網友

流程結點可以添加了之后，接下來到畫結點與結點之間的連線，效果圖如下

很眼饞visio的連線可以折來折去，這里實現的連線比較簡單。

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

1、結點2在結點1左邊

2、結點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");        }    }};