基于HTML5的三維思維導圖軟件開發技術研究

汪升華++唐國純

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

關鍵詞：思維導圖；HTML5；SVG；WebGL；軟件開發

中圖分類號：TP391.41 文獻標識碼：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思維導圖實時交互控制的功能。當前思維導圖軟件構建環境主要包括安卓端思維導圖軟件、PC端思維導圖軟件和IOS端思維導圖軟件。基于HTML5的三維思維導圖軟件可以在移動端和PC端同步編輯，實現思維導圖無縫連接。當前Web瀏覽器越來越轉變成可以支撐豐富3D交互式程序的一個平臺，利用WebGL 技術成為一種Web3D可視化顯示的有效途徑[1-4]。本文從HTML5方面探討了其在思維導圖可視化設計方面的研究，利用SVG技術、Canvas技術、X3D技術和WebGL技術驗證了整個分析方法的有效性和可行性。無須借助3ds max和maya等專業3D設計工具，直接通過HTML5頁面就能進行3D建模思維導圖，期望對思維導圖軟件的開發起到一定的參考作用。

2 目前思維導圖相關軟件的進展現狀（Current

progress of the software related to mind mapping）

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

3 HTML5在思維導圖研究開發領域的應用（The

application of the research and development of

mind mapping based on HTML5）

自2014年10月，萬維網聯盟發布HTML5標準規范以來，基于HTML5應用領域迅速推進，成為解決PC端和移動端的無縫銜接的有效方案。下面就通過分析HTML5的SVG技術、Canvas技術、X3D技術、WebGL技術和Three.js技術，探討其在思維導圖可視化設計方面的研究。

（1）SVG技術

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