基于SVG的思維導圖的系統實現

任志豪，賴源勁

（華南師范大學軟件學院，廣州　510631）

?

基于SVG的思維導圖的系統實現

任志豪，賴源勁

（華南師范大學軟件學院，廣州510631）

摘要：基于SVG實現的繪圖技術，具有對象化和易于交互的特點，適合用于思維導圖在線繪制的實現。基于SVG實現的思維導圖繪制系統，其基礎功能有思維導圖節點及邊的繪制、增刪、位置變換和拖動，其中的關鍵技術點包括圖形的位置計算和渲染等。

關鍵詞：思維導圖；SVG；實現

0　引言

隨著信息時代的飛速發展，人們在日常工作或者學習中越來越需要記錄信息和知識，使用思維導圖可為人們更高效地記錄和歸納信息。思維導圖又稱心智圖，它從中心主題出發，發散關鍵點，以簡潔的信息表示整個結構。一個典型的思維導圖由多個節點所組成，一個節點也可引申出多個子節點，體現了更清晰的分類思想，通過合理的分類方法，可以清晰地整理任務和快速定位信息的關鍵點。本文的主要內容則是如何實現一個思維導圖的Web應用。

該系統使用SVG技術繪制思維導圖的圖形。SVG是可伸縮矢量圖形（Scalable Vector Graphics），用于描述二維矢量的一種圖形格式。SVG是一種基于XML的語言，可以在XML或者HTML中嵌入SVG。SVG的事件模型基于SVG圖形元素上，所以SVG具有很好的交互性。目前的已有的思維導圖Web應用中，某些網站的思維導圖應用使用了Canvas技術，而Canvas是像素級別的圖形繪制技術，不太適合于思維導圖這種對象級別的圖形繪制中；另外一些網站的思維導圖應用使用了Flash技術，但Flash技術比較繁瑣，性能不高，而且Flash需要下載插件，在一部分的操作系統不能使用。與上述兩種技術相比，SVG將圖像當成對象，可將思維導圖中節點和線等圖形表現為對象，事件模型基于圖形元素上的特性使得SVG更適合用于動態交互的應用。目前兼容SVG的瀏覽器有IE9以及其他主流的瀏覽器，使得SVG的應用具有較好的移植性。該系統使用一個SVG圖形庫——Raphael.js提供的API來繪制思維導圖應用。

1　系統功能與系統結構

該系統的主要功能有：添加節點、刪除節點和拖動節點。

該系統采用面向對象的設計方式，如圖1所示，當中有4個主要的對象類型：Node、Edge、Graph和Renderer，前3個對象類型屬于數據層，第4個對象類型屬于渲染層。Node和Edge分別對應于思維導圖的節點和邊，每一個節點都有一個父節點引用與父節點相連的父邊引用，用于表示節點與節點之間的關系。Graph 與Node之間是聚合關系，它擁有思維導圖根節點和所有節點的列表。Renderer用于渲染圖像，只有Graph擁有一個Render，Render負責具體的渲染操作，使得在數據有改變時才做出相應的渲染，這樣的層次劃分可以使得數據操作和視圖渲染不會耦合在一起。只有Graph模塊暴露給客戶端使用，減少了繪圖系統和客戶端的耦合度。

圖1　

2　繪制基礎元素圖形的實現

Raphael.js提供繪制基本圖形的功能，例如長方形，圓形。這些基本圖形可以組在一起形成集合，對這個集合進行的操作即對集合內所有元素進行操作，在Raphael.js中，這個集合稱為Set。

2.1節點的繪制

一個節點由一個文本和長方形組成，節點的位置由左上角坐標決定。為了讓文本在長方形中在長方形區域里水平垂直居中，先繪制文本，求得文本所占區域的寬度和長度，然后加上長方形的上下補白，即可求得長方形的寬度和長度，再將文本位移二分之一的長方形寬度和高度即可讓文本在長方形區域中水平垂直居中。最后將長方形設置為新的寬度和高度。實現代碼如下：

