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

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

Info

Publication number
CN112199615A
CN112199615A CN202011039348.3A CN202011039348A CN112199615A CN 112199615 A CN112199615 A CN 112199615A CN 202011039348 A CN202011039348 A CN 202011039348A CN 112199615 A CN112199615 A CN 112199615A
Authority
CN
China
Prior art keywords
vector data
displayed
character
webgl
entity
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202011039348.3A
Other languages
English (en)
Inventor
曹伟东
王强强
孟玲霄
袁伟
刘中华
顾晓波
冯渝
何昱江
骆鹏飞
吕国超
彭栋
赵切
朱伊娜
廖再毅
顾励
郭静
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Zhejiang Jingzhu Information Technology Co ltd
Changjiang & Jinggong Steel Structure Group Co ltd
Zhejiang Jinggong Steel Structure Group Co Ltd
Original Assignee
Zhejiang Jingzhu Information Technology Co ltd
Changjiang & Jinggong Steel Structure Group Co ltd
Zhejiang Jinggong Steel Structure Group Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Zhejiang Jingzhu Information Technology Co ltd, Changjiang & Jinggong Steel Structure Group Co ltd, Zhejiang Jinggong Steel Structure Group Co Ltd filed Critical Zhejiang Jingzhu Information Technology Co ltd
Priority to CN202011039348.3A priority Critical patent/CN112199615A/zh
Publication of CN112199615A publication Critical patent/CN112199615A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明提供了一种基于WebGL技术的网页端大量二维文字绘画方法，涉及建筑项目建模图形识别及应用技术领域，通过获取特定字体Json矢量数据集；获取需要展示的文字集合；获取需要展示的文字矢量数据集并发送到前端；前端通过three.js框架中的转化方式将文字矢量数据集转化为转化实体工具；把需要展示的文字集合通过转化实体工具生成geometry实体；修改geometry实体的部分参数后添加到WebGL中。可以解决现阶段存在的使用WebGL查看CAD图纸时存在大量二维文字时导致图纸在展示、移动和缩放时出现明显卡顿的情况。本发明在建筑行业设计图交互及BIM技术应用中具有显著效益，该技术实现了能够在配置不高的设备下用来展示容量比较大的CAD设计图纸和布置图。

Description

基于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实体。
涉及的代码如下：
Figure DEST_PATH_IMAGE001
步骤6，修改geometry实体的部分参数后添加到WebGL中。
步骤6.1，geometry实体在改变颜色和缩放大小参数后添加进WebGL。
涉及的代码如下：
Figure DEST_PATH_IMAGE002
步骤4与步骤5之间还包括一步骤：判断文字集合中是否存在矢量数据，若不存在矢量数据，则根据文字矢量规则创建特殊文字或符号的矢量数据加入到矢量数据集中，并返回到步骤1。
综上，本发明的一种基于WebGL技术的网页端CAD图纸查看及操作方法，通过文字绘画的方法，解决现阶段存在的使用WebGL查看CAD图纸时存在大量二维文字时导致图纸在展示、移动和缩放是出现明显卡顿的情况。该技术可以在一些需要在低配置设备上展示巨量文字成为可能，例如在一些平板或者手机上展示一些大容量的CAD布置图。本发明的成果可应用于建筑设计协同、智能工厂加工、工厂质检、智慧工地、可视化施工等领域。本发明与BIM技术相结合的应用已在智能加工、无纸化质检、可视化施工领域投入使用。
本发明与BIM技术相结合的应用已应用于公司项目智能加工、无纸化质检、可视化施工方向实践中，并取得了良好的预期效果。
本发明的实施案例公布的是本申请人应用该技术的案例之一，但并不局限于此，本领域的技术研发人员，极易根据上述算法编辑理念和实施案例，领会本发明技术路径，并做出不同的引申和变化，但只要不脱离本发明的实施路径和精神，都在本发明的保护范围内。

Claims (8)

