技術(shù)報(bào)告基于HTML的三維思維導(dǎo)圖軟件開發(fā)技術(shù)

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

2、軟件開發(fā)Research on the Software Development Technology of 3D MindMapping Based on HTML5WANG 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

3、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

4、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

5、software.Keywords：mind mapping；HTML5；SVG；WebGL；software development1 引言（Introduction）目前支持3D建模和動(dòng)畫的軟件眾多，比如Maya、3DMax等，但是這些軟件不能滿足客戶對于3D思維導(dǎo)圖實(shí)時(shí)交互控制的功能。當(dāng)前思維導(dǎo)圖軟件構(gòu)建環(huán)境主要包括安卓端思維導(dǎo)圖軟件、PC端思維導(dǎo)圖軟件和IOS端思維導(dǎo)圖軟件?；贖TML5的三維思維導(dǎo)圖軟件可以在移動(dòng)端和PC端同步編輯，實(shí)現(xiàn)思維導(dǎo)圖無縫連接。當(dāng)前Web瀏覽器越來越轉(zhuǎn)變成可以支撐豐富3D交互式程序的一個(gè)平臺，利用WebGL 技術(shù)成為一種Web3D可視化顯示的有效途徑1-4

6、。本文從HTML5方面探討了其在思維導(dǎo)圖可視化設(shè)計(jì)方面的研究，利用SVG技術(shù)、Canvas技術(shù)、X3D技術(shù)和WebGL技術(shù)驗(yàn)證了整個(gè)分析方法的有效性和可行性。無須借助3ds max和maya等專業(yè)3D設(shè)計(jì)工具，直接通過HTML5頁面就能進(jìn)行3D建模思維導(dǎo)圖，期望對思維導(dǎo)圖軟件的開發(fā)起到一定的參考作用。2 目前思維導(dǎo)圖相關(guān)軟件的進(jìn)展現(xiàn)狀（Currentprogress of the software related to mind mapping）思維導(dǎo)圖作為傳遞發(fā)射性思維的一種高效工具，強(qiáng)調(diào)圖文融合，各級主題的關(guān)系通過隸屬、組合等的不同層級圖展現(xiàn)。思維導(dǎo)圖有效發(fā)揮左腦和右腦的機(jī)能，既有記憶、閱

7、讀和思維的規(guī)律的體現(xiàn)，又有邏輯與想象、核心主題整體與局部的認(rèn)識再現(xiàn)。思維導(dǎo)圖的繪制結(jié)構(gòu)一般包括幾個(gè)要素：核心主題、主要分枝、分枝、各級層次、注釋主題、浮動(dòng)主題和關(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在思維

8、導(dǎo)圖研究開發(fā)領(lǐng)域的應(yīng)用（Theapplication of the research and development ofmind 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端和移動(dòng)端的無縫銜接的有效方案。下面就通過分析HTML5的SVG技術(shù)、Canvas技術(shù)、X3D技術(shù)、WebGL技術(shù)和Three.js技術(shù)，探討其在思維導(dǎo)圖可視化設(shè)計(jì)方面的研究。（1）SVG技術(shù)可伸縮矢量圖形SVG（Scalable Vector Graphics）是一種使用XML格式定義用于網(wǎng)絡(luò)的基于矢量的圖形，當(dāng)前已

9、經(jīng)變成萬維網(wǎng)聯(lián)盟的一種標(biāo)準(zhǔn)。SVG基于XML，這意味著SVG DOM中的每個(gè)元素都是可用的，可以為某個(gè)元素附加JavaScript事件處理器。在SVG中，由于任意繪制圖形都可看作對象，當(dāng)其屬性改變時(shí)，其圖形在瀏覽器中也會(huì)重新顯示。HTML5支持內(nèi)聯(lián)SVG，具體使用過程中，SVG文件可通過以下標(biāo)簽嵌入HTML文檔：或者。 1 2 3 4 存入我的閱覽室 軟件工程 2017年10期 工具與環(huán)境 PLC技術(shù)在智能遙感測試系統(tǒng)中的應(yīng)用與研究 基于HTML5的三維思維導(dǎo)圖軟件開發(fā)技術(shù)研究 過程與模型 使用VRRP技術(shù)提高網(wǎng)絡(luò)的可靠性 虛擬現(xiàn)實(shí)人機(jī)交互中多特征手勢檢驗(yàn)算法研究 機(jī)器閱讀理解軟件中答案相關(guān)句

10、的抽取算法研究 一種跨平臺移動(dòng)APP開發(fā)方法的研究及實(shí)現(xiàn) 信息系統(tǒng)與數(shù)據(jù)處理 基于物聯(lián)網(wǎng)的計(jì)算機(jī)實(shí)驗(yàn)室智能化管理系統(tǒng)研究 基于Android平臺的家政應(yīng)用訂單模塊開發(fā) 城鄉(xiāng)結(jié)合部新農(nóng)村社區(qū)管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) 基于云端協(xié)同管控的家庭藥品管理系統(tǒng) “互聯(lián)網(wǎng)+”時(shí)代社區(qū)生活服務(wù)平臺構(gòu)建研究 基于WebAPI的移動(dòng)端學(xué)生綜合服務(wù)平臺設(shè)計(jì)與實(shí)現(xiàn) 信息安全與安全軟件 基于神經(jīng)網(wǎng)絡(luò)算法的移動(dòng)云計(jì)算數(shù)據(jù)安全訪問控制辦法與實(shí)現(xiàn) 教育教學(xué) 軟件工程專業(yè)企業(yè)實(shí)習(xí)體系與實(shí)踐 EDA技術(shù)本科實(shí)踐教學(xué)改革的研究與思考 基于TPACK的ACCESS數(shù)據(jù)庫技術(shù)的實(shí)驗(yàn)教學(xué)設(shè)計(jì) 軟件工程實(shí)踐教學(xué)改革探討 項(xiàng)目驅(qū)動(dòng)下的軟件工程教

