思维导图方面论文范文文献 与基于HTML5的三维思维导图软件开发技术相关研究生毕业论文范文

基于HTML5的三维思维导图软件开发技术，本文是关于思维导图研究生毕业论文范文跟思维导图和软件开发和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 MindMapping 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 3Dmodeling mind mapping software,the paper applies SVG technology,Canvas technology,X3D technology and WebGLtechnology to verify the validity and feasibility of the whole analysis method,and extends the visual display approaches ofmind maps.In addition,the WebGL open-source framework,such as Three .js,can be applied to call the WebGL shader,whichachieves the 3D webpage rendering effects.So 3D modeling mind mapping can be implemented directly through theHTML5 page,and the professional 3D design tools are no longer necessary.The research results provide a new solution to thedevelopment of mind mapping software.

Keywords:mind mapping;HTML5;SVG;WebGL;software development

1 引言(Introduction)

目前支持3D建模和动画的软件众多,比如Ma y a 、3DMax等,但是这些软件不能满足客户对于3D思维导图实时交互控制的功能.当前思维导图软件构建环境主要包括安卓端思维导图软件、PC端思维导图软件和IOS端思维导图软件.基于HTML5的三维思维导图软件可以在移动端和PC端同步编辑,实现思维导图无缝连接.当前Web浏览器越来越转变成可以支撑丰富3D交互式程序的一个平台,利用WebGL技术成为一种Web3D可视化显示的有效途径[ 1 - 4 ].本文从HTML5方面探讨了其在思维导图可视化设计方面的研究,利用SVG技术、Canvas技术、X3D技术和WebGL技术验证了整个分析方法的有效性和可行性.无须借助3ds max和maya等专业3D设计工具,直接通过HTML5页面就能进行3D建模思维导图,期望对思维导图软件的开发起到一定的参考作用.

2 目前思维导图相关软件的进展现状(Currentprogress of the software related to mind mapping)

思维导图作为传递发射性思维的一种高效工具,强调图文融合,各级主题的关系通过隶属、组合等的不同层级图展现.思维导图有效发挥左脑和右脑的机能,既有记忆、阅读和思维的规律的体现,又有逻辑与想象、核心主题整体与局部的认识再现.思维导图的绘制结构一般包括几个要素：核心主题、主要分枝、分枝、各级层次、注释主题、浮动主题和关联等.随着思维导图在知识和技能学习传递方面的广泛应用,出现了越来越多的思维导图相关软件,如百度脑图(KityMinder)、Xmind、MindNode、MindMeister和MindManager等.开发思维导图的编程语言包括JA、Jascript、C#、GO语言、DLL、Delphi、Asp、Scala、Ruby、Python、PHP、Perl等.本文从HTML5方面探讨了思维导图软件开发的技术研究.