function drawNode(paper, x, y){ // paper為Raphael對象

var label = paper.text(x, y, '節點');

var textBox = label.getBBox();

var nodeXPadding = 40; //長方形的x補白

var nodeYPadding = 20; //長方形的y補白

//得到矩形的長度

var rectWidth = textBox.width + nodeXPadding;

var rectHeight = textBox.height + nodeYPadding;

var rect = paper.rect(x, y, 1, 1, 4);

label.toFront();

label.attr({

x: x + rectWidth * 0.5,

y: y + rectHeight * 0.5,

'font-size': 14

});

rect.attr({

width: rectWidth,

height: rectHeight,

'stroke': '#808080',

'stroke-width': 1

});

return paper.set().push(label).push(rect);

}

2.2連線的繪制

如果節點間的連線都用直線，思維導圖整體上會不太美觀。于是，為了讓連線更好看，在根結點與第一層節點間使用貝塞爾曲線，其他的連線都使用“三段連線”。

（1）貝塞爾曲線的繪制

①貝塞爾曲線

貝塞爾曲線是應用于二維圖形應用程序的數學曲線，通過計算貝塞爾曲線的計算公式，即可精確地繪制出復雜的曲線。貝塞爾曲線有三種重要的點：起始點、終止點和控制點。下面以二階貝塞爾曲線為例說明其原理，如圖2所示，設P0為起始點，P1為控制點，P2為終止點，在P0到P1的線段上作點Q0，在P1到P2的線段上作點Q1，在Q0和Q1的線段上作點Q2

圖2　

引入參數t，使以下比例成立

求得Q2為：

Q2=（1-t）2P0+2t（1-t）P1+

當t的范圍在0到1時，表示由三個頂點P0、P1、P2即可描繪一條二階的貝塞爾曲線。

②根節點與第一層節點的連線

為了美觀，根結點與第一層節點使用貝塞爾曲線，起始點為根節點的中心點，終止點為第一層節點的中心點，引入參數k1和k2，再加上起始點和終止點的坐標來求出控制點。Raphael.js的Paper.path（）提供了繪制貝塞爾曲線的方法。實現代碼如下：

// paper為Raphael對象，source為源節點的set集合

// target為目標節點的set集合

function drawCurve（paper, source, target）{

var sourceBox = source.getBBox（）;

var targetBox = target.getBBox（）;

//求出起始點、控制點、終止點

var x1 =（sourceBox.x + sourceBox.x2）/2;

var y1 =（sourceBox.y + sourceBox.y2）/2;

var x2 =（targetBox.x + targetBox.x2）/2;

var y2 =（targetBox.y + targetBox.y2）/2;

var k1 = 0.8;

var k2 = 0.2;

var pathPoints = {

x1: x1,

y1: y1,

x2: x2,

y2: y2,

x3: x2 - k1 *（x2 - x1）,

y3: y2 - k2 *（y2 - y1）

};

var edgePath = paper.path（Raphael.fullfill（

"M{x1},{y1}Q{x3},{y3},{x2},{y2}",pathPoints））; edgePath.attr（{

'stroke': '#999',

'stroke-width': 2

}）;

edgePath.toBack（）;

return paper.set（）.push（edgePath）;

}

（2）“三段連線”的繪制

除了根節點與第一層的連線，其他連線都采用“三段連線”。如圖3所示，“三段連線”由path1、path2、path3組成，這樣的連線可以使得兩層以外的節點看起來更緊湊，更美觀。

圖3　

3　添加和刪除節點時節點位置渲染

3.1添加和刪除節點時的渲染

添加和刪除節點功能的實現的關鍵點在于如何計算出新增的節點及剩余節點的新的坐標位置。在該系統的實現中，某一節點的位置僅受到父節點的當前位置、兄弟節點的數目和子節點的數目的影響。當添加一個新節點的時候，需要計算出新節點的位置和新節點的兄弟節點的新位置。當刪除一個節點的時候，需要計算剩余兄弟節點的新位置。