11、學(xué)方法探討 計(jì)算機(jī)輔助教學(xué)在人體結(jié)構(gòu)課程教學(xué)中的應(yīng)用 jQuery(#menuHeaderDiv).html(html); jQuery(function () jQuery(#morelayer).hover(function () jQuery(#divmorelayer).fadeIn(300); ) jQuery(#divmorelayer).hover(function () jQuery(#divmorelayer).fadeIn(300); , function () jQuery(#divmorelayer).fadeOut(300); ) ) jQuery(#menuFoot

12、erDiv).html(htmlFooter); jQuery(function () jQuery(#morelayerFooter).hover(function () jQuery(#divmorelayerFooter).fadeIn(300); ) jQuery(#divmorelayerFooter).hover(function () jQuery(#divmorelayerFooter).fadeIn(300); , function () jQuery(#divmorelayerFooter).fadeOut(300); ) ) if (jQuery(.morelayer_b

13、ody a).length = 0) /頁眉/頁腳導(dǎo)航“更多”下沒有內(nèi)容，將“更多”隱藏 jQuery(.threeunit).hide(); 公司地址: 北京市西城區(qū)德外大街83號德勝國際中心B-11客服熱線：400-656-5456客服專線子郵箱：電信與信息服務(wù)業(yè)務(wù)經(jīng)營許可證：京icp證060024號D Inc. All Rights Reserved jQuery(document.body).ready(function () if (jQuery.cookie(enablecookie) = null) jQuery.cookie(enablecookie

14、, 1); var ec = jQuery.cookie(enablecookie); if (ec = null) location.href = http:/ + domain + /content/error.aspx?error=nocookie; ); var showad = true; var Toppx = jQuery(.headbox).height() + jQuery(.banner).height() + 10; /60; var AdDivW = 100; var AdDivH = 252; var PageWidth = 800; var MinScreenW =

15、 1024; function scall1() if (!showad) return; if (window.screen.width MinScreenW) showad = false; / document.getElementById(ctl00_LeftDiv).style.display = none; / document.getElementById(ctl00_RightDiv).style.display = none; jQuery(#ctl00_LeftDiv).hide(); jQuery(#ctl00_RightDiv).hide(); return; var

16、Borderpx = 30; /(window.screen.width - PageWidth) / 2 - AdDivW) / 2; / document.getElementById(ctl00_LeftDiv).style.display = ; / document.getElementById(ctl00_LeftDiv).style.top = document.documentElement.scrollTop + Toppx; / document.getElementById(ctl00_LeftDiv).style.left = document.documentElem

17、ent.scrollLeft + Borderpx; / document.getElementById(ctl00_RightDiv).style.display = ; / document.getElementById(ctl00_RightDiv).style.top = document.documentElement.scrollTop + Toppx; / document.getElementById(ctl00_RightDiv).style.left = document.documentElement.scrollLeft + document.body.clientWi

18、dth - document.getElementById(ctl00_RightDiv).offsetWidth - Borderpx; jQuery(#ctl00_LeftDiv).show(); var Scrolltoppx = document.documentElement.scrollTop; var Scrollleftpx = document.documentElement.scrollLeft; jQuery(#ctl00_LeftDiv).css(top, Scrolltoppx + Toppx); jQuery(#ctl00_LeftDiv).css(left, Sc

19、rollleftpx + Borderpx); jQuery(#ctl00_RightDiv).show(); jQuery(#ctl00_RightDiv).css(top, Scrolltoppx + Toppx); jQuery(#ctl00_RightDiv).css(left, Scrollleftpx + document.body.clientWidth - document.getElementById(ctl00_RightDiv).offsetWidth - Borderpx); function hidead1() showad = false; document.get

20、ElementById(ctl00_LeftDiv).style.display = none; document.getElementById(ctl00_RightDiv).style.display = none; function addLoadEvent1(func) var oldonload = window.onload; if (typeof window.onload != function) window.onload = func; else window.onload = function () oldonload(); func(); window.onscroll

21、 = scall1; window.onresize = scall1; addLoadEvent1(scall1); var piao=false; var xPos = 300; var yPos = 200; var step = 1; var delay = 30; var height = 0; var Hoffset = 0; var Woffset = 0; var yon = 0; var xon = 0; var pause = true; var interval; var img1 = document.getElementById(ctl00_PiaoDiv); img

22、1.style.display = block; img1.style.top = yPos; function changePos() var Scrolltoppx = document.documentElement.scrollTop; var Scrollleftpx = document.documentElement.scrollLeft; width = document.body.clientWidth - 200; height = document.documentElement.clientHeight; Hoffset = img1.offsetHeight; Woffset = img1.offsetWidth; jQuery(img1).css(left, xPos + document.body.scrollLeft); jQuery(img1).css(top, Scrolltoppx + yPos + document.body.scrollTop); if (yon) yPos = yPos + step; else yPos = yPos - step; if (yPos = (