CN116778029A - 一种基于图可视化的文字绘制方法、系统、装置及介质 - Google Patents
一种基于图可视化的文字绘制方法、系统、装置及介质 Download PDFInfo
- Publication number
- CN116778029A CN116778029A CN202310479699.3A CN202310479699A CN116778029A CN 116778029 A CN116778029 A CN 116778029A CN 202310479699 A CN202310479699 A CN 202310479699A CN 116778029 A CN116778029 A CN 116778029A
- Authority
- CN
- China
- Prior art keywords
- drawn
- characters
- msdf
- type
- texture
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 28
- 238000012800 visualization Methods 0.000 title claims description 7
- 230000000007 visual effect Effects 0.000 claims abstract description 19
- 238000004590 computer program Methods 0.000 claims description 11
- 239000012634 fragment Substances 0.000 claims description 7
- 238000009877 rendering Methods 0.000 claims description 5
- 230000000694 effects Effects 0.000 abstract description 4
- 238000010586 diagram Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000002123 temporal effect Effects 0.000 description 1
Landscapes
- Image Generation (AREA)
Abstract
本发明公开了一种图可视化文字绘制方法、系统、装置及介质，涉及计算机技术领域，所述方法包括获取待绘制文字集，所述待绘制文字集包括若干待绘制文字；根据缓存数据对所述待绘制文字进行分类，对应分为第一类待绘制文字和第二类待绘制文字；从所述数据库中提取所述第一类待绘制文字对应的MSDF纹理图，并根据所述第二类待绘制文字创建所述第二类待绘制文字对应的MSDF纹理图；根据对应的MSDF纹理图进行文字绘制。本申请能高效绘制大批量文字，在缩放时保持清晰的文字效果，而且可以满足各种字体显示需求，不需要去操作页面的元素节点，提升了页面性能，提高了用户体验。
Description
技术领域
本发明涉及计算机技术领域，具体涉及一种基于图可视化的文字绘制方法、系统、装置及介质。
背景技术
在图可视化展示上文字的展示是必不可少的。图展示主流的画布绘制方式有WebGL(Web Graphics Library一种3D绘制协议),Canvas2D，SVG(Scalable VectorGraphics可缩放矢量图形)这三种，其中，WebGL是相对来说性能最好的，而在前端WebGL画布绘制文字的方式一般分为两种：一是使用HTML自带的块状元素在画布上显示，二是使用象形文字纹理的方式在画布上显示，但是这两种绘制方式都有很明显的问题，使用块状元素的问题是：虽然能很便捷的显示文字，但是需要频繁操作页面里的元素节点，在数据量比较大的情况下，浏览器很有可能因此崩溃，带来的用户体验较差。使用象形文字纹理的问题是：象形文字纹理的纹理块上的文字是固定的，无法自定义，因此会限制使用场景。存在的共性的问题有：经过缩放之后的文字表现得不太友好，会有明显的锯齿或者显示不全。
基于上述技术问题，特提出本申请。
发明内容
针对现有技术中的缺陷，本发明提供一种图可视化文字绘制方法、系统、装置及介质。
第一方面，一种图可视化文字绘制方法，包括:
获取待绘制文字集，所述待绘制文字集包括若干待绘制文字；
根据缓存数据对所述待绘制文字进行分类，对应分为第一类待绘制文字和第二类待绘制文字，其中，所述第一类待绘制文字在所述缓存数据中存在对应的MSDF纹理图；
从所述数据库中提取所述第一类待绘制文字对应的MSDF纹理图，并根据所述第二类待绘制文字创建所述第二类待绘制文字对应的MSDF纹理图；
根据对应的MSDF纹理图进行文字绘制。
作为优选的，所述待绘制文字包括文字内容和字体样式。
作为优选的，根据所述第二类待绘制文字创建所述第二类待绘制文字对应的SDF纹理信息包括：
根据MSDF算法计算所述第二类待绘制文字的MSDF纹理信息；
将所述第二类待绘制文字的MSDF纹理信息存入纹理画布生成MSDF纹理图。
作为优选的，根据对应的MSDF纹理图进行文字绘制包括：
将MSDF纹理图绑定到WebGL纹理集，在片元着色器中实现待绘制文字的绘制。
第二方面，一种图可视化文字绘制系统，包括：
获取模块，用于获取待绘制文字集，所述待绘制文字集包括若干待绘制文字；
分类模块，用于根据缓存数据对所述待绘制文字进行分类，对应分为第一类待绘制文字和第二类待绘制文字，其中，所述第一类待绘制文字在所述缓存数据中存在对应的SDF纹理图；
创建单元，用于从所述缓存数据中提取所述第一类待绘制文字对应的SDF纹理图，并根据所述第二类待绘制文字创建所述第二类待绘制文字对应的SDF纹理图；
绘制模块，用于根据对应的SDF纹理图进行文字绘制。
作为优选的，所述待绘制文字包括文字内容和字体样式。
作为优选的，所述创建模块包括：
计算单元，用于根据MSDF算法计算所述第二类待绘制文字的MSDF纹理信息；
生成单元，用于将所述第二类待绘制文字的MSDF纹理信息存入纹理画布生成MSDF纹理图。
作为优选的，所述绘制模块包括：
绘制单元，用于将MSDF纹理图绑定到WebGL纹理集，在片元着色器中实现待绘制文字的绘制。
第三方面，一种电子装置，所述装置包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时，实现如上述任一项所述的方法。
第四方面，一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序被执行时，实现如上述任一项所述的方法。
本发明的有益效果体现在：本申请提供的一种图可视化文字绘制方法、系统、装置及介质，所述方法包括获取待绘制文字集，所述待绘制文字集包括若干待绘制文字；根据缓存数据对所述待绘制文字进行分类，对应分为第一类待绘制文字和第二类待绘制文字，其中，所述第一类待绘制文字在所述缓存数据中存在对应的MSDF纹理图；从所述数据库中提取所述第一类待绘制文字对应的MSDF纹理图，并根据所述第二类待绘制文字创建所述第二类待绘制文字对应的MSDF纹理图；根据对应的MSDF纹理图进行文字绘制。本申请能高效绘制大批量文字，极大减轻了浏览器显示上的压力，在缩放时保持清晰的文字效果，，而且可以满足各种字体显示需求，不需要去操作页面的元素节点，极大提升了页面性能，提高了用户体验。
附图说明
为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍。在所有附图中，类似的元件或部分一般由类似的附图标记标识。附图中，各元件或部分并不一定按照实际的比例绘制。
图1为本发明实施例提供的一种图可视化文字绘制方法的流程图；
图2为本发明实施例提供的一种图可视化文字绘制系统的结构示意图；
图3为本发明实施例提供的一种电子装置的结构示意图。
具体实施方式
下面将结合附图对本发明技术方案的实施例进行详细的描述。以下实施例仅用于更加清楚地说明本发明的技术方案，因此只作为示例，而不能以此来限制本发明的保护范围。
需要注意的是，除非另有说明，本申请使用的技术术语或者科学术语应当为本发明所属领域技术人员所理解的通常意义。
本申请的一个实施方式，提供了一种图可视化文字绘制方法，如图1所示，包括:
步骤1，获取待绘制文字集，所述待绘制文字集包括若干待绘制文字；
在本发明实施例中，所述待绘制文字包括文字内容和字体样式内容。具体的，通过循环存储的点边数据，将点边数据所对应的文字内容和字体样式内容转换为指定格式，例如，将文字内容和字体样式内容内容通过符号“-”拼接，形成字符串文本，并将字符串文本插入指定集合，得到待绘制文字集。
步骤2，根据缓存数据对所述待绘制文字进行分类，对应分为第一类待绘制文字和第二类待绘制文字，其中，所述第一类待绘制文字在所述缓存数据中存在对应的MSDF纹理图；
具体的，缓存数据中存储的第一类待绘制文字所对应的MSDF纹理图是通过MSDF算法获取的。
步骤3，从所述数据库中提取所述第一类待绘制文字对应的MSDF纹理图，并根据所述第二类待绘制文字创建所述第二类待绘制文字对应的MSDF纹理图；
在本发明实施例中，根据所述第二类待绘制文字创建所述第二类待绘制文字对应的SDF纹理信息包括：根据MSDF算法计算所述第二类待绘制文字MSDF纹理信息；将所述第二类待绘制文字的MSDF纹理信息存入纹理画布生成MSDF纹理图。
具体的，所述第二类待绘制文字所对应的MSDF纹理图是通过MSDF算法获取的。
在获取到待绘制文字集后，需要缓存数据中是否已经存在待绘制文字所对应的基础的MSDF纹理图，若已经存在，则直接从缓存数据中提取待绘制文字所对应的MSDF纹理图，若不存在，则新建待绘制文字所对应的MSDF纹理图，以MSDF纹理图为基础，实现文字的在WebGL环境下的高精度绘制。
步骤4，根据对应的MSDF纹理图进行文字绘制。
在本发明实施例中，根据对应的MSDF纹理图进行文字绘制包括：将MSDF纹理图绑定到WebGL纹理集，在片元着色器中实现待绘制文字的绘制。
具体的，通过gl.bindTexture方法将MSDF纹理图绑定到WebGL纹理集中，绘制文字时，将该文字在纹理图上的位置信息传入到BufferArray中，再在片元着色器中的纹理集获取属性数据最后反馈到画布上。
因为SDF是用有向距离场绘制基础图形并通过不同颜色通道生成的，所以这样生成的文字纹理是带抗锯齿效果的，可以解决缩放的文字显示不友好的问题。但在常规的SDF中缩放的时候存在圆角问题，因此在本发明中采取了MSDF(Multi-channel SignedDistancejjj Field)的算法，该算法能够直接从形状的矢量表示中构建多通道距离场。它有以下优点：它非常快。它的时间复杂度等同于构建一个常规的距离场。除了恒定数量的临时变量，它不需要额外的内存。它不会在图像的任何部分丢失有符号的距离信息。它甚至可以保留尖锐的角落与轮廓的其他距离的尖角。它是通过多个有向距离场的方式来检测两个单元格的正向距离值来检测和修正圆角的阴影，与单色距离场不同，它们能够利用所有三个颜色通道几乎完美地再现尖角，即保存效率和质量的同时，很好解决了缩放存在的圆角问题。
综上，本发明实施例提供了一种图可视化绘制方法，通过MSDF算法计算文字的MSDF纹理信息，通过MSDF纹理信息所表示的多个有向距离场生成基础图形，解决现有技术操作元素节点、显示不友好等问题。本发明能高效绘制大批量文字，极大减轻了浏览器显示上的压力，在缩放时保持清晰的文字效果，，而且可以满足各种字体显示需求，不需要去操作页面的元素节点，极大提升了页面性能，提高了用户体验。
本申请的另一实施方式，提供了一种图可视化文字绘制系统，如图2所示，包括：获取模块，用于获取待绘制文字集，所述待绘制文字集包括若干待绘制文字；分类模块，用于根据缓存数据对所述待绘制文字进行分类，对应分为第一类待绘制文字和第二类待绘制文字，其中，所述第一类待绘制文字在所述缓存数据中存在对应的SDF纹理图；创建模块，用于从所述缓存数据中提取所述第一类待绘制文字对应的SDF纹理图，并根据所述第二类待绘制文字创建所述第二类待绘制文字对应的SDF纹理图；绘制模块，用于根据对应的SDF纹理图进行文字绘制。
可以理解的是，所述待绘制文字包括文字内容和字体样式内容。
可以理解的是，所述创建模块包括：计算单元，用于根据MSDF算法计算所述第二类待绘制文字的MSDF纹理信息；生成单元，用于将所述第二类待绘制文字的MSDF纹理信息存入纹理画布生成MSDF纹理图。
可以理解的是，所述绘制模块包括：绘制单元，用于将MSDF纹理图绑定到WebGL纹理集，在片元着色器中实现待绘制文字的绘制。
可以理解的是，关于以上参照图3描述的实施方式中的图可视化文字绘制系统，其中各个模块或者单元执行操作的具体方式已经在结合图1所描述的图可视化文字绘制方法的实施例中进行了详细描述，此处将不做详细阐述说明。
本申请的另一实施方式，还提供了一种电子装置，如图3所示，其中，所述装置包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时，实现如下步骤：获取待绘制文字集，所述待绘制文字集包括若干待绘制文字；根据缓存数据对所述待绘制文字进行分类，对应分为第一类待绘制文字和第二类待绘制文字，其中，所述第一类待绘制文字在所述缓存数据中存在对应的MSDF纹理图；从所述数据库中提取所述第一类待绘制文字对应的MSDF纹理图，并根据所述第二类待绘制文字创建所述第二类待绘制文字对应的MSDF纹理图；根据对应的MSDF纹理图进行文字绘制。
可以理解的是，所述处理器执行所述计算机程序时实现的步骤与上述方法中的各个步骤的实现方式基本一致，具体方式已经在一种图可视化文字绘制方法的实施例中进行了详细描述，此处将不做详细阐述说明。
本申请的另一实施方式，提供了一种计算机可读存储介质，其中，所述存储介质存储有计算机程序，所述计算机程序被执行时，实现如下步骤：获取待绘制文字集，所述待绘制文字集包括若干待绘制文字；根据缓存数据对所述待绘制文字进行分类，对应分为第一类待绘制文字和第二类待绘制文字，其中，所述第一类待绘制文字在所述缓存数据中存在对应的MSDF纹理图；从所述数据库中提取所述第一类待绘制文字对应的MSDF纹理图，并根据所述第二类待绘制文字创建所述第二类待绘制文字对应的MSDF纹理图；根据对应的MSDF纹理图进行文字绘制。
可以理解的是，所述处理器执行所述计算机程序时实现的步骤与上述方法中的各个步骤的实现方式基本一致，具体方式已经在一种图可视化文字绘制方法的实施例中进行了详细描述，此处将不做详细阐述说明。
最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围，其均应涵盖在本发明的权利要求和说明书的范围当中。
Claims (10)
1.一种图可视化文字绘制方法，其特征在于，包括:
获取待绘制文字集，所述待绘制文字集包括若干待绘制文字；
根据缓存数据对所述待绘制文字进行分类，对应分为第一类待绘制文字和第二类待绘制文字，其中，所述第一类待绘制文字在所述缓存数据中存在对应的MSDF纹理图；
从所述数据库中提取所述第一类待绘制文字对应的MSDF纹理图，并根据所述第二类待绘制文字创建所述第二类待绘制文字对应的MSDF纹理图；
根据对应的MSDF纹理图进行文字绘制。
2.根据权利要求1所述的一种图可视化文字绘制方法，其特征在于，所述待绘制文字包括文字内容和字体样式。
3.根据权利要求1所述的一种图可视化文字绘制方法，其特征在于，根据所述第二类待绘制文字创建所述第二类待绘制文字对应的SDF纹理信息包括：
根据MSDF算法计算所述第二类待绘制文字的MSDF纹理信息；
将所述第二类待绘制文字的MSDF纹理信息存入纹理画布生成MSDF纹理图。
4.根据权利要求1所述的一种图可视化文字绘制方法，其特征在于，根据对应的MSDF纹理图进行文字绘制包括：
将MSDF纹理图绑定到WebGL纹理集，在片元着色器中实现待绘制文字的绘制。
5.一种图可视化文字绘制系统，其特征在于，包括：
获取模块，用于获取待绘制文字集，所述待绘制文字集包括若干待绘制文字；
分类模块，用于根据缓存数据对所述待绘制文字进行分类，对应分为第一类待绘制文字和第二类待绘制文字，其中，所述第一类待绘制文字在所述缓存数据中存在对应的SDF纹理图；
创建单元，用于从所述缓存数据中提取所述第一类待绘制文字对应的SDF纹理图，并根据所述第二类待绘制文字创建所述第二类待绘制文字对应的SDF纹理图；
绘制模块，用于根据对应的SDF纹理图进行文字绘制。
6.根据权利要求5所述的一种图可视化文字绘制方法，其特征在于，所述待绘制文字包括文字内容和字体样式。
7.根据权利要求5所述的一种图可视化文字绘制方法，其特征在于，所述创建模块包括：
计算单元，用于根据MSDF算法计算所述第二类待绘制文字的MSDF纹理信息；
生成单元，用于将所述第二类待绘制文字的MSDF纹理信息存入纹理画布生成MSDF纹理图。
8.根据权利要求5所述的一种图可视化文字绘制方法，其特征在于，所述绘制模块包括：
绘制单元，用于将MSDF纹理图绑定到WebGL纹理集，在片元着色器中实现待绘制文字的绘制。
9.一种电子装置，其特征在于，所述装置包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序时，实现如权利要求1至4中任一项所述的方法。
10.一种计算机可读存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序被执行时，实现如权利要求1至4中任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310479699.3A CN116778029A (zh) | 2023-04-27 | 2023-04-27 | 一种基于图可视化的文字绘制方法、系统、装置及介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310479699.3A CN116778029A (zh) | 2023-04-27 | 2023-04-27 | 一种基于图可视化的文字绘制方法、系统、装置及介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116778029A true CN116778029A (zh) | 2023-09-19 |
Family
ID=88008913
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310479699.3A Pending CN116778029A (zh) | 2023-04-27 | 2023-04-27 | 一种基于图可视化的文字绘制方法、系统、装置及介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116778029A (zh) |
-
2023
- 2023-04-27 CN CN202310479699.3A patent/CN116778029A/zh active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US5325479A (en) | Method and apparatus for moving control points in displaying digital typeface on raster output devices | |
| KR100874528B1 (ko) | 묘화장치, 방법 및 프로그램을 기록한 컴퓨터 독출가능 기록매체와, 형상데이터 생성장치, 방법 및 프로그램을 기록한 컴퓨터 독출가능 기록매체 | |
| CN103177709B (zh) | 字符显示方法和装置 | |
| CN110544290A (zh) | 数据渲染方法及装置 | |
| CN113177172B (zh) | 基于WebGL的大批量三维文字高效显示的方法 | |
| JPH03208094A (ja) | 種々の寸法の記号映像のアウトラインを処理する方法およびコンピュータ表示装置 | |
| CN109636894B (zh) | 一种基于像素点栅格化的动态三维热力计算方法及系统 | |
| RU2439676C2 (ru) | Передача символов в подпиксельном разрешении | |
| US20200279415A1 (en) | Efficiently Computed Distance Fields | |
| CN115439609B (zh) | 基于地图服务的三维模型渲染方法、系统、设备及介质 | |
| CN105956133B (zh) | 智能终端上显示文件的方法及装置 | |
| CN108986193A (zh) | 一种三维文字描边绘制方法 | |
| CN113362420A (zh) | 道路标注生成方法、装置、设备以及存储介质 | |
| CN115988170A (zh) | 云会议中实时视频合屏中英文字符清晰显示的方法与装置 | |
| CN116976280B (zh) | 基于矢量图标的电网gis图元渲染方法及装置 | |
| CN113436298B (zh) | 一种自动生成汉字笔顺动画的方法、装置及其相关组件 | |
| US20140320527A1 (en) | Hardware glyph cache | |
| CN109543130A (zh) | 三维场景下标签的显示方法及装置 | |
| CN102867322A (zh) | 三维场景中实现中文标注的方法及装置 | |
| CN115272535B (zh) | Web下DWG图纸字体一致性绘制方法及系统 | |
| CN116778029A (zh) | 一种基于图可视化的文字绘制方法、系统、装置及介质 | |
| CN116912361A (zh) | 基于mapbox-gl的3D注记编辑方法及系统 | |
| US9905030B2 (en) | Image processing device, image processing method, information storage medium, and program | |
| CN105741335A (zh) | 一种基于分块组织的多层次兵棋地图快速绘制方法 | |
| CN101957837B (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 |