3 HTML5在思维导图研究开发领域的应用(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格式定义用于网络的基于矢量的图形,当前已经变成万维网联盟的一种标准.SVG基于XML,这意味着SVG DOM中的每个元素都是可用的,可以为某个元素附加JaScript事件处理器.在SVG中,由于任意绘制图形都可看作对象,当其属性改变时,其图形在浏览器中也会重新显示.HTML5支持内联SVG,具体使用过程中,SVG文件可通过以下标签嵌入HTML文档：<embed><object>或者<iframe>.

< e m b e d s r c 等于 " m e . s v g " t y p e 等于 " i m a g e /svg+xml"width等于"120" height等于"120"/>

<embed>的优势为所有主要浏览器都支持,并允许使用脚本.缺点是不推荐在HTML4和XHTML中使用(但在HTML5允许).

<object data等于"me.svg" type等于"image/svg+xml"width等于"120" height等于"120"></object>

<o b j e c t>的优势为所有主要浏览器都支持,并支持HTML4、XHTML和HTML5标准.缺点是不允许使用脚本.<iframesrc等于"me.svg" frameborder等于"0" width等于"120"height等于"120"></iframe>

<iframe>的优势为所有主要浏览器都支持,并允许使用脚本.缺点是不推荐在HTML4和XHTML中使用(但在HTML5允许).

此外,SVG的代码可以直接嵌入到HTML页面中,或可以直接链接到SVG文件,详见表1.

比如,通过SVG画线、画圆和文本及相关页面设置,可构建软件技术(移动开发方向)课程群思维导图,如图1所示.

(2)Canvas技术

Canvas是HTML5中新增一个HTML5标签与操作Canvas的Jascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas>标记和SVG及VML之间的一个重要的不同是,<canvas>有一个基于JaScript的绘图API,而SVG和VML使用一个XML文档来描述绘图.比如创建了一个宽度为800像素、高度为600像素的canvas.<canvas id等于"can"width等于"800" height等于"600">Canvas</canvas>创建了canvas元素后,要在canvas元素上面绘制图像,首先必须获取Canvas环境上下文,canvas.getContext(画布上绘制的类型),值为2d表示2维,值为experimental-webgl表示试验版3维,值为webgl表示3维.Canvas主要绘图函数与功能详见表2.

值得注意的是,SVG和Canvas作为HTML5上两种完全不同的绘制图形模式,各有优缺点.同时SVG内容也可通过Canvas绘制,实现两种模式的融合.具体使用是将SVG图片付给图像的src属性,然后在Canvas中通过drawImage()函数加载显示.

(3)X3D技术

X3D是一种ISO认证,免版税的开放标准文件格式和运行架构,用于表示和传达3D场景和对象.X3D从虚拟现实建模语言(Virtual Reality Modeling Language,VRML)开始逐渐演变为成熟和精致的ISO X3D标准,提供了一种用于存储、检索和播放嵌入在应用程序中的实时图形内容,可用于工程和科学可视化、CAD和架构、3D打印和3D扫描、医学可视化、培训和模拟、多媒体、娱乐、教育等.目前X3D工作组为了能将X3D与HTML高效整合,加入了HTML工作组.在HTML页面中显示X3D场景的三种方式如下：①外部引用：在HTML页面中通过X3D插件,包含一个元素标签引用.x3d场景.在页面内可以使用DOM事件来传递数据.②X3D作为HTML中的XML元素：HTML页面直接包含X3D源码,很可能带有XML名空间前缀,一般通过X3D插件或浏览器本身来实现.③API访问方式：HTML页面包含特定形式的Canvas(或者可能为Canvas3D)元素,允许对页面进行编程式访问,以便X3D场景访问接口(SAI)可以绘制位图.

(4)WebGL 技术

WebGL(Web Graphics Library)是Khronos协会于2011年2月发布的一种新的Web三维绘图标准,属于HTML5标准的一部分,可以为HTML5 Canvas提供硬件3D加速渲染.在发展历程中,WebGL 1.0公开了OpenGL ES 2.0功能集.WebGL 2.0公开了OpenGL ES 3.0 API.WebGL将无插件的3D带入网络,直接进入浏览器.主要的浏览器厂商苹果(Safari)、谷歌(Chrome)、微软(Edge)和Mozilla(Firefox)都是WebGL工作组的成员.相比以往的VRML、X3D等3D可视化技术,浏览器通过集成 WebGL,使得用户不需要安装插件,就可在Web页面中实现3D渲染功能.这种绘图技术标准允许把JaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JaScript绑定,创建复杂的导航和数据视觉化.基于WebGL的应用程序除了包含传统的Web页面(HTML、CSS与JaScript文件),还包含用来展示的3D模型数据与着色器源代码.这些3D模型数据和着色器源代码通过JaScript调用WebGL API的方式提交给WebGL渲染管线,渲染管线调用GPU资源实现Web环境下的3D可视化快速渲染.WebGL进行3D可视化渲染管线如图2所示[5].

目前已经有很多不错的WebGL开源框架,比如GLGE、SceneJS、CubicVR、Three.js、Vis.js等[6-9].在众多的框架中,Three.js脱颖而出,它用简单而直观的方法封装了WebGL常用的三维对象.由于采用了Jascript语言,Three.js能很容易与其他浏览器组件进行交互,并用在HTML5三维思维导图的可视化中.一个典型的Three.js程序至少要包括渲染器(Renderer)、场景(Scene)、照相机(Camera),以及要在场景中创建的物体.一般包括下面几个步骤：

(1)引用：在使用Three.js之前,我们需要在HTML文件中引用该文件.

<script type等于"text/jascript" src等于"three.js"></script>.

(2)定义Canvas元素：

< c a n v a s i d 等于 " m a i n C a n v a s " w i d t h 等于 " 5 0 0 p x "height等于"500px" ></canvas>

(3)渲染器将和Canvas元素进行绑定：如果之前在HTML中手动定义了id为m1canvas的Canvas元素,那么Renderer可以这样写：

var renderer1等于new THREE.WebGLRenderer({

canvas:document.getElementById(´m1canvas´)});

如果想要Three.js生成Canvas元素,在HTML中就不需要定义Canvas元素,在JaScript代码中可以这样写：

var renderer1等于new THREE.WebGLRenderer();

renderer1.setSize(500,500);

d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( ´ b o d y ´ ) [ 0 ] .appendChild(renderer1.domElement);

上面代码的第二行表示设置Canvas的宽500像素,高500像素.第三行将渲染器对应的Canvas元素添加到<body>中.此外还可使用renderer.setClearColor()函数设置背景色.

(4)生成场景(Scene)：在Three.js中添加的物体都是添加到场景中的,因此它相当于一个大容器,实例化就可把物体添加到场景中.

var scene1等于new THREE.Scene();

(5)添加照相机(Camera)：WebGL和Three.js使用的坐标系是右手坐标系,可采用如下方式定义一个*投影的照相机,并添加到场景中

v a r c a m e r a 1 等于 n e w T H R E E . P e r s p e c t i v e C a m era(45,4/3,1,1000);

camera.position.set(0,0,6);

scene.add(camera1);

(6)添加场景显示物体：比如要创建一个x、y、z方向长度分别为4、5、6的长方体,并将其设置为红色,添加到场景中.

v a r c u b e 1 等于 n e w T H R E E . M e s h ( n e w T H R E E .CubeGeometry(4,5,6),

newTHREE.MeshBasicMaterial({

color:0xff0000

})

);

scene.add(cube1);

(7)渲染生成效果：在将物体和照相机添加到场景后,就可调用渲染器的渲染函数进行渲染并生成效果.

renderer.render(scene1,camera1);

在实际处理问题过程中,常把上面步骤封装在Jascript函数中,以供调用.

4 结论(Conclusion)

本文从HTML5的SVG技术、Canvas技术、X3D技术、WebGL技术和Three.js技术探讨了其在思维导图可视化设计方面的研究,直接通过HTML5页面进行思维导图构建,期望对思维导图软件的开发起到一定的参考作用.

参考文献(References)

[1] Xu Z,Zhang Y,Xu X.3D visualization for building informationmodels based upon IFC and WebGL integration[J].MultimediaTools and Applications,2016,75(24):17421-17441.

[2] Zampoglou M,Kapetanakis K,Stamoulias A,et al.Adaptives t r e a m i n g o f c o m p l e x Web 3 D s c e n e s b a s e d o n t h eM P E G - D A S H s t a n d a r d [ J ] . M u l t i m e d i a T o o l s a n dApplications,2016:1-24.

[3] Sawicki B,Chaber B.Efficient visualization of 3D models byWeb browser[J].Computing,2013,95(1):661-673.

[4] Zorrilla M,Martin A,Sanchez J R,et al.HTML5-based systemfor Interoperable 3D digital home applications[C].FourthInternational Conference on Digital Home.IEEE,2012:206-214.

[5] 黄若思,李传荣,冯磊,等.基于几何的WebGL矢量数据三维渲染技术研究[J].遥感技术与应用,2014,29(3):463-468.

[6] 高鹏,刘鹏,苏红森,等.基于HTML5与可视化工具包的医学影像三维重建及交互方法研究[J].生物医学工程学杂志,2015(2):336-342. [7] 魏书寒,孙麒.基于HTML5和WebGL的三维智慧社区管理系统的设计与研究[J].工业控制计算机,2017,30(5):139-140.

[8] 王磊,高珏,金野,等.基于Web 3D无插件的三维模型展示的研究[J].计算机技术与发展,2015(4):217-220.

[9] 高绮蔚,郭雅杰,高琴,等.基于WebGL的3D可视技术研究与实现[J].网络安全技术与应用,2017(2):65.

作者简介：

汪升华(1964-),男,学士,副教授.研究领域：计算机网络,教育技术.

唐国纯(1977-),男,硕士,教授,系统分析师.研究领域：软件工程,云计算,粒计算,人工智能,大数据,教育技术.

结论，本文是一篇关于思维导图方面的大学硕士和本科毕业论文以及思维导图和软件开发和HTML5相关思维导图论文开题报告范文和职称论文写作参考文献资料.

参考文献：

1、 基于思维导图在初中英语词汇教学中的应用 【摘要】思维导图是一种可视化教学工具,其又叫心智导图,能把人的发散性思维有效地表达出来 而且思维导图能够图文并茂的将知识表现出来,也能为学生建立记忆链,使得学生根据所给出的关键词,将影像、颜色……有机.

2、 思维导图在中职电子线路教学中的应用 【摘要】学生对学习中职电子线路的自信心和基础较弱,学习记忆的技巧不佳,缺乏良好的思维模式 借助思维导图能让知识结构化、形象化,激发学生的求知欲,用发散性的思维教学模式引导学生激发大脑的潜能,提高记忆效.

3、 高中数学思维导图教学模式的探究 【摘要】思维导图是表达发散性思维的有效思维工具 每一种进入大脑的资料,都可以成为一个思考核心点,并由此向外散发无数的分支,而这些分支之间又相互产生了关联 通过这样的方式去理解概念并分清概念间的联系与逻.

4、 以思维导图激活英语课堂的生命力 摘要英语课堂中,不少教师只是一味地重视如何教,看似学的东西有很多,但沉淀下来的却很少 对于此,在实践过程中,教师可尝试以思维导图激活英语课堂的生命力,以生动的思维活动,促进学生的精彩生成,让课堂焕发生.

5、 思维导图在英语单词教学中的应用探析 摘要思维导图是目前英语教学中普遍采用的一种教学模式,是指将大脑思维以图像的形式表达出来,帮助学生理解和记忆 学生在学习英语单词时,主动记忆单词的积极性不高,而随着思维导图的应用,学生更容易记忆图文并茂.

6、 思维导图在初中英语话题写作教学中的应用 摘要在英语写作教学中运用思维导图对于提升学生的英语写作能力,增强学生的英语写作兴趣和信心,提升学生的逻辑思维能力……有积极的促进作用 在初中英语话题写作教学中,可以在写前素材积累、写中文本构思、写后文.