汪升華++唐國純

摘 要：針對目前開發(fā)思維導(dǎo)圖編程語言眾多，但跨平臺3D建模思維導(dǎo)圖軟件較少的情況，本文從HTML5方面，利用SVG技術(shù)、Canvas技術(shù)、X3D技術(shù)和WebGL技術(shù)驗證了整個分析方法的有效性和可行性，擴(kuò)展了思維導(dǎo)圖的可視化顯示途徑。此外利用WebGL開源框架如Three.js等可以調(diào)用WebGL著色器，實現(xiàn)3D網(wǎng)頁渲染效果。不用借助專業(yè)的3D設(shè)計工具，直接通過HTML5頁面就能進(jìn)行3D建模思維導(dǎo)圖。對思維導(dǎo)圖軟件的開發(fā)提供一種新的解決思路。

關(guān)鍵詞：思維導(dǎo)圖；HTML5；SVG；WebGL；軟件開發(fā)

中圖分類號：TP391.41 文獻(xiàn)標(biāo)識碼：A

Research on the Software Development Technology of 3D Mind

Mapping Based on HTML5

WANG Shenghua，TANG Guochun

（Department of Information，Qiongtai Normal University，Haikou 571100，China）

Abstract：In view of the numerous mind mapping programming languages and the insufficient cross-platform 3D modeling mind mapping software，the paper applies SVG technology，Canvas technology，X3D technology and WebGL technology to verify the validity and feasibility of the whole analysis method，and extends the visual display approaches of mind maps.In addition，the WebGL open-source framework，such as Three.js，can be applied to call the WebGL shader，which achieves the 3D webpage rendering effects.So 3D modeling mind mapping can be implemented directly through the HTML5 page，and the professional 3D design tools are no longer necessary.The research results provide a new solution to the development of mind mapping software.

Keywords：mind mapping；HTML5；SVG；WebGL；software development

1 引言（Introduction）

目前支持3D建模和動畫的軟件眾多，比如Maya、3DMax等，但是這些軟件不能滿足客戶對于3D思維導(dǎo)圖實時交互控制的功能。當(dāng)前思維導(dǎo)圖軟件構(gòu)建環(huán)境主要包括安卓端思維導(dǎo)圖軟件、PC端思維導(dǎo)圖軟件和IOS端思維導(dǎo)圖軟件。基于HTML5的三維思維導(dǎo)圖軟件可以在移動端和PC端同步編輯，實現(xiàn)思維導(dǎo)圖無縫連接。當(dāng)前Web瀏覽器越來越轉(zhuǎn)變成可以支撐豐富3D交互式程序的一個平臺，利用WebGL 技術(shù)成為一種Web3D可視化顯示的有效途徑[1-4]。本文從HTML5方面探討了其在思維導(dǎo)圖可視化設(shè)計方面的研究，利用SVG技術(shù)、Canvas技術(shù)、X3D技術(shù)和WebGL技術(shù)驗證了整個分析方法的有效性和可行性。無須借助3ds max和maya等專業(yè)3D設(shè)計工具，直接通過HTML5頁面就能進(jìn)行3D建模思維導(dǎo)圖，期望對思維導(dǎo)圖軟件的開發(fā)起到一定的參考作用。

2 目前思維導(dǎo)圖相關(guān)軟件的進(jìn)展現(xiàn)狀（Current

progress of the software related to mind mapping）

思維導(dǎo)圖作為傳遞發(fā)射性思維的一種高效工具，強(qiáng)調(diào)圖文融合，各級主題的關(guān)系通過隸屬、組合等的不同層級圖展現(xiàn)。思維導(dǎo)圖有效發(fā)揮左腦和右腦的機(jī)能，既有記憶、閱讀和思維的規(guī)律的體現(xiàn)，又有邏輯與想象、核心主題整體與局部的認(rèn)識再現(xiàn)。思維導(dǎo)圖的繪制結(jié)構(gòu)一般包括幾個要素：核心主題、主要分枝、分枝、各級層次、注釋主題、浮動主題和關(guān)聯(lián)等。隨著思維導(dǎo)圖在知識和技能學(xué)習(xí)傳遞方面的廣泛應(yīng)用，出現(xiàn)了越來越多的思維導(dǎo)圖相關(guān)軟件，如百度腦圖（KityMinder）、Xmind、MindNode、MindMeister和MindManager等。開發(fā)思維導(dǎo)圖的編程語言包括JAVA、Javascript、C#、GO語言、DLL、Delphi、Asp、Scala、Ruby、Python、PHP、Perl等。本文從HTML5方面探討了思維導(dǎo)圖軟件開發(fā)的技術(shù)研究。

3 HTML5在思維導(dǎo)圖研究開發(fā)領(lǐng)域的應(yīng)用（The

application of the research and development of

mind mapping based on HTML5）

自2014年10月，萬維網(wǎng)聯(lián)盟發(fā)布HTML5標(biāo)準(zhǔn)規(guī)范以來，基于HTML5應(yīng)用領(lǐng)域迅速推進(jìn)，成為解決PC端和移動端的無縫銜接的有效方案。下面就通過分析HTML5的SVG技術(shù)、Canvas技術(shù)、X3D技術(shù)、WebGL技術(shù)和Three.js技術(shù)，探討其在思維導(dǎo)圖可視化設(shè)計方面的研究。

（1）SVG技術(shù)

可伸縮矢量圖形SVG（Scalable Vector Graphics）是一種使用XML格式定義用于網(wǎng)絡(luò)的基于矢量的圖形，當(dāng)前已經(jīng)變成萬維網(wǎng)聯(lián)盟的一種標(biāo)準(zhǔn)。SVG基于XML，這意味著SVG DOM中的每個元素都是可用的，可以為某個元素附加JavaScript事件處理器。在SVG中，由于任意繪制圖形都可看作對象，當(dāng)其屬性改變時，其圖形在瀏覽器中也會重新顯示。HTML5支持內(nèi)聯(lián)SVG，具體使用過程中，SVG文件可通過以下標(biāo)簽嵌入HTML文檔：