基于WebGL技术的网页端大量二维文字绘画方法

技术领域

本发明涉及一种基于WebGL技术的网页端大量二维文字绘画方法，属于建筑项目建模图形识别及应用技术领域。

背景技术

现阶段通过浏览器的使用WebGL(网页端)查看CAD图纸时，当CAD图纸中存在大量二维矢量文本文字时，由于需要在浏览器上显示巨量二维矢量文本文字，因此会明显增加浏览内存消耗和明显增加前端网页转化文本矢量数据所需时间，进一步地会导致图纸在展示、移动和缩放时出现明显卡顿的情况。

基于此，做出本申请。

发明内容

为了解决现有技术中存在的上述缺陷，本发明提供了一种基于WebGL技术的网页端大量二维文字绘画方法，能解决现阶段存在的使用WebGL查看CAD图纸时存在大量二维文字时导致图纸在展示、移动和缩放是出现明显卡顿的情况。

为了实现上述目的，本发明采取的技术方案如下：

一种基于WebGL技术的网页端大量二维文字绘画方法，包括如下步骤：

步骤1，获取特定字体Json矢量数据集；

步骤2，获取需要展示的文字集合；

步骤3，获取需要展示的文字矢量数据集并发送到前端；

步骤4，前端通过three.js框架中的转化方式将文字矢量数据集转化为转化实体工具；

步骤5，把需要展示的文字集合通过转化实体工具生成geometry实体；

步骤6，修改geometry实体的部分参数后添加到WebGL中。

进一步地，所述步骤4与步骤5之间还包括一步骤：判断文字集合中是否存在矢量数据，若不存在矢量数据，则根据文字矢量规则创建特殊文字或符号的矢量数据加入到矢量数据集中，并返回到步骤1。

进一步地，所述步骤1具体包括

步骤1.1，选择以一种通用字体作为展示字体；

步骤1.2，获取字体格式文件；

步骤1.3，可通过网站https://gero3.github.io/facetype.js把下载的ttf文件转化为Json格式的文字矢量数据。

进一步地，所述步骤2具体包括步骤2.1，读取数据收集需要展示的文本集合过滤掉相同文字。

进一步地，所述步骤3具体包括步骤3.1，获取需要展示的文件集合后遍历获取每个文字在步骤2中的每个文字矢量数据获取要展示的矢量集。

进一步地，所述步骤4具体包括步骤4.1，通过步骤3获取的数据矢量集在前端转化成Json后，通过 three.js中的一个插件直接生产一个工具实体。

进一步地，所述步骤5具体包括步骤5.1，通过步骤4产生的工具实体，把需要展示的问题遍历生产一个个geometry实体。

进一步地，所述步骤6具体包括步骤6.1，geometry实体在改变颜色和缩放大小参数后添加进WebGL。

本发明能实现如下技术效果：本发明能解决现阶段存在的使用WebGL查看CAD图纸时存在大量二维文字时导致图纸在展示、移动和缩放是出现明显卡顿的情况。本发明在建筑行业设计图交互及BIM技术应用中具有显著效益，该技术实现了能够在配置不高的设备下用来展示容量比较大的CAD设计图纸和布置图。本发本明的成果可应用于建筑设计协同、智能工厂加工、工厂质检、智慧工地、可视化施工等领域。

附图说明

图1为本发明实施方法流程图。

具体实施方式

为了使本发明的技术手段及其所能达到的技术效果，能够更清楚更完善的披露，兹提供了以下实施例，并结合附图作如下详细说明：

一种基于WebGL技术的网页端大量二维文字绘画方法，包括如下步骤：

步骤1，获取特定字体Json矢量数据集；

步骤1.1，选择以一种通用字体作为展示字体；

步骤1.2，获取字体格式文件；

步骤1.3，可通过网站https://gero3.github.io/facetype.js把下载的ttf文件转化为Json格式的文字矢量数据。

步骤2，获取需要展示的文字集合；

步骤2.1，读取数据收集需要展示的文本集合过滤掉相同文字。

步骤3，获取需要展示的文字矢量数据集并发送到前端；

步骤3.1，获取需要展示的文件集合后遍历获取每个文字在步骤2中的每个文字矢量数据获取要展示的矢量集。

步骤4，前端通过three.js框架中的转化方式将文字矢量数据集转化为转化实体工具；

步骤4.1，通过步骤3获取的数据矢量集在前端转化成Json后，通过three.js中的一个插件直接生产一个工具实体。

涉及的代码如下：

let loader＝newTHREE.FontLoader()；

font＝loader.parse(data)；

步骤5，把需要展示的文字集合通过转化实体工具生成geometry实体；

步骤5.1，通过步骤4产生的工具实体，把需要展示的问题遍历生产一个个geometry实体。

涉及的代码如下：

步骤6，修改geometry实体的部分参数后添加到WebGL中。

步骤6.1，geometry实体在改变颜色和缩放大小参数后添加进WebGL。

涉及的代码如下：

步骤4与步骤5之间还包括一步骤：判断文字集合中是否存在矢量数据，若不存在矢量数据，则根据文字矢量规则创建特殊文字或符号的矢量数据加入到矢量数据集中，并返回到步骤1。

综上，本发明的一种基于WebGL技术的网页端CAD图纸查看及操作方法，通过文字绘画的方法，解决现阶段存在的使用WebGL查看CAD图纸时存在大量二维文字时导致图纸在展示、移动和缩放是出现明显卡顿的情况。该技术可以在一些需要在低配置设备上展示巨量文字成为可能，例如在一些平板或者手机上展示一些大容量的CAD布置图。本发明的成果可应用于建筑设计协同、智能工厂加工、工厂质检、智慧工地、可视化施工等领域。本发明与BIM技术相结合的应用已在智能加工、无纸化质检、可视化施工领域投入使用。

本发明与BIM技术相结合的应用已应用于公司项目智能加工、无纸化质检、可视化施工方向实践中，并取得了良好的预期效果。

本发明的实施案例公布的是本申请人应用该技术的案例之一，但并不局限于此，本领域的技术研发人员，极易根据上述算法编辑理念和实施案例，领会本发明技术路径，并做出不同的引申和变化，但只要不脱离本发明的实施路径和精神，都在本发明的保护范围内。