【维普】软件工程-基于WebGL的几何结构学习平台

目录绪论1.1研究背景及意义近年来，随着教育信息化的快速发展，在线教育资源短缺的问题逐渐缓解，但仍然不可忽视。现阶段我们面临的主要困境是对符合时代潮流的公平、良好的在线教育资源的需求问题。在中国和世界各地，越来越多的高收入家庭正在成长，他们对更高水平、更高质量、更金属化的在线教育的需求越来越大，这对在线教育资源供应构成了重大挑战，而且需求强劲，优质定制的在线教育资源太少，无法满足课堂上不同学生和监护人的个性化需求。此外，新型冠状病毒给传统学校教育正常的发展带来了影响，但也刺激了在线教育的兴起，学习关系、学习环境、学习者和学习方法都发生了严重变化，并进一步导致了“教育+互联网”的转变。在线教育相对于解决当前教育面临的不平衡问题具有优势，能够满足学生的个性化学习需求。虽然在线教育和家庭学习无法被传统课堂教育取代，但即使在积极的在线教育之后，传统课堂教育也往往会带来积极的变化，家庭在线学习将不可避免。与此同时，可视化技术在今天的信息时代中扮演着越来越重要的角色。数据是信息时代的核心，但是大量的数据并不容易被人们理解。通过可视化技术，可以将数据转化为更直观、更易于理解的形式，使人们更容易从数据中发现规律和趋势。同时也可以更快地找到数据中的关键信息。这有助于减少在数据中寻找信息所花费的时间和精力，从而提高工作效率。可视化技术可以让数据更加直观，更容易被人们理解。这有助于促进沟通和合作，使不同的人能够更好地共同工作和协作。它还可以通过使用数据脱敏技术来保护敏感信息的安全性。这可以防止未经授权的人员访问敏感数据，并帮助保护隐私。总之，可视化技术在今天的信息时代中具有重要的意义。它可以帮助人们更好地理解数据，提高决策的质量，提高效率，促进沟通和合作，同时还可以保护数据的安全性。通过在解析几何中加入可视化技术，可以提高学习效果，增强学习兴趣和参与度，拓展学习方式，从而更好地满足学习者的需求，促进解析几何教育的创新和发展。首先，解析几何中的概念和定理往往是抽象的，通过可视化技术可以将其转化为形象的图像和动画，使学习者更容易理解和掌握。其次，可视化技术可以帮助学习者更好地理解几何图形和变换，例如通过旋转、平移和缩放等变换来展示几何图形的性质和特征，从而提高学习效果。此外，解析几何中的某些概念和定理可以通过可视化技术进行模拟和演示，让学习者在实践中理解其本质和应用，从而更深刻地理解和掌握。另外，可视化技术可以增强学习者的学习兴趣和参与度，激发学习热情和积极性，使学习过程更加愉悦和有趣。最后，可视化技术可以拓展学习方式，为学习者提供更加灵活、多样化的学习途径，满足不同学习风格和需求的学习者。1.2国内外发展概况1.2.1在线学习平台在线学习平台指的是通过互联网为用户提供在线学习服务的平台。随着互联网的普及和技术的不断发展，在线学习平台逐渐兴起并发展壮大。早期的在线学习平台主要是一些学术机构和大学提供的远程教育课程。这些课程主要采用在线录播的方式，学生可以通过互联网观看教学视频，并通过电子邮件或在线讨论板与教师互动。这种形式的在线学习平台主要是为那些无法到校学习的学生提供方便的教育服务。随着技术的不断发展，以及互联网和移动设备的普及，在线学习平台逐渐从传统的远程教育模式向互动式、多媒体式、社交化的学习平台转变。这些平台提供了更加多样化和灵活的学习内容，包括在线课程、自主学习模块、知识问答社区等。与传统教育相比，基于现代信息技术的在线教育扩大了良好教育资源的优势，打破了时空的限制和体制的障碍，促进了教育的发展，这是对传统教育的前进突破。根据艾瑞咨询数据显示，2016年到2019年间，整个中国教育行业的信息化率从8%-10%上升到13%至15%。由于新型冠状病毒的影响，学校被推迟到广泛的在线教育，中国在线教育市场的数量达到3730亿元，比前一年增长35.5%，整体信息化率增长23%至25%。总体而言，我们的在线教育仍在初期阶段，发展潜力巨大。电子学习平台是实现电子学习的载体和基础，电子学习的快速发展与电子学习平台的发展息息相关。在线学习平台是教育和技术相结合的产物，所以其发展也主要受到非技术和技术两个方面因素的影响。在非技术方面，杨晓宏等人[1]以网易公开课等在线教育平台为研究对象，运用调查研究法、内容分析法分析了国内在线教育的发展现状，指出教学资源、教学模式、交互方式会对在线教育平台的发展产生影响。毛军权[2]对在线教育实践进行了反思，指出教学质量、优质资源共享的持续性、个性化教学的开展也是影响在线教育平台发展的重要因素。张男星等[3]将我国在线高等教育平台与国外在线高等教育平台进行比较，探讨了学科类型、课程语言、课程共享性等因素对在线高等教育平台国际影响力的影响。Kravvaris[4]则证实了用户在社交媒体上的推荐对在线教育平台发展的影响。在技术方面，王运武等[5]通过分析5G网络技术的优势，指出5G技术可以为在线教育平台提供全新的应用场景和广阔的发展空间。Chenetal.[6]指出平台技术对用户的满意度影响最大，是影响在线教育平台发展的首要因素。他们提出应当简化平台设计、提高平台对移动设备的适应性、增加平台功能、优化网络环境等建议以推动在线教育平台持续健康发展。Asarbakhsh、刘述、董伟等([7]-[9])也从用户体验角度对提高在线教育平台的可用性提出了相应的技术建议。当前的在线学习平台主要包括三种类型：MOOC（大规模开放在线课程）、SPOC（小规模私有在线课程）和BOP（在线与离线混合课程）。其中，MOOC是最具代表性的一种在线学习平台，它是一种开放式的在线课程，通常由知名大学或知名企业提供。学生可以通过互联网免费或付费参加课程，并与来自世界各地的其他学生交流和学习。而SPOC和BOP则更加注重个性化和定制化的学习服务，通常由企业或机构提供，可以为学生提供更加贴合实际需要的学习内容和服务。总的来说，在线学习平台的发展经历了从传统远程教育到互动式、多媒体式、社交化的学习平台的转变，同时也不断出现新的学习模式和服务形式。未来，随着技术的进一步发展和教育的深入变革，在线学习平台将会更加多样化和普及化，成为一种更加灵活、便捷和有效的学习方式。1.2.2可视化建模技术可视化建模技术是指利用图形界面和交互性操作来快速创建和修改三维模型的技术。它是三维建模技术的一种重要发展方向，主要应用于计算机辅助设计（CAD）、虚拟现实（VR）、电影、游戏、建筑设计等领域。可视化建模技术的主要特点是用户友好和操作直观，使得使用者无需熟练掌握大量命令和参数，而能够通过直观的图形界面和交互式手段来完成三维模型的创建和修改。这种技术的应用能够提高建模效率、缩短设计周期和降低建模成本。可视化技术出现于20世纪80年代，是一种利用计算机图像处理技术和网络编程技术，将图形信息在终端屏幕上呈现并与操作者进行交互的技术[10]。随着虚拟现实技术的快速发展，可视化技术逐步向三维立体方向发展[11]。三维可视化技术弥补了传统二维文本、表格等的不足，能让用户获得良好的沉浸感与交互感[12]，让用户能在虚拟环境中体验现实中的物理世界[13]。由于三维可视化技术的展示方式给人以更直观的方式更加贴近现实的世界，因此三维可视化技术逐渐应用于交通、军事、医疗等工业与生活中的各个领域[14-16]。目前国外研究中，SSannikov[17]等将三维可视化技术与增强现实用于中学教育中，提高学生的学习兴趣。LJia[18]等基于虚拟全向电源反馈分析装置的工作原理，通过VC++与OSG相结合，实现了三维虚拟物体的拾取与交互移动。XCSun[19]等为共享虚拟拆卸资源，设计了煤矿机械设备三维虚拟拆卸公共服务平台。国内也有许多学者对三维可视化技术开展研究。张青雷[20]等提出一种新的面向数字孪生车间的三维可视化交互系统六维模型，并开发出三维可视化交互系统，促进了人-物理-虚拟的协调与融合。邱枫[21]等开发出一套离散制造机加车间三维可视化监控系统，以解决现有可视化监控3D场景占用资源和系统大数据量并发时系统卡顿问题。3D计算机图形是在计算机和专门的3D软件的结合下创建的，3D计算机图形和2D计算机图形通过存储在计算机中的几何数据的三维数据表示来区分，并计算最终的三维图像。如今的开发人员使用更多的网页，这些网页封装在WebGL和GLSL语言中。由于开发过程大大简化，开发人员不需要关注三维图形渲染方法，而只关注三维图形开发，这是设计公司的实现，不需要循序渐进地解释渲染方法。只需较少的图形知识和计算机编程技能，就可以使用3D。它被开发人员广泛使用，并被用作基于WebGL的3D引擎技术中记录最广泛的工具。目前在3D建模中使用的工具有Three.js、Babylon.js、Blender等等。Three.js最初由RicardoCabello在2010年创建，它的设计目标是使得3D图形编程更加容易。与其他3D引擎相比，Three.js具有更简洁的API和更易于使用的工具，它使得即使没有深入了解3D编程的开发者也可以创建出优秀的3D应用程序。在Three.js中，所有的3D对象都是由基本的几何形状构成的，如球体、立方体、圆柱体等等。开发者可以使用Three.js提供的材质和纹理来渲染这些几何形状，并可以将它们组合在一起来创建复杂的3D场景。同时，Three.js还支持灯光、阴影、相机和动画等特性，使得开发者可以创建出更加真实和具有交互性的3D场景。由于Three.js基于WebGL技术，因此它可以运行在现代的Web浏览器中，而不需要安装任何插件。它的代码可以很容易地集成到其他的Web应用程序中，如网站、游戏、教育和可视化等应用领域。2.Babylon.js是一个基于WebGL的开源的JavaScript3D引擎。自2013年由微软创立以来，它不断迭代升级，发布了多个版本，包括了新的功能和API，例如新的GUI系统、物理引擎、VR支持、PBR系统等。随着版本的不断迭代，Babylon.js已成为WebGL3D引擎中的佼佼者，受到了越来越多开发人员和公司的关注和使用，应用于游戏、VR、建筑和工业设计等领域。3.Blender在中国的使用者逐渐增多，尤其是在CG行业和教育领域。由于Blender是一款免费、开源的软件，这使得它在中国市场上比其他商业软件更加具有竞争力。Blender在中国拥有着庞大的社区，开发者们制作了大量的插件和工具，增强了Blender的功能。在教育领域，越来越多的学校开始将Blender纳入课程，用于教授3D建模、动画制作等相关知识。1.2.3解析几何建模软件几何分析是数学领域的一个重要板块，能够反映学生对于空间几何理解的能力。若能够利用数学软件演示形状和几何图形，这将有助于未来的学生在初中继续接受数学教育。当然，几何分析是培养学生解决问题、逻辑思维和创新技能的有效工具。此外，分析几何课程的内容相对抽象，学习过程不那么容易，学生对学习不感兴趣，为了能使学生学习兴趣增加，课堂学习效率提高，出现了教学辅助软件。信息技术的发展，教育支持软件的出现，让教育变得更容易。随着计算机技术的飞速发展，数学教学辅助软件[22]使数学课堂发生了巨大变化。教育信息化推动着“网络学习空间人人通”工作不断深入，这也为辅助软件在解析几何中的应用创造了条件。《网络学习空间建设与应用指南》[23]对网络学习空间的应用目标进行了说明，首先要将以学生为中心的教育理念深入人心，其次要转变教学方式，由以教为主转向以学为主，采取自主学习、合作学习以及探索式学习等多种个性化的学习方式。关于网络学习空间概念的论述，钟绍春[24]认为网络学习空间是为网络上不同的教育用户提供的个性化服务的应用系统；郭绍青[25]认为网络学习空间是聚集数字与智力教育资源，不断发展与融合新型信息技术，提供虚实相融合的虚拟学习环境。通过这种网络学习空间，将数学软件融入几何教学，将为数学课堂带来巨大的变化，将会突破传统教学无法解决的难题。同时，也可以弥补教师直接讲授的抽象与乏味，让学生的学习由被动转为主动。在此基础上，学生可以锻炼他们的空间想象能力，让他们在学习中更加积极。可视化技术在解析几何中的应用非常广泛。可视化技术可以通过图形化的方式直观地展现这些几何图形和代数方程之间的关系，从而帮助人们更好地理解和应用解析几何知识。以下是可视化技术在解析几何中的具体应用：1.三维图形可视化：可视化技术可以将三维图形在屏幕上呈现出来，使得人们可以通过旋转、缩放等操作来观察和研究这些图形，从而更好地理解其性质。通过可视化技术，人们可以更直观地感受到三维图形的特点，同时也可以更加深入地研究其内在性质。2.几何图形动态演示：可视化技术可以实现几何图形的动态演示，从而帮助人们更好地理解几何变换的概念和性质。例如，通过可视化技术可以呈现平移、旋转、缩放等几何变换的动态过程，使得人们可以更直观地理解几何变换的本质和特点。3.代数方程图形可视化：可视化技术可以将代数方程对应的图形呈现在屏幕上，从而帮助人们更好地理解方程与图形之间的关系。例如，通过可视化技术可以呈现二次曲线、圆锥曲线等图形的形状和特点，使得人们可以更直观地理解代数方程与图形之间的关系。4.建模和仿真：可视化技术可以利用建模工具快速创建复杂的几何图形，并通过仿真工具对其进行分析和优化。例如，通过可视化技术可以实现复杂机械结构的建模和仿真，从而帮助人们更好地理解其结构和运行特点。可视化技术在解析几何中具有重要的意义。可视化技术通过图形和图像的展示，能够将抽象的数学概念和几何对象转化为直观的可视化形式，从而帮助人们更好地理解和掌握解析几何的概念和原理。解析几何涉及到平面、直线、曲线、曲面等抽象的几何对象。通过可视化技术，可以将这些几何对象呈现为图形或图像，使人们可以更直观地理解它们的性质、形状和关系。并且，解析几何通常需要进行一系列的推导和计算过程，通过可视化技术可以将这些过程中的中间结果以图形或动画的形式展示出来，帮助人们更好地跟踪和理解解析的思路和步骤。可视化技术可以帮助人们通过交互方式探索几何性质。例如，通过拖动几何对象的顶点或参数，可以实时观察到图形的变化，从而深入理解几何对象的特点和规律。同时，可视化技术也为解析几何的教学和学习提供了强大的工具。通过利用计算机软件或在线交互工具，可以创建动态的几何演示和实例，使学生更加主动参与，提高对解析几何的兴趣和理解。解析几何的方法和技巧在各个领域都有广泛的应用，如计算机图形学、计算机辅助设计（CAD）、机器人学等。可视化技术能够将解析几何的概念和方法与实际问题相结合，帮助人们更好地分析和解决现实世界中的几何和空间关系问题。总的来说，可视化技术在解析几何中的应用可以帮助人们更好地理解和应用相关知识，从而提高解析几何的教学效果和工程实践的效率。随着计算机技术的不断发展，可视化技术在解析几何中的应用前景将会更加广阔。1.3论文结构论文的每一章概要如下：第1章，绪论：先讲述了论文的研究背景以及意义，之后讲述国内外发展概述，包括网络学习、可视化技术以及可视化技术在解析几何中应用的发展背景和研究现状，最后提出本论文的论文结构。第2章，系统相关技术概述：本章讲述了WebGL技术和一些相关的几何图形概述，包括Hilbert曲线，Delaunay三角网和Voronoi图。第3章，系统分析：本章对系统进行分析。对这个课题的可行性进行分析，判断设计方案的可行性。从功能的角度，对本课题的需要实现的功能进行了分析；从非功能性的角度，对课题的可靠性进行了分析。第4章，系统设计：本章对系统进设计，其中对象的设计就是对系统的主体进行分析，功能模块的设计部分画出流程图，给出生成算法的思想流程，用图片和文字加以叙述。第5章：系统实现。本章介绍Hilbert，Delaunay，Voronoi的生成算法的实现以及系统各个模块功能的实现，展示代码附上算法流程图并通过语言描述最后给出最后实现的界面。第6章：系统测试。本章在系统开发完成以后，对系统进行测试。针对测试存在的问题进行分析，及时改正系统问题。第7章：总结与展望。在本章节中，首先，对推荐系统进行了总结，并指出了系统需要改进之处。然后，总结了自己在系统开发中的经验和体会。系统相关技术概述2系统相关技术概述2.1WebGL技术WebGL是一项用于在Web浏览器中渲染3D图形的技术，它的发展历史可以追溯到WebGL的前身——Mozilla实验室的Canvas3D项目。2006年，Mozilla实验室的VladimirVukicevic创建了Canvas3D项目，旨在使用HTML5Canvas元素在Web浏览器中渲染3D图形。这项技术的原型使用JavaScript和OpenGLES2.0API，为Web开发者提供了一种新的方式来创建3D图形和游戏。随着HTML5标准的制定和Canvas元素的普及，Canvas3D项目成为了WebGL技术的基础。2009年，Mozilla实验室在WebGL项目中实现了WebGL的第一个版本。WebGL使用OpenGLES2.0API，这是一种用于移动设备的OpenGL版本。WebGL提供了一种在Web浏览器中渲染3D图形的标准方式，同时也提供了一个跨平台、高性能的图形渲染API。2010年，WebGL1.0规范被KhronosGroup发布。KhronosGroup是一个专门制定图形标准的非营利组织，它是OpenGLES的创造者之一。WebGL的发布标志着Web上3D图形渲染技术的里程碑式进步，同时也促进了游戏和虚拟现实等行业的发展。WebGL的发展得到了各大浏览器厂商的支持，包括Google、Mozilla、Apple和Microsoft等。这些浏览器厂商纷纷推出了支持WebGL技术的浏览器版本，并不断完善WebGL的实现，提高了WebGL的性能和可靠性。2011年，Google推出了WebGL技术的新实现——ANGLE（AlmostNativeGraphicsLayerEngine），这是一个开源项目，旨在将OpenGLES2.0API转换为DirectX9API或OpenGLAPI。ANGLE使得使用Windows操作系统的用户也能够享受WebGL带来的3D图形和游戏体验。2013年，WebGL2.0规范被发布。WebGL2.0相比于1.0版本增加了许多新的功能和扩展，包括更高的图形性能、更好的错误处理、更多的纹理格式和更丰富的着色器语言。WebGL2.0的发布进一步提升了Web上的3D图形渲染水平。发展史如图2.1所示。图2.1WebGL的发展WebGL的发展带动了Web上的3D图形和游戏的繁荣，越来越多的开发者开始使用WebGL技术来创建高质量的3D图形和游戏。WebGL技术的应用也开始向其他领域拓展，例如工业设计、虚拟现实和医学影像等。在工业设计领域，汽车、飞机等大型产品的设计可以借助WebGL实现更加精细的模型制作和展示，同时方便不同地点的设计师之间协同工作。在虚拟现实领域，WebGL技术可以实现更加逼真的3D场景[26]，帮助用户身临其境地体验虚拟世界。在医学影像领域，WebGL技术可以实现更加精准的模型重建，帮助医生更好地进行病例诊断和治疗计划制定。WebGL技术的发展带动了浏览器的发展。浏览器越来越强大，性能也越来越好，支持的WebGL版本也在不断更新。同时，移动设备的普及也为WebGL应用的发展带来了新的机遇和挑战。WebGL技术也逐渐融入到移动应用的开发中，例如游戏和AR应用等。目前所有主流浏览器（如Chrome、Firefox、Safari、Edge等）都已经支持WebGL技术，用户可以在这些浏览器上无需任何插件或扩展即可体验WebGL应用。同时，也有许多第三方库和框架（如three.js、Babylon.js等）可以帮助开发人员更加方便地使用WebGL来创建复杂的3D场景。见图2.2：图2.2各浏览器版本所支持的WebGL情况WebGL（WebGraphicsLibrary）是一种基于JavaScriptAPI的图形渲染技术，用于在Web浏览器中实现高性能的3D图形渲染。下面是关于WebGL的一些理论知识：1.原理和架构：WebGL基于OpenGLES（OpenGLforEmbeddedSystems）标准，提供了在Web浏览器中进行硬件加速的3D图形渲染能力。WebGL使用HTML5的<canvas>元素作为图形渲染的目标，并通过JavaScript调用WebGLAPI来操作和控制图形渲染的过程。WebGL将图形渲染任务交给了图形处理单元（GPU）来执行，以实现高性能的渲染效果。2.语言和API：WebGL使用JavaScript作为主要的编程语言，开发者可以使用JavaScript编写图形渲染的逻辑和控制代码。WebGL提供了一组底层的API，用于进行图形渲染相关的操作，例如创建和管理渲染上下文、定义和加载3D模型、设置着色器程序、绘制图形等。3.图形渲染管线：WebGL遵循基本的图形渲染管线，包括几何处理、顶点着色器、片段着色器等阶段。几何处理阶段负责处理顶点数据，进行顶点变换、裁剪和投影等操作。顶点着色器阶段用于对每个顶点进行着色和变换操作。片段着色器阶段用于对每个像素进行颜色计算，包括光照、纹理映射等。4.数据和缓冲：WebGL使用缓冲区（buffer）来存储和管理顶点数据、纹理数据等。顶点缓冲区（vertexbuffer）用于存储顶点的位置、颜色和纹理坐标等信息。索引缓冲区（indexbuffer）用于存储图元（如三角形）的索引信息，以便进行高效的绘制。纹理缓冲区（texturebuffer）用于存储和管理纹理图像数据，实现纹理映射效果。5.着色器编程：WebGL使用着色器程序来控制图形的渲染和显示效果。顶点着色器（vertexshader）负责处理每个顶点的位置和属性，并进行坐标变换和光照计算等操作。片段着色器（fragmentshader）负责计算每个像素的颜色和光照效果。开发者可以使用GLSL（OpenGLShadingLanguage）编写着色器程序，通过WebGLAPI将其加载和链接到渲染管线中。他的编写过程类似于OpenGLES的编写过程。下面是WebGL编写的一般步骤：1.初始化WebGL上下文：使用JavaScript代码创建一个HTML5画布元素，并调用其`getContext()`方法来获取WebGL上下文对象。2.设置视口和背景色：使用WebGL上下文的`viewport()`方法来设置视口大小和位置，并使用`clearColor()`方法来设置背景色。3.创建着色器：WebGL使用着色器来对场景进行渲染，因此需要编写着色器代码。着色器是使用GLSL（OpenGLShadingLanguage）语言编写的，包括顶点着色器和片段着色器两种类型。4.编译和链接着色器：使用WebGL上下文的`createShader()`方法创建着色器对象，并使用`shaderSource()`方法将着色器源码附加到着色器对象上。然后，使用`compileShader()`方法将着色器编译成可执行的格式，并使用`createProgram()`方法创建一个程序对象，并使用`attachShader()`和`linkProgram()`方法将顶点和片段着色器链接到程序对象上。5.创建顶点缓冲区：使用WebGL上下文的`createBuffer()`方法创建一个顶点缓冲区对象，并使用`bindBuffer()`方法将其绑定到WebGL上下文中。6.传递顶点数据：使用WebGL上下文的`bufferData()`方法将顶点数据传递到顶点缓冲区中。7.激活和传递顶点属性：使用WebGL上下文的`getAttribLocation()`方法获取顶点着色器中定义的属性变量位置，然后使用`vertexAttribPointer()`方法激活和传递这些属性变量。8.渲染场景：使用WebGL上下文的`clear()`方法清空画布，并使用`drawArrays()`或`drawElements()`方法渲染场景。9.循环渲染：使用JavaScript代码编写渲染循环，以不断更新场景并重新渲染。总的来说，WebGL编写的流程较为繁琐和复杂，但可以实现高性能和高质量的3D场景渲染效果，开发人员可以根据具体的需求和场景选择不同的库和框架来协助WebGL的开发。基于WebGL创建网页3D的一般过程如图2.3所示：图2.3WebGL绘制过程2.2三种几何结构理论基础本平台主要包含三种几何结构，分别是Hilbert曲线，Delaunay三角网，Voronoi图。Hilbert曲线具有空间填充、数据压缩与编码、空间索引、图像压缩与渐进传输以及数据可视化等方面的应用优势。它在各种领域中被广泛应用，为数据处理、存储和可视化等问题提供了有效的解决方案。Delaunay三角网具有三角网生成、空间插值和重构、空间查询和分析、地图投影和网格生成、纹理映射和形状变形等多个应用优势。它为计算机图形学、计算几何和空间分析等领域的问题提供了强大的解决方案。Voronoi图具有空间分析与查询、区域分割与边界划分、位置插值与插值表面、随机样本生成与分布分析、数据可视化与图形设计等多个应用优势。它为计算几何、计算机图形学和空间分析等领域的问题提供了强大的解决方案。可以看出这三个几何结构都具有分成重要的应用意义，因此本系统选择了这三个几何结构来供学习。（1）Hilbert曲线从数学的角度上看，可以将空间填充曲线看成是一种把N维空间数据转换到1维连续空间上的映射函数。实际上，存储磁盘（常见的关系型数据库）是一维的存储设备，而空间数据大多都是多维数据，很少存在一维顺序。因此，为了使多维空间上邻近的元素映射也尽可能是一维直线上邻近的点，专家们提出了许多的映射方法。希尔伯特曲线（如图2.4所示）是填充曲线，类似的填充曲线包括Z曲线、格雷码和其他一些曲线。希尔伯特曲线可以通过离散单元线性地遍历两个或多个维度，作为它们自己的空间填充曲线特性的函数，只遍历一次，并且每个离散单元被线性排序和编码为该单元的唯一标识。空间填充曲线可以将高维空间中的无序数据映射到一维空间中，这允许空间中的相邻对象与块相邻地存储，减少IO时间，并提高存储器中数据处理的效率。图2.4Hilbert曲线Hilbert曲线的构造方法本质上是一个递归过程，因此当我们要构造n阶的Hilbert曲线时，可以先构造4个n-1阶的Hilbert曲线，这4个n-1阶的Hilbert曲线通过特定的顺序连接起来。其实连接顺序就只有4种，跟1阶Hilbert相似，不过开口方向不同而已。这四个变换不存在错切，只需要考虑缩放、旋转和平移，4个变换分别为:W1=00.500.500W3=0.500.500.50.500（2）Delaunay三角网Delaunay三角网（如图2.5所示）是对于平面上给定的一组离散的点集，对它进行三角划分。Delaunay三角剖分本质上不是一个真正的算法，而只是一个“好”三角形网格的定义，它有空圆特性和最大化最小角两个优秀的特性，这有效避免了狭长三角形的产生。其中空洞圆性质是指对于Delaunay三角网当中的任何一个Delaunay三角形，做他的外接圆，在这个外接圆的内部，不会包含其他任何的一个随机点。最大化最小角指的是在三角网当中，取其中任意两个相邻的Delaunay三角形组成的四边形，这个四边形有六个内角（因为两个三角形有一条公共边，将其划分为六个内角），这六个内角中最小的角记为a。将这个四边形换一个对角线，重新产生六个内角，最小的角记为b，则a<=b恒成立。四点共圆性判定的公式如下：给定四个不共线的点A(x[0],y[0]),B(x[1],y[1]),C(x[2],y[2]),D(x[3],y[3])，它们构成一个Delaunay三角网的条件是，四点所形成的外接圆不包含其他的点。公式为：(x[0]^2+y[0]^2)(x[1]-x[2])(x[3]-x[2])+(x[1]^2+y[1]^2)(x[2]-x[0])(x[3]-x[0])+(x[2]^2+y[2]^2)(x[0]-x[1])(x[3]-x[1])+(x[3]^2+y[3]^2)(x[1]-x[0])(x[2]-x[0])=0（5）以及(x[0]^2+y[0]^2)(y[2]-y[1])(y[3]-y[1])+(x[1]^2+y[1]^2)(y[0]-y[2])(y[3]-y[2])+(x[2]^2+y[2]^2)(y[1]-y[0])(y[3]-y[0])+(x[3]^2+y[3]^2)(y[2]-y[0])(y[1]-y[0])=0（6）其中，(x[i],y[i])表示第i个点的坐标，(x,y)表示欲判断的点的坐标。如果(x,y)在外接圆内，则四点不满足Delaunay条件。生成Delaunay三角网的常见方法有暴力法、递归法、重心法、分治法暴力法是一种基本的生成Delaunay三角网的方法，其基本思想是：从点集中依次取出每个点，并找到所有不以该点为顶点的三角形，判断该点是否在这些三角形的外接圆内。若该点不在任何三角形的外接圆内，则以该点与这些不以该点为顶点的三角形的三个顶点为顶点生成新的三角形，同时将这些三角形从原来的三角形集合中删除，并将新生成的三角形加入集合。该方法的时间复杂度为O(n^4)。递归法是一种比暴力法更高效的生成Delaunay三角网的方法。其基本思想是：将点集分为两部分，分别生成它们的Delaunay三角网，然后将它们合并成一个Delaunay三角网。合并的过程中需要对两个Delaunay三角网的边界进行合并，这个过程可以使用合并Hull的方法来实现。该方法的时间复杂度为O(nlogn)。重心法是一种生成Delaunay三角网的常用方法之一。其基本思想是：首先将点集中的点连接成一个大的三角形，然后将每个新加入的点插入到三角网中，并调整相邻三角形的连接关系，以维持Delaunay三角网的性质。插入点的位置是在对应的三角形的重心处，即三角形三个顶点的平均值处。该方法的时间复杂度为O(n^2)。分治法是一种生成Delaunay三角网的常用方法之一。其基本思想是：将点集按照x轴坐标进行排序，然后将点集分为左右两部分，分别生成它们的Delaunay三角网，然后将它们合并成一个Delaunay三角网。合并的过程中需要对两个Delaunay三角网的边界进行合并，这个过程可以使用合并Hull的方法来实现。该方法的时间复杂度为O(nlogn)。图2.5Delaunay三角网（3）Voronoi图Voronoi图（如图2.6所示）是一种基于点集的图形表示方法，它将平面或空间分割成一系列的多边形或多面体，每个多边形或多面体都由距离最近的点组成。Voronoi图的构造方法是，以点集中的每个点为圆心，构造一个圆或球形区域，然后将每个区域的边界连接起来，形成一系列的多边形或多面体，这些多边形或多面体就是Voronoi图的基本单位。对于一组点集P={p1,p2,...,pn}，Voronoi图V(P)是由所有使得每个点pi到其最近邻点之间的距离最小的点构成的区域组成的图形结构。对于点集P中的每个点pi，其Voronoi区域Vor(pi)是与pi最近的所有点构成的凸多边形或多面体。对于点集P中的每条边ei，其对应的Voronoi边Vor(ei)是相邻两个点pi和pj的垂直平分线（二维情况）或垂直平面（三维情况）。Voronoi图可以通过一些算法来计算，其中一种常用的算法是Fortune's算法。该算法基于扫描线的思想，在不断更新扫描线的过程中构建Voronoi图。Voronoi图可以用数学表达式表示。假设点pi的坐标为(xi,yi)，则点pi到其最近邻点pj的距离为d(pi,pj)=sqrt((xi-xj)^2+(yi-yj)^2)（7）Voronoi图可以表示为一组以点pi为中心，半径为d(pi,pj)的圆或球，其中pj是pi的最近邻点。下面介绍一下生成Voronoi图的常用算法：1.Fortune算法Fortune算法是一种高效的Voronoi图生成算法，它基于扫描线算法和平衡树数据结构。该算法首先将种子点按照y轴坐标进行排序，然后按顺序遍历这些点，同时维护一个前缀边集合和一个事件队列。在遍历过程中，不断处理事件队列中的事件，每当遇到一个新的种子点时，就会根据前缀边集合构建一个新的Voronoi图单元，并将相关的边添加到前缀边集合中。该算法的时间复杂度为O(nlogn)。2.Delaunay三角剖分Delaunay三角剖分是一种基于Voronoi图的生成方法，它先生成一个Delaunay三角剖分，然后通过对Delaunay三角形进行对偶转换来得到Voronoi图。具体地，对于每个Delaunay三角形的外接圆心，都可以得到一个对应的Voronoi图顶点。对于两个相邻的Delaunay三角形，它们的外接圆心之间的连线就对应着Voronoi图上的一条边。Delaunay三角剖分是一种常见的离散化方法，在计算机图形学和计算机视觉等领域得到广泛应用。3.Lloyd松弛算法Lloyd松弛算法是一种迭代算法，用于优化一个已知的点集的Voronoi图。该算法首先将初始点集的Voronoi图计算出来，然后将每个Voronoi图单元的重心移动到包含它的多边形的重心处。然后，再根据新的点集重新计算Voronoi图。该算法可以重复执行多次，每次迭代都会使Voronoi图更加平滑。该算法的应用包括计算几何、图像处理等领域。图2.6Voronoi图2.3本章小结本章主要介绍与本系统相关的WebGL技术和三种几何结构。其中WebGL是一种基于JavaScriptAPI的图形渲染技术，用于在Web浏览器中实现高性能的3D图形渲染，这将有利于系统的图形可视化展示。三种几何结构，分别是Hilbert曲线，Delaunay三角网，Voronoi图。给出了Hilbert曲线的定义以及生成他的方法。给出了Delaunay三角网的应用，定义和一些生成的常用算法。给出了Voronoi图的介绍和他的一些常用的生成方法。通过本章，可以对系统中的一些技术与几何概念有初步的了解。系统需求分析3系统需求分析3.1功能分析3.1.1总体功能分析基于WebGL的几何结构学习平台是为了能够使用户直观地学习、理解一些几何结构而设计出来的。本平台根据实际应用需求，应包括登陆注册，通过本功能获取进入系统的权限；修改个人信息，通过本功能可以更改信息；图形收藏，通过本功能可以收藏那些感兴趣的几何结构；图形查看，可以查看图形的基本信息；图形生成，允许用户直观地看到他们的生成，获得进一步了解；图形性质学习，可以让用户直观地看到几何结构的性质究竟是怎样的等主要功能，如图3.1所示。图3.1几何结构学习平台主要功能其中，图形操作中的操作对象包括三种不同的几何结构，分别是Hilbert图、Delaunay三角网、Voronoi图。这三个几何结构由于生成方式，验证性质的不同，可以划分成不同的子系统，分别对他们进行需求分析。几何结构学习平台按照功能的独立性，可以划分为5个子系统，如图3.2所示。图3.2几何结构学习平台子系统分解图下面分别分析每个子系统的功能需求。3.1.2用户管理用户管理包含登陆注册以及个人信息的修改，主要的功能点包括用户登录，在账号密码匹配时可以正常登录；用户注册，用户名不可以重复，两次密码应该一致；用户信息修改，用户可以在系统中随时修改自己的信息；查看个人信息，用户可以在系统中随时查看自己的信息。用例图如图3.3所示。图3.3用户中心用例图3.1.3图形查看与收藏图形查看包括的功能点有查看几何结构的名称，用户可以查看自己感兴趣的几何结构叫什么名字；对几何结构进行收藏，用户可以在图形操作界面对几何结构进行收藏；删除收藏的几何结构，用户可以在收藏界面删除已经收藏的几何结构；查看几何结构的简介，用户可以查看感兴趣的几何结构的介绍；查看几何结构的图片，用户可以查看感兴趣的几何结构的图片。用例图如图3.4所示。图3.4几何图形的查看与收藏用例图3.1.4Hilbert学习Hilbert学习子系统当中，包含的功能点有：生成指定的Hilbert图，用户在Hilbert学习界面输入生成要求之后，可以生成对应的Hlibert图；生成指定的Hilbert边，用户在输入想要查看的边的Hilbert坐标后，可以查看对应的边；展示迭代每个子象限中的Hilbert样貌，用户可以在迭代性质的界面查看迭代中每个象限对应的图形是什么样子的；展示比较迭代前后的图，用户在迭代界面，可以比较迭代前后的图，从而找到彼此之间的关联。用例图如图3.5所示。图3.5Hilbert学习用例图3.1.5Delaunay学习Delaunay学习模块包括的功能点有：展示随机生成的点，用户在输入随机点个数之后后，这些点会在界面上展示，以便之后使用；生成对应的Delaunay三角网，用户在确定随机点个数之后，可以生成对应的Delaunay三角网；通过图形学习空洞圆性质，用户在生成Delaunay三角网之后，可以对生成的这个三角网进行空洞圆性质的学习查看；学习最小角最大化性质，在生成三角网之后，可以查看这个三角网的最小角最大化性质。用例图如图3.6所示。图3.6Delaunay学习用例图3.1.6Voronoi学习Voronoi学习模块包含的功能点有生成Voronoi对应的Delaunay三角网，在输入想要生成的随机点个数之后，可以生成对应的Delaunay三角网；生成Voronoi图，在Delaunay三角网的基础之上，可以继续生成Voronoi图；展示两者的图形及关联，可以将两者放入一张图中进行比较查看，看出两者联系。用例图如图3.7所示。图3.7Voronoi学习用例图3.2非功能分析3.2.1性能分析本项目为学习平台，与生活紧密联系。为了避免恶意破坏用户的个人信息，需要保证系统的稳定、安全、方便，并且便于管理和升级。响应速度：对一般操作而言，响应的时间不能超过5秒，刷新系统页面的时间不能超过4秒，系统内各交互功能的反应速度不超过5秒。故障处理：如果系统页面长时间没有响应，则及时发出信息提示，引导用户刷新页面或者重新进入页面。页面加载时间过长，也要给出提示信息，以防用户认为系统存在问题。可靠性:平均故障时间间隔不低260小时。能够快速恢复系统，或者对系统故障进行处理，方便系统升级和系统扩充。空间要求：cpu使用率50%，内存使用率小于50%。3.2.2安全性分析系统的安全性分析是评估系统中安全性方面的弱点和潜在威胁的过程。这个过程可以帮助我们发现系统中存在的漏洞并且采取措施来解决这些问题，保护系统的完整性、保密性和可用性。在这里，我将通过以下几个方面来进行系统的安全性分析：1.身份验证和访问控制：这是保护系统的核心部分。对于身份验证和访问控制的强度将直接影响系统的安全性。我们需要检查系统中使用的身份验证方式是否安全、密码强度是否够高、是否需要进行多重身份验证等方面，同时需要确保授权机制是正确的，只有经过授权的用户才能访问受保护的资源。2.数据安全性：系统中存储的数据需要保证安全性。这包括数据加密、访问控制、备份和恢复等方面。我们需要检查数据的加密算法是否足够强，存储的位置是否安全、备份和恢复策略是否合理，以及数据访问的权限控制是否足够严格等方面。3.系统和网络安全性：我们需要对系统的网络安全性进行评估。这包括检查网络拓扑、网络接口和网络防火墙是否配置正确。另外，我们需要检查系统的操作系统和应用程序是否及时更新，是否存在已知的漏洞，是否存在未授权访问的风险。4.监测和响应：监测和响应是确保系统安全的重要组成部分。我们需要确保系统能够及时发现潜在的安全问题，并能够采取适当的措施应对这些问题，以减少对系统的影响。3.2.3易用性分析系统的易用性分析是评估系统用户界面和用户体验的过程。通过对系统易用性的分析，我们可以确定系统中存在的问题，并采取措施改善用户体验。在这里，我将通过以下几个方面来进行系统的易用性分析：1.界面设计：系统的界面设计需要考虑到用户的使用习惯和用户需求。我们需要检查系统的界面是否简洁明了，是否易于理解和操作，是否有足够的反馈和引导，以及是否符合用户的期望。2.功能完整性：系统的功能需要满足用户的需求。我们需要检查系统的功能是否完整，是否满足用户的需求，以及是否易于使用。同时，我们还需要考虑到不同用户的需求和使用场景，从而确保系统的功能可以满足不同用户的需求。3.响应速度：系统的响应速度对于用户体验非常重要。我们需要检查系统的响应速度是否足够快，是否会因为系统负载而变慢，以及是否会影响用户的操作体验。3.3可行性分析3.3.1技术可行性分析评估项目的技术可行性，包括技术难度、技术成熟度、技术风险、技术资源等，以确定项目是否有足够的技术支持和能力来实现。基于WebGL的几何结构学习平台在开发时，使用Java语言是当前最好的面向对象编程语言，能够实现代码编写。在此系统的开发过程中，数据库也是一个重要的中心环节。本人学习过相关课程，对相关技术掌握程度较好。因此，在技术层面上，本系统的总体开发和设计具有一定的现实意义。3.3.2经济可行性分析评估项目的经济可行性，包括成本估算、收益预测、现金流预测、财务指标评估等，以确定项目的投资回报率和财务风险。基于WebGL的几何结构学习平台在设计时，对计算机的配置并没有太多的要求，即使是配置不高的计算机也能很好的完成软件的设计。无需大量的开发者，也无需购买任何软件。该系统的设计完全是个人的设计，节省大量的费用，本系统旨在对以往所学知识进行系统的整理和总结，提高学生在实践中的运用能力。这样可以减少人工费用，还可以节省很多的信息资源，减少处理信息的时间，改进信息管理的有效性。因此，开发这个系统并不存在经济问题，而且非常实用。3.3.3社会可行性分析评估项目的社会可行性，包括环境影响、社会效益、法律法规等，以确定项目是否符合社会公共利益和法律法规要求。基于WebGL的几何结构学习平台在设计时旨在帮助使用者更加清晰直观地了解几何结构，明白他们的性质。从对社会影响方面来看，它能够一定程度上激起学生的学习热情，减轻教师的教学负担。从社会效益来看，他对教育行业的发展具有积极的影响，能够为社会带来良好的效益。能够增强学习者的学习兴趣和参与度，激发学习热情和积极性，使学习过程更加愉悦和有趣。另外，它也可以拓展学习方式，为学习者提供更加灵活、多样化的学习途径，满足不同学习风格和需求的学习者。因此，它满足社会效益，不会为社会带来负面影响。3.4本章小结需求分析是论文写作的关键环节之一，它主要包括对研究目的、研究问题、研究方法和研究范围等方面的分析和探讨。在需求分析板块中，我们通过对文献、市场调查和用户调查等多种途径进行数据收集和分析，以明确研究对象的需求和期望，确定研究的重点和方向，从而确保研究的有效性和可行性。本章进行了系统的需求分析，主要包括功能需求，非功能需求和可行性分析。结合实际，判断项目的可靠性，让系统能够更好的满足用户的需求。系统设计4系统设计4.1系统总体功能设计本次开发了一个几何结构学习系统。系统主要功能有：登陆注册，查看几何图形生成，查看图形的性质，收藏，查看个人信息等等。系统主要分为两个模块：用户中心模块和图形操作模块。用户中心模块中主要都是与用户基本信息相关的操作。图形操作模块中主要是和图形相关的操作。本系统设计的总体结构图如图4.1所示：图4.1系统总体模块设计图其中，图形管理模块下面包含三种不同的几何结构，分别为Hilbert，Delaunay，Voronoi。这三个几何结构可以分解为不同的功能模块，功能模块分解如下。1.Hilbert分解Hilbert学习可以分解为生成指定的Hilbert图，生成指定的Hilbert边，展示迭代每个子象限中的Hilbert样貌，展示比较迭代前后的图。分解如图4.2所示。图4.2Hilbert功能模块分解图2.Delaunay分解Delaunay可以分解为展示随机生成的点、展示对应的Delaunay三角网，通过图形学习空洞圆性质，学习最小角最大化性质。分解如图4.3所示。图4.3Delaunay功能模块分解图3.Voronoi分解Voronoi可以分解为生成Voronoi对应的Delaunay三角网，生成Voronoi图，同时展示两者的图形及关联。分解如图4.4所示。图4.4Voronoi功能模块分解图4.2系统数据库设计本系统数据库采用MySQL。MySQL的发展始于1995年，由瑞典开发人员MichaelWidenius和DavidAxmark创建，并于1995年首次发布。随着互联网的快速发展和开源软件的普及，MySQL的用户数量快速增长，并且得到了许多大型公司的支持和采用，如Facebook、Google、Twitter等。MySQL的主要特点是速度、稳定性和易用性。它支持多种操作系统，包括Linux、Windows和MacOS等，还支持多种编程语言，如PHP、Java、Python等。此外，MySQL还提供了强大的安全性、事务支持和可扩展性，使得它适用于各种不同规模和复杂度的应用程序。MySQL的核心是由C和C++编写的MySQLServer，它是一个单独的进程，负责处理所有的数据库操作。MySQL客户端可以通过多种方式与MySQLServer进行通信，如命令行、图形用户界面和Web应用程序等。总的来说，MySQL是一种功能强大、易于使用和广泛采用的关系型数据库管理系统，它为各种应用程序提供了可靠的数据存储和管理。4.2.1数据库E-R图通过规划“基于WebGL的几何结构学习平台”的功能，可以分出多个实体信息，实体信息可通过E-R图来表明。总E-R图如下图4.5所示。其中用户实体包含用户编号、用户昵称、密码、邮箱四个基本属性，其中主属性是用户编号。收藏夹实体包括编号和图形数量两个基本属性，其中主属性为编号。几何图形实体包含图形编号，图形名称，图形介绍，其中主属性为图形编号。用户和几何图形具有多对多可以学习的联系，用户和收藏夹具有一对多拥有的联系，收藏夹和几何图形具有多对多包含的联系。图4.5系统总ER图4.2.2系统表结构设计把数据库概念设计的E-R图转变为关系数据库。用户表：用来存放用户的相关信息。本表主要属性有：序号（id），用户名（username），密码（password），联系方式（tel），邮箱（email），出生日期（birth）。本表主键为用户id，具体内容如下表4.1所示。表4.1user表列名数据类型长度约束idint10PRIMARYKEYusernamevarchar255NOTNULLpasswordvarchar255NOTNULLtelint11emailvarchar30几何图形表：用来存放图形的相关信息。本表主要属性有：图形id（FigureId），图形名（FigureName），简介（FigureText），具体内容如下表4.2所示。表4.2figure表列名数据类型长度约束FigureIdint10PRIMARYKEYFigureNamevarchar20NOTNULLFigureTexttext收藏表：本表是歌曲和歌单的关联表。主要属性为：序号（collectId），用户id（id），图形id（figureId），具体内容如下表4.3所示。表4.3user-figure表列名数据类型长度约束collectIdint10PRIMARYKEYidint10FOREIGNKEYfigureIdint10FOREIGNKEY4.2.3接口设计本系统包含以下接口，如下所示：(1)/collect/queryFigure查询对应几何结构信息(2)/collect/save保存收藏几何结构(3)/collect/delete删除收藏的几何结构(4)/user/queryUserByUsername根据用户名查询用户(5)/user/queryUserByUsernameAndPassword根据用户名和密码查询用户(6)/user/saveUser保存用户信息(7)/user/updateUser更新用户信息4.3系统详细设计4.3.1系统业务流程本系统的主要功能有：登陆注册，用户可以注册自己的账号并登录；查看几何图形生成，用户可以查看图形生成后的结构，对图形有初步的了解；查看图形的性质，用户可以查看图形的性质，并能够对其进行一定的了解；收藏，用户可以收藏图形；查看个人信息，用户可以查看自己的信息；修改个人信息：用户可以修改自己的信息。该系统的业务流程图如下图4.6所示。图4.6业务流程图用户输入网址进入首页后，选择登录，若没有账号则注册。在登陆成功后，可以在首页查看几何结构的基本信息。选择某一个几何结构之后，进入相应的界面，输入想要进行的操作要求即可查看对应图形或学习对应的性质。若想收藏，可以点击收藏按钮。在收藏界面，点击删除，可以删除收藏项目。4.3.2用户中心模块用户通过用户昵称以及密码注册，并且输入自己的信息，用户昵称不可重复，两次密码需要一致。注册成功后会跳转至登陆界面，登陆成功后跳转至首页。登陆成功后，在导航栏，可以选择查看自己的信息，在信息查看界面可以修改自己的信息。流程图如下图4.7所示。图4.7用户中心模块流程图4.3.3图形操作模块用户在主页选择先要学习的几何结构，点击进入详情界面，对几何图形进行具体的操作，在登陆之后可以对其进行收藏，在个人收藏中查看。流程图如下图4.8所示。图4.8图形操作模块流程图4.4Hilbert生成算法设计因为Hilbert有迭代的特性，所以在生成Hilbert图的时候，可以利用这一特性。最开始的图形为一格，可以跳过。在2x2的方格当中，也就是一次迭代的一个区域，不难发现，可以用一个“U”形来访问所有区域，当然“U”形的开口方向并不固定，如图4.9所示为其中一种。在进行二次迭代（4x4方格）的时候，可以将一次迭代的“U”形放在四个象限之中，然后为了能够使得每个象限在进行连接时能够顺利进行，要在每个象限中确定“U”形的开口朝向，其中一种方式如图4.10所示。然后，可以将这一次迭代的图形再看做一个“U”形，继续以同样的方式进行下一次迭代。这样循环下去，就可以顺利得出第N次迭代的图形，从而在系统中展示出来。图4.9“U”形访问区域图4.10“U”形区域迭代最初的“U”形图构造很简单，只需要选定一个方向和一个起始点，绕各象限环绕一周便可以形成，我们用0到3来表示环绕象限的顺序（在操作时，这里采用二进制形式，即：0用00表示，1用01表示，2用10表示，3用11表示），如图4.11所示。图4.11“U”形图构造为了保证整体连接性，在访问子象限时，可以看出这是有规律的，一共只有四种情况。之后，由于迭代，这种性质同样适用于之后产生的任一子象限。于是，对于任一给出的象限，所画出的曲线是由上一级曲线的形状以及该象限的位置所决定的。构建出所有情况，如下图4.12所示。图4.12Hilbert迭代图假设最上层的迭代方式均为第一种方式，则可以根据所给的坐标找出对应的象限，然后根据当前象限在以第一种方式进行迭代时所在的顺序数，在现有Hilbert坐标（初始为0）上累加；同时，也可以得到上一级的迭代方式，然后就可以将这个子象限作为最上层的迭代。不断循环，可以得出该点是该平面按照Hilbert曲线填充下的Hilbert坐标（即是当前区域中连贯曲线经过的第几个小区域，为一个整数），在有了各个小区域的顺序之后，就可以绘制出完整的Hilbert曲线。一次具体的由点坐标求Hilbert坐标的过程为：若要在经过三次迭代的Hilbert曲线（如下图4.13所示）上，求（6，4）坐标（坐标均从0开始计）对应的Hilbert坐标。从第一层开始，找到该点所在的象限。在右下方的象限中，对应第一部分为2，二进制是10，对应的第二层仍然是第一种情况。接着到第二层，找到该点所在的象限为右上方，对应第二部分为3，二进制是11，对应的第三层为第二种情况。到第三层，找到该点所在象限为左上方，对应第三部分为2，二进制是10。将得到的三个部分连接起来，得到Hilbert坐标的二进制为101110，转化为十进制为46。图4.13三阶Hilbert曲线在用Hilbert坐标求对应的点坐标时，仍然可以在上面迭代形式的基础上进行。首先仍然假设最上层的迭代方式为第一种方式，并且在知道迭代总次数的情况下，可以计算出该平面内所划分的最小区域的个数，然后就可以由这层迭代的象限顺序计算出当前Hilbert坐标所在的象限（当前区域总迭代次数记为n，若为第一象限，即左上，则x，y不变；若为第二象限，即左下，则x不变，y=y+2^n/2；若为第三象限，即右上，则y不变，x=x+2^n/2；若为第四象限，即右下，则x=x+2^n/2；y=y+2^n/2。然后就可以知道当前象限现在对应的迭代方式，进而就可以继续向下循环进行，得出最终的点坐标，实现Hilbert坐标到点坐标的转化，这将有利于系统之后展示具体的线段。一次具体的由Hilbert坐标求点坐标的过程为：若要在经过三次迭代的Hilbert曲线（如上图4.13所示）上，求Hilbert坐标46对应的点坐标（坐标均从0开始计,x,y初始都为0）。从第一层开始，由于三层迭代共有64个小区域，那么每个象限当中小区域的个数为16，则46所在区域为2（46/16=2...14），找到该区域对应的象限，为右下部分,则x=x+4=4；y=y+4=4，同时迭代方式仍为第一种。在右下方的象限中，共有16个小区域，每个象限中有4个小区域，则14所在区域为3（14/4=3...2)，找到该区域对应的象限，为右上部分，则x=x+2=6，y不变，同时迭代方式为第二种方式。在右上方象限中，共有四个区域，则2所在区域为2（2/1=2），为第一象限，x，y都不变化。所以最后得出的坐标为（6，4）。用户在Hilbert界面可以选择产生何种图形，并可以具体查看某一步是具体的哪一段线段，这可以帮助使用者更方便地了解Hilbert的生成过程。同时，可以通过观察前后两次的图形，了解到Hilbert的迭代特性。更方便地理解到Hilbert迭代产生的过程。Hilbert模块的流程图如下图4.14所示。图4.14Hilbert操作流程图4.5Delaunay三角网生成算法设计在设计Delaunay生成算法的过程中，要充分考虑他的一个性质——空洞圆性质（见第二章相关几何理论）。如下图4.15所示。在验证这一性质时，我们可以从已经生成的三角网当中随机选择一个三角形，做出他的外接圆，然后再将这个外接圆和其他点集一起展示出来，若这个圆内部没有其他的点，则可以说明空洞圆性质是完全成立的。图4.15Delaunay空洞特性Delaunay三角网还具有最小角最大化的性质，如下图4.16所示。在展示这个性质时，可以计算出变化前后的六个内角的余弦值，因为余弦在0-180这个角度范围与角度成反比。在找变化前最小角时，可以找余弦值的最大值，再找出变化后的余弦最大值，通过比较两个余弦值，可以看出后一次余弦值比前一次余弦值更大，即变化后的最小角比变化前的最小角更小，也就是变化前最小角已经是最大的了，这便满足最小角最大化性质。图4.16Delaunay最大化最小角特性本几何结构学习平台采用逐点插入法来生成Delaunay三角网。1、生成一系列随机的点，并且将这些点的横坐标升序排序。求出这些点中横坐标最大值、最小值：Xmax、Xmin，纵坐标最大值、最小值：Xmax、Ymin，然后就可以生成超级三角形，如下图4.17所示。图4.17生成超级三角形如图，三个蓝色的点被一个由离散点的最大分布来求得的随机一个三角形包围。这个三角形就是超级三角形，它包含了所有的随机点。采用的方法是求出（Xmax-Xmin）/2,记为x，求出Ymax-Ymin，记为y，那么超级三角形最上方点的坐标是（x，Ymin-y），左下方点的坐标是（Xmin-x，Ymax），右下方点的坐标是（Xmax+x，Ymax）。把这个超级三角形加入到临时三角形表里面。把随机生成的有序的点依次放入到图中，然后将临时三角形表里面的三角形一个个和这个点作比较，比较的结果有三种情况：当这个点在三角形外接圆的右边，也就是在这个圆右边做垂直的切线，在这个切线的右边，那么这个三角形就是Delaunay三角形，因为已经在临时三角形表当中的三角形一定都满足空洞圆性质，可能会出现在外接圆内部的点只能是后续的点。而这些点又是有序的，于是之后的点便不会出现在这个圆内部，所以这个三角形一定满足条件。这时，把这个三角形从临时的三角形表当中去除，加入到最后的三角网当中。当这个点在这个三角形外接圆外面的时候，这时已经排除了在右边的情况，于是这个点不在右侧，所以后续的点仍然有可能在这个三角形外接圆的内部，于是不能判断，跳过，不需要对临时三角形表做任何操作。当这个点在这个三角形外接圆内部的时候，他显然就不能满足空洞圆性质了，那么就应该把这个三角形从临时的三角形表里面删除，同时，还要把这个三角形的边放到临时的边表，以便之后操作。如下图4.18所示。3、在所有的三角形都遍历完之后，把那些因为不符合条件而加入临时边表的边进行去重，因为可能会有两个三角形有公共边。之后，把临时边表里面的每一条边和这个点组成一个新的三角形加入到临时三角形表里面。4、循环执行第二步和第三步，在所有点都插入完成，并且第三步完成后，把临时三角形表里面剩下的三角形直接放入最后的三角网当中。最后把与超级三角形有关的三角形删除，得到最后的三角网。因为超级三角形是我们构造的，并不在最开始的点集里面。图4.18点的插入判断过程用户在Delaunay界面可以输入想要的任意点的个数，随后生成对应的Delaunay三角网。然后，在生成三角网的基础上，可以借助所生成的Delaunay三角网查看空洞圆性质（通过图形展示外接圆与随机点之间的关系）以及最小角最大性质（通过展示变化前与变化后的内角的余弦值来展示性质）。Delaunay三角网的操作流程图如下图4.19所示。图4.19Delaunay操作流程图4.6Voronoi生成算法设计Delaunay三角网和Voronoi图是互相对偶的关系，即对于一个给定的点集，可以通过Delaunay三角网生成Voronoi图，也可以通过Voronoi图生成Delaunay三角网。两者都是计算几何中常见的概念。Delaunay三角网是指对于给定的点集，将这些点连成一组三角形，使得任意两个三角形不相交，且每个三角形的外接圆内部不包含任何其他点。换句话说，Delaunay三角网是一种在给定点集中尽可能多地填充空间，同时又尽可能少地出现狭窄、长条形的三角形的方法。Voronoi图是指对于给定的点集，以每个点为中心，将空间划分成一组区域，使得每个区域内部的所有点到中心点的距离都不超过到其他中心点的距离。Voronoi图的边界由一组垂直于相邻点之间的连线的平分线组成，这些连线的平分线形成了Voronoi图的边界。下面是通过Delaunay三角网生成Voronoi图的流程：1.给定一组点集，将这些点用Delaunay三角网进行连线。2.对于Delaunay三角网上的每条边，找到垂线平分线，将垂线平分线与相邻三角形的垂线平分线交点连接起来，形成Voronoi边。3.对于Delaunay三角网上的每个三角形，找到外接圆心，并将外接圆心连接起来，形成Voronoi点。4.如果点集在凸包内，需要将凸包上的Voronoi边和凸包相交的边进行连接。生成的Voronoi图是由一组Voronoi点和一组Voronoi边组成的，其中每个Voronoi点表示一个区域的中心，每个Voronoi边表示两个区域之间的边界。利用前面生成Delaunay三角网的算法，在生成三角网后，找出每个三角形的外心（即各边中垂线交点），将相邻的两个三角形的外心相连，就可以构造出Voronoi图，如图4.20所示（实线是Delaunay三角网，虚线是Voronoi图）。图4.20Delaunay三角网与Voronoi图用户在Voronoi界面可以输入想要生成的随机点的个数，生成对应的Voronoi图，旁边也会同时展示生成Voronoi图所用到的Delaunay三角网。同时可以将Voronoi图与Delaunay三角网在一张图上展示，更加直观地看到看到两者之间的联系。Voronoi操作流程图如下图4.21所示。图4.21Voronoi操作流程图4.7本章小结本章主要介绍几何结构学习平台是如何设计的，首先对系统的具体功能进行设计，其次对系统的数据库方面进行设计，最后对各个生成算法进行设计。在生成Hilbert时，采用了迭代生成的方法，同时需要验证它的迭代性质。在生成Delaunay三角网时，采用了逐点插入的方法。系统实现5系统实现5.1用户功能实现5.1.1用户登陆注册进入首页，点击登录，在点击注册，便可以到注册界面，输入用户名，密码，确认密码等信息，在确定用户名无重复且两次密码一致后，便可以成功注册，若用户名重复，则会出现提示，若密码不一致，也会出现提示。注册界面如图5.1所示。图5.1注册页面注册成功后，返回登陆界面，正确输入账号密码之后，即可登陆成功，若账号和密码无法正确匹配，则不能登录。在登陆成功之后，系统直接进入平台首页。登录界面如下图5.2所示。图5.2登录界面5.1.2查看几何图形用户登陆成功后直接进入首页，查看几何图形。可以看到几何结构的名称，对应的简单的介绍以及他们的图形图片，能够让用户简单直观地先了解这些结构，同时，若用户对其中的某一个结构感兴趣，可以进一步查看。首页如图5.3所示。图5.3首页在首页点击Hilbert图片，可以进入Hilbert界面。在这个界面的左侧，是图形的生成区域，界面的右边是Hilbert曲线可以选择的操作，包括直接生成Hilbert图、查看第N次生成的边、展示Hilbert曲线的迭代等操作选择。操作栏如图5.4所示。图5.4Hilbert界面操作栏在首页点击Delaunay图片进入Delaunay界面，左侧为图形展示界面，右侧为图形操作选项界面，包括生成Delaunay三角网，Delaunay三角网空洞圆性质的查看，Delaunay三角网最小角最大化性质的查看等操作选项。操作栏如图5.5所示。图5.5Delaunay界面操作栏首页点击Voronoi图片进入Voronoi界面，左侧为图形的展示板块，右侧包括生成Voronoi图，查看Voronoi图与Delaunay的联系等操作的选项。Voronoi学习界面操作栏如图5.6所示。图5.6Voronoi界面操作栏5.1.3查看个人信息用户点击导航栏的个人信息，可以查看个人信息，包括自己的用户名，注册所用的手机号以及自己的邮箱。同时用户也可以在这个界面进行信息的修改。个人信息编辑界面如图5.7所示。图5.7个人信息页面5.1.4图形收藏用户收藏图形后，可以点击导航栏收藏查看，可以看到收藏图形的名称和对应的介绍。同时，用户可以删除已经收藏的几何结构。用户收藏界面如图5.8所示。图5.8个人收藏页面5.2Hilbert曲线生成算法实现根据生成算法的设计，首先，将四种迭代方式用计算机的语言表达出来，这里采用集合将四种情况保存起来，如图5.9所示。其中第三、第四行最左侧的表示象限的的二进制，后面带a，b，c，d角标（表示四种迭代方式）的，表示的是四种迭代方