1.一种基于WebGL技术的网页端大量二维文字绘画方法，其特征在于包括如下步骤：
步骤1，获取特定字体Json矢量数据集；
步骤2，获取需要展示的文字集合；
步骤3，获取需要展示的文字矢量数据集并发送到前端；
步骤4，前端通过three.js框架中的转化方式将文字矢量数据集转化为转化实体工具；
步骤5，把需要展示的文字集合通过转化实体工具生成geometry实体；
步骤6，修改geometry实体的部分参数后添加到WebGL中。
2.根据权利要求1所述的一种基于WebGL技术的网页端大量二维文字绘画方法，其特征在于：所述步骤4与步骤5之间还包括一步骤：判断文字集合中是否存在矢量数据，若不存在矢量数据，则根据文字矢量规则创建特殊文字或符号的矢量数据加入到矢量数据集中，并返回到步骤1。
3.根据权利要求1所述的一种基于WebGL技术的网页端大量二维文字绘画方法，其特征在于：所述步骤1具体包括
步骤1.1，选择以一种通用字体作为展示字体；
步骤1.2，获取字体格式文件；
步骤1.3，通过网站https://gero3.github.io/facetype.js把下载的ttf文件转化为Json格式的文字矢量数据。
4.根据权利要求1所述的一种基于WebGL技术的网页端大量二维文字绘画方法，其特征在于：所述步骤2具体包括
步骤2.1，读取数据收集需要展示的文本集合过滤掉相同文字。
5.根据权利要求1所述的一种基于WebGL技术的网页端大量二维文字绘画方法，其特征在于：所述步骤3具体包括
步骤3.1，获取需要展示的文件集合后遍历获取每个文字在步骤2中的每个文字矢量数据获取要展示的矢量集。
6.根据权利要求1所述的一种基于WebGL技术的网页端大量二维文字绘画方法，其特征在于：所述步骤4具体包括
步骤4.1，通过步骤3获取的数据矢量集在前端转化成Json后，通过three.js中的一个插件直接生产一个工具实体。
7.根据权利要求1所述的一种基于WebGL技术的网页端大量二维文字绘画方法，其特征在于：所述步骤5具体包括
步骤5.1，通过步骤4产生的工具实体，把需要展示的问题遍历生产一个个geometry实体。
8.根据权利要求1一种基于WebGL技术的网页端大量二维文字绘画方法：所述步骤6具体包括
步骤6.1，geometry实体在改变颜色和缩放大小参数后添加进WebGL。
CN202011039348.3A 2020-09-28 2020-09-28 基于WebGL技术的网页端大量二维文字绘画方法 Pending CN112199615A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011039348.3A CN112199615A (zh) 2020-09-28 2020-09-28 基于WebGL技术的网页端大量二维文字绘画方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011039348.3A CN112199615A (zh) 2020-09-28 2020-09-28 基于WebGL技术的网页端大量二维文字绘画方法

Publications (1)

Publication Number Publication Date
CN112199615A true CN112199615A (zh) 2021-01-08

Family

ID=74007737

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011039348.3A Pending CN112199615A (zh) 2020-09-28 2020-09-28 基于WebGL技术的网页端大量二维文字绘画方法

Country Status (1)

Country Link
CN (1) CN112199615A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112966318A (zh) * 2021-04-12 2021-06-15 青矩技术股份有限公司 一种显示cad文件中字符的方法及终端设备

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108090948A (zh) * 2017-12-10 2018-05-29 梦工场珠宝企业管理有限公司 用于饰品的字体变化处理方法及装置

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108090948A (zh) * 2017-12-10 2018-05-29 梦工场珠宝企业管理有限公司 用于饰品的字体变化处理方法及装置

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
FUMIYASHIBUSAWA: "覚えたてのThree.jsでなんとかSound Visualizer的なものを作ってみる", pages 5, Retrieved from the Internet <URL:https://qiita.com/FumiyaShibusawa/items/a0ddfe5de7c92355339c> *
李倩;: "基于WebGL的3D技术在网页中的运用", 电子测试, no. 12 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112966318A (zh) * 2021-04-12 2021-06-15 青矩技术股份有限公司 一种显示cad文件中字符的方法及终端设备

Similar Documents

Publication Publication Date Title
CN101699426B (zh) 文档格式转化系统及方法
CN101930337B (zh) 屏幕显示设定的处理方法与嵌入式系统
CN101763234B (zh) 一种模拟各种屏幕分辨率的方法及其装置
CN103176986A (zh) Flash动画数据转换为HTML5数据的方法
CN106406651B (zh) 动态放大显示视频的方法及装置
CN111524212A (zh) 基于WebGL技术的网页端CAD图纸查看系统及方法
CN113094770A (zh) 图纸生成方法、装置、计算机设备和存储介质
CN105956133B (zh) 智能终端上显示文件的方法及装置
CN111596848A (zh) 一种界面取色方法、装置、设备及存储介质
CN112199615A (zh) 基于WebGL技术的网页端大量二维文字绘画方法
WO2023019995A1 (zh) 训练方法、译文展示方法、装置、电子设备以及存储介质
JP2004001315A (ja) 情報処理装置、情報処理方法、及び情報処理プログラム
CN107038199A (zh) 一种绘图方法和装置
CN112416340A (zh) 基于草图的网页生成方法和系统
CN116737133A (zh) 布局生成方法、设计稿布局生成方法及装置
CN111881648A (zh) 一种生成电子书字体文件的方法
CN111737785A (zh) 一种Revit和CAD的数据交互方法、装置及系统
CN115988170A (zh) 云会议中实时视频合屏中英文字符清晰显示的方法与装置
CN116541912A (zh) 一种基于cad图像识别生成接线图的方法及装置
CN103201786A (zh) 利用内容保持变形来重塑界面
CN114706508A (zh) Web端的画布放大、缩小偏移控制方法及画布重绘方法
CN115019321A (zh) 一种文本识别、模型训练方法、装置、设备及存储介质
CN113361371A (zh) 道路提取方法、装置、设备以及存储介质
CN113687823B (zh) 基于html的四边形区块非线性变换方法及其系统
CN111223165A (zh) 一种生成无锯的签字图片的方法、装置和设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination