技术报告基于HTML的三维思维导图软件开发技术

1、计划类别 项目编号 项目技术报告课题名称 项目主持人 承担单位 题目：基于HTML5的三维思维导图软件开发技术研究针对目前开发思维导图编程语言众多，但跨平台3D建模思维导图软件较少的情况，本文从HTML5方面，利用SVG技术、Canvas技术、X3D技术和WebGL技术验证了整个分析方法的有效性和可行性，扩展了思维导图的可视化显示途径。此外利用WebGL开源框架如Three.js等可以调用WebGL着色器，实现3D网页渲染效果。不用借助专业的3D设计工具，直接通过HTML5页面就能进行3D建模思维导图。对思维导图软件的开发提供一种新的解决思路。关键词：思维导图；HTML5；SVG；WebGL；

2、软件开发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建模和动画的软件众多，比如Maya、3DMax等，但是这些软件不能满足客户对于3D思维导图实时交互控制的功能。当前思维导图软件构建环境主要包括安卓端思维导图软件、PC端思维导图软件和IOS端思维导图软件。基于HTML5的三维思维导图软件可以在移动端和PC端同步编辑，实现思维导图无缝连接。当前Web浏览器越来越转变成可以支撑丰富3D交互式程序的一个平台，利用WebGL 技术成为一种Web3D可视化显示的有效途径1-4

6、。本文从HTML5方面探讨了其在思维导图可视化设计方面的研究，利用SVG技术、Canvas技术、X3D技术和WebGL技术验证了整个分析方法的有效性和可行性。无须借助3ds max和maya等专业3D设计工具，直接通过HTML5页面就能进行3D建模思维导图，期望对思维导图软件的开发起到一定的参考作用。2 目前思维导图相关软件的进展现状（Currentprogress of the software related to mind mapping）思维导图作为传递发射性思维的一种高效工具，强调图文融合，各级主题的关系通过隶属、组合等的不同层级图展现。思维导图有效发挥左脑和右脑的机能，既有记忆、阅

7、读和思维的规律的体现，又有逻辑与想象、核心主题整体与局部的认识再现。思维导图的绘制结构一般包括几个要素：核心主题、主要分枝、分枝、各级层次、注释主题、浮动主题和关联等。随着思维导图在知识和技能学习传递方面的广泛应用，出现了越来越多的思维导图相关软件，如百度脑图（KityMinder）、Xmind、MindNode、MindMeister和MindManager等。开发思维导图的编程语言包括JAVA、Javascript、C#、GO语言、DLL、Delphi、Asp、Scala、Ruby、Python、PHP、Perl等。本文从HTML5方面探讨了思维导图软件开发的技术研究。3 HTML5在思维

8、导图研究开发领域的应用（Theapplication of the research and development ofmind mapping based on HTML5）自2014年10月，萬维网联盟发布HTML5标准规范以来，基于HTML5应用领域迅速推进，成为解决PC端和移动端的无缝衔接的有效方案。下面就通过分析HTML5的SVG技术、Canvas技术、X3D技术、WebGL技术和Three.js技术，探讨其在思维导图可视化设计方面的研究。（1）SVG技术可伸缩矢量图形SVG（Scalable Vector Graphics）是一种使用XML格式定义用于网络的基于矢量的图形，当前已

9、经变成万维网联盟的一种标准。SVG基于XML，这意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加JavaScript事件处理器。在SVG中，由于任意绘制图形都可看作对象，当其属性改变时，其图形在浏览器中也会重新显示。HTML5支持内联SVG，具体使用过程中，SVG文件可通过以下标签嵌入HTML文档：或者。 1 2 3 4 存入我的阅览室 软件工程 2017年10期 工具与环境 PLC技术在智能遥感测试系统中的应用与研究 基于HTML5的三维思维导图软件开发技术研究 过程与模型 使用VRRP技术提高网络的可靠性 虚拟现实人机交互中多特征手势检验算法研究 机器阅读理解软件中答案相关句

10、的抽取算法研究 一种跨平台移动APP开发方法的研究及实现 信息系统与数据处理 基于物联网的计算机实验室智能化管理系统研究 基于Android平台的家政应用订单模块开发 城乡结合部新农村社区管理系统的设计与实现 基于云端协同管控的家庭药品管理系统 “互联网+”时代社区生活服务平台构建研究 基于WebAPI的移动端学生综合服务平台设计与实现 信息安全与安全软件 基于神经网络算法的移动云计算数据安全访问控制办法与实现 教育教学 软件工程专业企业实习体系与实践 EDA技术本科实践教学改革的研究与思考 基于TPACK的ACCESS数据库技术的实验教学设计 软件工程实践教学改革探讨 项目驱动下的软件工程教

11、学方法探讨 计算机辅助教学在人体结构课程教学中的应用 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) /页眉/页脚导航“更多”下没有内容，将“更多”隐藏 jQuery(.threeunit).hide(); 公司地址: 北京市西城区德外大街83号德胜国际中心B-11客服热线：400-656-5456客服专线子邮箱：电信与信息服务业务经营许可证：京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 = (