使用HTML5技術繪製思惟導圖

客戶經常提到思惟導圖，喜歡它的結構展現方式，和交互的友好，從圖論的角度看，思惟導圖本質上是一種樹，有一個根節點（主題）出發，聯想到其餘話題，因而分支開花，再分支，有時候也會構成網絡結構，由子分支聯想到另外一個已有分支，但一般不破壞原有結構，常見的思惟導圖以下

XMind製做的思惟導圖



使用HTML5製做思惟導圖應用

這裏須要用到一款HTML5圖形組件-Qunee for HTML5，Qunee組件自己支持樹形佈局，因此對於思惟導圖的大致結構是能夠呈現的，到細節的地方就比較多了，包括線條的走向，節點的樣式，佈局交互，自動吸附，雙擊編輯等等，本示例沒辦法面面俱到，因此參照XMind的效果，只實現了部分功能，供用戶參考和擴展

連線定製

默認連線爲直線，經過定製EdgeUI能夠實現曲線效果

function FlexEdgeUI(edge, graph){
    Q.doSuperConstructor(this, FlexEdgeUI, arguments);
}
FlexEdgeUI.prototype = {
    drawEdge: function(path, fromUI, toUI, edgeType, fromBounds, toBounds){
        var from = fromBounds.center;
        var to = toBounds.center;
        var cx = (from.x + to.x) / 2;
        var cy = (from.y + to.y) / 2;
        path.curveTo(from.x, cy, cx, to.y);
    }
}
Q.extend(FlexEdgeUI, Q.EdgeUI);

使用方式

經過圖元的#uiClass屬性，與定製的EdgeUI相關聯

function createEdge(name, from, to){
    var edge = graph.createEdge(name, from, to);
    edge.uiClass = FlexEdgeUI;
}

曲線效果

定製彎曲連線效果



佈局定製
Qunee提供的樹形佈局很是強大，這裏不須要太多設置就能夠完成相似思惟導圖的佈局，下面的代碼設置了佈局過濾器，用於控制某些節點不參與佈局，代碼中的控制邏輯是分離圖元不參與佈局，這樣當圖元脫離思惟導圖樹時，將不參與自動佈局處理

var layouter = new Q.TreeLayouter(graph);
layouter.isLayoutable = function(node, from){
    return node == ROOT || node.host != null;
}
layouter.vGap = 20;

下面的代碼，設置主節點的佈局類型爲兩邊分佈，方向爲居中

ROOT.parentChildrenDirection = Q.Consts.DIRECTION_MIDDLE;
ROOT.layoutType = Q.Consts.LAYOUT_TYPE_TWO_SIDE;

佈局效果以下

樹形佈局效果



交互定製
交互定製相對複雜些，包括拖拽過程當中的動態鏈接以及雙擊編輯等

動態鏈接效果

須要判斷什麼時候脫離，什麼時候鏈接，尋找合適的鏈接對象，下面是拖拽交互代碼，監聽節點拖拽事件，動態查找就近的鏈接節點，具體的代碼請參看http://demo.qunee.com/#Mind Mapping Demo

graph.interactionDispatcher.addListener(function(evt){
    if(evt.kind == Q.InteractionEvent.ELEMENT_MOVING && evt.data){
        var node = evt.data;
        var host = findNearNode(node);
        if(node.host == host){
            return;
        }
        if(node.host){
            unlinkToParent(node);
        }
        if(host){
            linkToParent(node, host);
        }
    }else if(evt.kind == Q.InteractionEvent.ELEMENT_MOVE_END && evt.data){
        layouter.doLayout();
    }
})

雙擊編輯

雙擊編輯用到LabelEditor類，監聽Graph組件的雙擊事件，當雙擊節點時，顯示文本編輯框

graph.ondblclick = function(evt){
    var element = graph.getElementByMouseEvent(evt);
    if(element){
        var xy;
        if(element instanceof Q.Node){
            xy = graph.toCanvas(element.x, element.y);
            xy = localToGlobal(xy.x, xy.y, graph.html);
        }else{
            xy = getPageXY(evt);
        }
        labelEditor.startEdit(xy.x, xy.y, element.name, graph.getStyle(element, Q.Styles.LABEL_FONT_SIZE), function(text){
            element.name = text;
        });
        return;
    }
    var xy = graph.getLogicalPointByMouseEvent(evt);
    var newItem = createText("新項目", xy.x, xy.y);
    graph.selectionModel.select(newItem);
}

編輯效果
雙擊編輯文本


運行效果


修改樣式和連線走向


 


在線演示
http://demo.qunee.com/#Mind Mapping Demo