3.2渲染子節點的垂直位置

當添加或刪除一個節點時，為了使該節點所在層次的所有子節點相對于父節點垂直居中，會重新渲染子節點的位置，子節點的位置具體計算方式如下。

圖4　

如圖4所示，設父節點的中心點F坐標為（hfx, hfy），父節點與子節點的橫向距離interval，父節點的寬為parentWidth。作水平線段FC，C點的橫坐標即為子節點的橫坐標childX。

每個子節點上下之間都有補白padding。設area-Height的值為所有子節點的高度和補白的高度，迭代所有子節點，即可求得areaHeight。然后在線段FC的C點上作一條高度為areaHeight的垂直平分線AB。

通過迭代子節點的高度可以求出每個子節點的垂直位置childY。設一個節點的高度加上上下補白稱為節點區域，startY為每一輪迭代中當前子節點的節點區域垂直坐標。在每一輪迭代中，當前子節點的childY等于當前子節點的startY加上一個padding。根據求得每個子節點的左上角坐標（childX, childY）即可渲染對應子節點。實現代碼如下：

function renderChild（father, padding, interval）{

var hfx, //父節點的中心x軸坐標

hfy, //父節點的中心y軸坐標

chilldren, //子節點數組

childX, //子節點的x軸坐標

startY, //子節點區域的起始坐標

areaHeight = 0; //所有子節點的高度加補白

hfx = father.x + interval;

hfy = father.y + interval;

children.forEach（function（child）{

"use strict";

var childY = startY + padding;

//已經求得當前子節點坐標（childX, childY）,在這里作渲染操作

renderNode（child, childX, childY）;

startY += getNodeHeight（child）+ padding * 2;

}）;

}

function getNodeHeight（）{} //獲取節點高度

function renderNode（node, x, y）{} //渲染節點，如果節點不存在則新建節點，否則移動節

3.3調整父節點的同級節點的垂直位置

添加或刪除節點會影響父節點的同級節點的垂直位置。如圖5所示，當添加一個節點時，該節點的父節點的同級節點需要被“撐開”：設該節點的1/2的區域高度為moveY，父節點的同級節點中，比父節點高的向上偏移一個moveY，比其低的向下偏移一個moveY，偏移操作可以調用svg的transform方法垂直平移節點。父節點的父節點的同級節點也做相同的處理，一直遞歸到根節點為止。當刪除一個節點時，節點的父節點的同級節點會被“壓低”，“壓低”操作和上述操作相似。注意，當增加第一個子節點和刪除最后一個節點時，不會進行“撐開”或者“壓低”操作。

圖5　

4　拖動節點

4.1根節點的拖動

當拖動根節點時，整個思維導圖也會移動。實現這種效果的其中一個方案就是移動整個思維導圖內的節點和連線。單個svg圖形的移動操作需要綁定mouseup、mousedown和mousemove三個事件，在移動時會不斷地觸發mousemove事件重新渲染svg圖形的位置，因此，移動svg圖形操作的性能并不高。移動單個svg對象不會有很大的性能瓶頸，但是如果一次性移動多個svg對象，在移動時會有明顯的“卡頓”感覺，嚴重影響用戶體驗。

實現整個思維導圖移動的另一個方案就是改變svg區域的視野。在svg中，視野是觀察世界的一個矩形區域，而世界是無窮大的。當改變視野的坐標時，視野中觀察到的物體的位置看上去好像是改變了，實際上是物體在世界上的位置沒有改變，而是觀察世界的矩形區域移動到了另外一個位置。如圖6和圖7所示，一開始物體在視野內的中央，當將視野向右下移動時，物體的位置變成了在視野內的左上角，效果上和將整個視圖左上角拖動是一樣的。

svg標簽提供了viewbox屬性來控制視野的范圍，而Raphale.js提供一個setViewBox的方法更便捷地控制視野。拖動根結點時改變svg視野的實現與上一個方案相比，既能達到拖動整個思維導圖的效果，性能上又能大幅度地提高。

4.2非根節點的拖動

本文實現的系統將拖動非根節點用于改變父子關系：節點拖動結束后，如果該節點與另一個節點重疊，則使重疊節點變為該節點的父節點，否則，節點回到原來的位置。

圖6　

圖7　

一個節點是Raphael.js的set對象，set對象可以監聽鼠標事件。監聽每個非根節點的mouseup、mousemove和movedown事件，分別對應按下鼠標、鼠標移動、放下鼠標三個狀態。在按下鼠標狀態下，會以當前節點為原型克隆一個節點用于占位。在拖動鼠標狀態下，通過改變節點的坐標實現節點位置改變。在放下鼠標狀態下，會判斷當前拖動的節點是否與其他節點重疊，通過Raphael.js的isBBoxIntersect函數即可判斷兩個節點是否重疊，如果重疊，則改變節點的父子關系，實現流程如圖8：

圖8　

5　結語

本文主要闡述了如何使用SVG實現思維導圖，SVG具有對象化的特點，使得很容易地將思維導圖的節點與SVG對象對應起來，且基于SVG對象所實現的事件機制，令繪圖時的交互實現變得簡單和高效。本文實現的系統將數據層和渲染層分離開來，讓數據和視圖解耦開來。本文介紹了如何繪制思維導圖的兩個基本元素——節點和邊；添加或刪除節點時各個節點位置都會有所改變，如何計算和渲染節點的位置是實現添刪節點功能的關鍵；本文還闡述了實現拖動節點改變父子關系的關鍵點。

參考文獻：

[1]高科.基于HTML5的數據可視化實現方法研究[J].科技傳播,2013,01:186-187.

[2]朱文.基于HTML5Canvas技術的在線圖像處理方法的研究[D].華南理工大學,2013.

[3]高峰,談俊忠. Java Script在基于SVG的網絡地圖中的應用[J].江西師范大學學報（自然科學版）,2004,03:262-265.

[4]徐曼.基于HTML5的統計圖表系統的研究與設計[D].武漢科技大學,2012.

[5]管英祥,任淵博,向為鋒.基于HTML Canvas的電磁態勢繪制方法[J].電腦知識與技術,2015,14:68-70.

[6]王喬俊,何原榮,李佳楠.基于SVG的旅游地圖符號庫的設計與實現[J].湖北科技學院學報,2015,08:21-23.

[7]宋善德,熊展志,李衛國,唐咸峰.基于SVG的矢量圖形編輯器的設計與實現[J].計算機工程與科學,2003,02:91-94.

任志豪（1993-），男，廣東花都人，本科生，現就讀于華南師范大學，研究方向為軟件工程

賴源勁（1994-），男，廣東番禺人，本科生，現就讀于華南師范大學，研究方向為數據庫

Implementation of Mind Map System Based on SVG

REN Zhi-hao，LAI Yuan-jin
（Software College, South China Normal University, Guangzhou 501631）

Abstract：The graphics technology which based on SVG, has characteristics of objectivity and convenient interaction, so it is suitable for the realization of the online mind map drawing. The basics functions of the mind map system based on the SVG include rendering node and edge, adding and removing nodes, changing nodes' position, dragging nodes. The key technical points of theses functions include calculating and rendering the nodes position.

Keywords：Mind Map; SVG; Realization

收稿日期：2015-12-31修稿日期：2016-03-02

作者簡介：book=75,ebook=76

文章編號：1007-1423（2016）09-0070-06

DOI：10.3969/j.issn.1007-1423.2016.09.018

基金項目：國家級大學生創新訓練計劃（No.2014115）