基於jTopo的拓撲圖設計工具庫ujtopo

繪制拓撲圖有很多開源的工具,知乎上也有人回答了這個問題:

https://www.zhihu.com/question/41026400/answer/118726253

ujtopo是基於jTopo作了一些封裝,適用一些基本的場景

jTopo（Javascript Topology library)是一款完全基於HTML5 Canvas的關系、拓撲圖形化界面開發工具包。官網地址：http://www.jtopo.cn

1、首先定義畫布、舞台、場景並對舞台和場景做一些設置等

//節點
    var nodeList = [];
    //連接關系
    var linkList = [];
    //狀態
    var nodeStatus = [];

    var canvasId = 'canvas';
    var canvas = null;
    var stage = null;
    var scene = null;
    var lineType = "1";
    var lineColor = '';
    getCanvas = function () { canvas = document.getElementById(canvasId); },

    getStage = function () { stage = new JTopo.Stage(canvas); },

    getScene = function () {
        scene = new JTopo.Scene(stage);
        scene.background = imglist.background;
    },

2、設計視圖和顯示視圖

設計視圖可以增加節點，拖動節點、節點之間的連線，選擇各種線形、選擇線的顏色，可以生成節點和連線數據以供顯示視圖可以解析顯示；實際中節點可能有不同的類型，不同類型的節點我們可能需要做不同的處理，每個節點要有唯一的標識、要有和數據源關聯的某些標識等等；顯示視圖要能根據設計視圖最終輸出的節點數據和連線數據還原出設計視圖所繪制的圖形拓撲。

• addNode是添加節點，入參是args和func。args封裝了節點的一些特征數據，格式為：{ x: 50, y: 60, id: 1, type: 1, img: 'Images/ujtopo/net-yuan.png', title: 'net-yuan' }，也可以根據實際需要做調整；x和y是坐標；id是跟數據源相關的標識，type是節點類型，img：節點的圖片；title：節點的名稱；func是節點的事件處理，目前沒有處理，可以根據實際情況，加一些處理，比如增加節點的mouseup事件等等，具體的事件請參考jTopo的事件

//添加節點
    addNode = function (args, func) {
        var n = new JTopo.Node(args.title);
        //n.setSize(50,50);  // 尺寸
        n.fontColor = "black";
        n.setImage(args.img, true);
        n.setLocation(args.x, args.y);
        n.dragable = this.designer;
        //if (clicked != undefined) {
        //    n.addEventListener("mouseup", clicked);
        //}
        nodeList.push({ args: dealArgs(args), node: n });
        scene.add(n);
        return n;
    },

• dealArgs是處理參數的，根據id和type生成唯一標識uid
• setLineType和setLineColor分別是設置線形和線顏色
• onLineEdit是設計視圖所用，拖動節點、節點之間的連線、刪除節點或者連線等
• drawLine、drawFoldLine、drawReverseFoldLine分別是畫直線、折線和反折線

drawLine = function (nodeA, nodeZ) {
        var link = new JTopo.Link(nodeA, nodeZ);
        link.lineWidth = 3; // 線寬
        //link.dashedPattern = 10; // 虛線
        link.arrowsRadius = 10; //箭頭大小
        //link.bundleOffset = 60; // 折線拐角處的長度
        //link.bundleGap = 20; // 線條之間的間隔
        //link.textOffsetY = 3; // 文本偏移量（向下3個像素）
        link.strokeColor = lineColor;
        scene.add(link);
        return link;
    },

• getLine是根據所選線形畫相應的連線
• findNode是根據uid查找節點信息的
• findArgsByNode是根據節點查找節點參數的
• nodeList和linkList分別是存儲節點的連線的數組。nodeList格式是{ args: dealArgs(args), node: n }，args是處理之后有uid的節點參數；node是jtopo節點；linkList格式是{ lineType: lineType, lineColor: lineColor, xArgs: xArgs, yArgs: yArgs }；lineType是線形；lineColor是線的顏色；xArgs是起始節點的參數；yArgs是末尾節點的參數；

保存數據
節點數據保存：用jtopo節點的坐標替換節點參數的坐標；去掉jtopo節點
連線數據保存：linkList

3、演示程序的說明

1. 設計視圖模擬了10個節點、顏色選擇colorpicker組件、線形選擇使用了icheck組件。點擊結果輸出，會顯示出節點數據和連線數據並且保存至localStorage；實際中節點數據可以從數據源獲取，節點數據和連線數據可以保存至數據庫或者其它地方
2. 顯示視圖從localStorage獲取節點數據和連線數據解析節點數據的連線數據。

4、演示結果

演示地址：http://net-yuan.com/ujtopo

GitHub：https://github.com/net-yuan/ujtopo

 

 

文章已同步至：http://net-yuan.com/Article/Detail/9b8053cc-6f37-45d1-a638-e1d46885e412