CN115272535A - Web下DWG图纸字体一致性绘制方法及系统 - Google Patents

Abstract

本发明涉及一种Web下DWG图纸字体一致性绘制方法及系统，属于DWG图纸显示技术领域。在Web后端，对于DWG图纸中的每一字符，从字体库中选取该字符的字体所对应的字体文件，并从字体文件中选取该字符对应的字符信息，根据字符信息生成该字符对应的SDF纹理图片，且该SDF纹理图片基于该字符的正确的字体生成。在Web前端显示DWG图纸时，基于字符对应的SDF纹理图片绘制字符，从而能够高效的渲染大批量字符并且保持显示字符与原始图纸中字符的字体一致，解决在浏览器中绘制DWG图纸时字体不一致的问题。

Description

Web下DWG图纸字体一致性绘制方法及系统

技术领域

本发明涉及DWG图纸显示技术领域，特别是涉及一种Web下DWG图纸字体一致性绘制方法及系统。

背景技术

DWG图纸会包含大量的字符，字符是各种文字和符号的总称，包括各国家文字、标点符号、图形符号和数字等，而且一张DWG图纸中的字符会使用多种字体，既有操作系统自带的Truetype字体，也有用户自定义的shx字体，故在浏览器中基于webgl显示DWG图纸时，如何高效的渲染大批量字符并且保持显示字符与原始图纸中字符的字体一致是个技术难点。

目前所用的渲染方式包括以下几种：从字体文件中获取字符的矢量几何表示，采用几何的方法来绘制字符，但会产生大量的三角网格，降低渲染效率；采用字符位图贴图方式来绘制，但会产生放大时锯齿模糊的情况；采用HTML5canvas实时生成字符的SDF纹理图，能够有效解决大批量字符绘制的效率问题和字符缩放问题，但受限于浏览器所支持字体，对CAD软件中的自定义字体(如shx字体)还不支持，会存在显示字符的字体与原始图纸中字符的字体不一致的情况。

基于此，亟需一种高效的渲染大批量字符并且保持显示字符与原始图纸中字符的字体一致的技术。

发明内容

本发明的目的是提供一种Web下DWG图纸字体一致性绘制方法及系统，针对前端较难获取到DWG图纸使用的所有字体，而导致显示字符的字体与原始图纸中字符的字体不一致的问题，采用在后端生成DWG图纸中所使用字符的SDF纹理信息的方法，能够高效的渲染大批量字符并且保持显示字符与原始图纸中字符的字体一致，解决在浏览器中绘制DWG图纸时字体不一致的问题。

为实现上述目的，本发明提供了如下方案：

一种Web下DWG图纸字体一致性绘制方法，所述绘制方法包括：

在Web后端，提取DWG图纸中的所有字符；对于每一所述字符，从字体库中选取所述字符的字体所对应的字体文件，并从所述字体文件中选取所述字符对应的字符信息，根据所述字符信息生成所述字符对应的SDF纹理图片；所述字体库包括多种字体对应的字体文件；所述字体文件包括多个字符对应的字符信息；所述字符信息包括多个按序排列的坐标，按照顺序将所有所述坐标相连接即绘制得到所述字符；

在Web前端显示所述DWG图纸时，基于所述字符对应的SDF纹理图片绘制所述字符。

在一些实施例中，在所述提取DWG图纸中的所有字符之后，所述绘制方法还包括：以提取的每一所述字符的字体和字符串作为键值，构建第一Hash表。

在一些实施例中，所述从所述字体文件中选取所述字符对应的字符信息具体包括：根据所述字符的字符串，在所述字体文件所包括的字符表中确定偏移量；根据所述偏移量，在所述字体文件所包括的数据表中确定所述字符对应的字符信息。

在一些实施例中，所述根据所述字符信息生成所述字符对应的SDF纹理图片具体包括：

创建一张空白的位图；

将所述字符信息绘制在所述位图上，得到字符位图；

利用欧式距离转换算法计算所述字符位图中每一像素点的SDF值，得到SDF信息；

根据所述SDF信息生成所述字符对应的SDF纹理图片。

在一些实施例中，所述基于所述字符对应的SDF纹理图片绘制所述字符具体包括：

确定一四边形，并将所述四边形放置于所述字符在所述DWG图纸中的位置；

将所述字符对应的SDF纹理图片的四个顶点坐标赋予所述四边形的四个顶点；

以所述字符对应的SDF纹理图片作为输入纹理，利用片元着色器在所述四边形上绘制所述字符。

在一些实施例中，所述四边形由两个三角面片组成。

在一些实施例中，在得到所述字符对应的SDF纹理图片之后，所述绘制方法还包括：将所有所述字符对应的SDF纹理图片合并为若干张总纹理图片进行存储，每一所述字符对应的SDF纹理图片属于一所述总纹理图片；所述总纹理图片的张数由所有所述字符对应的SDF纹理图片的尺寸总和与所述总纹理图片的尺寸的比值向上取整得到。

在一些实施例中，对于每一所述字符，计算所述字符对应的SDF纹理图片在其所属的所述总纹理图片中的纹理坐标，并以所述字符对应的字符串、所述纹理坐标和所述字符对应的SDF纹理图片所属的总纹理图片的索引号作为键值，构建第二Hash表。

在一些实施例中，在所述基于所述字符对应的SDF纹理图片绘制所述字符之前，所述绘制方法还包括：根据所述第二Hash表在所有所述总纹理图片中提取所述字符对应的SDF纹理图片。

一种Web下DWG图纸字体一致性绘制系统，所述绘制系统包括：

纹理图片生成模块，用于在Web后端，提取DWG图纸中的所有字符；对于每一所述字符，从字体库中选取所述字符的字体所对应的字体文件，并从所述字体文件中选取所述字符对应的字符信息，根据所述字符信息生成所述字符对应的SDF纹理图片；所述字体库包括多种字体对应的字体文件；所述字体文件包括多个字符对应的字符信息；所述字符信息包括多个按序排列的坐标，按照顺序将所有所述坐标相连接即绘制得到所述字符；

绘制模块，用于在Web前端显示所述DWG图纸时，基于所述字符对应的SDF纹理图片绘制所述字符。

根据本发明提供的具体实施例，本发明公开了以下技术效果：

本发明用于提供一种Web下DWG图纸字体一致性绘制方法及系统，在Web后端，提取DWG图纸中的所有字符，对于每一字符，从字体库中选取该字符的字体所对应的字体文件，并从字体文件中选取该字符对应的字符信息，根据字符信息生成该字符对应的SDF纹理图片，以得到每一字符的SDF纹理图片，且该SDF纹理图片基于该字符的正确的字体生成。在Web前端显示DWG图纸时，基于字符对应的SDF纹理图片绘制字符，从而能够高效的渲染大批量字符并且保持显示字符与原始图纸中字符的字体一致，解决在浏览器中绘制DWG图纸时字体不一致的问题。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例1所提供的绘制方法的方法流程图；

图2为本发明实施例1所提供的绘制方法的原理框图；

图3为本发明实施例1所提供的四边形的示意图；

图4为本发明实施例1所提供的总纹理图片的示意图；

图5为本发明实施例2所提供的绘制系统的系统框图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明的目的是提供一种Web下DWG图纸字体一致性绘制方法及系统，针对前端较难获取到DWG图纸使用的所有字体，而导致显示字符的字体与原始图纸中字符的字体不一致的问题，采用在后端生成DWG图纸中所使用字符的SDF纹理信息的方法，能够高效的渲染大批量字符并且保持显示字符与原始图纸中字符的字体一致，解决在浏览器中绘制DWG图纸时字体不一致的问题。

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

实施例1：

本实施例用于提供一种Web下DWG图纸字体一致性绘制方法，该绘制方法由Web后端的图纸转换器和Web前端的图纸查看器协同完成，图纸转换器用于读取DWG图纸中的几何图形数据和字符数据，并生成每一字符的SDF纹理图片，并保存为自定义轻量化模型格式；图纸查看器用于在Web浏览器中加载轻量化模型，显示DWG图纸中的几何图形数据和字符数据，在显示字符数据时，基于Web后端已生成的每一字符的SDF纹理图片实现字符的绘制。

如图1和图2所示，所述绘制方法包括：

S1：在Web后端，提取DWG图纸中的所有字符；对于每一所述字符，从字体库中选取所述字符的字体所对应的字体文件，并从所述字体文件中选取所述字符对应的字符信息，根据所述字符信息生成所述字符对应的SDF纹理图片；所述字体库包括多种字体对应的字体文件；所述字体文件包括多个字符对应的字符信息；所述字符信息包括多个按序排列的坐标，按照顺序将所有所述坐标相连接即绘制得到所述字符；

本实施例在提取DWG图纸中的所有字符之后，还以提取的每一字符的字体和字符串作为键值，构建第一Hash表，即以提取到的每一字符的“字体名+字符串”作为键值，构建包含DWG图纸中的所有字符的第一Hash表。本实施例中，字符串是指字符本身，具体到代码时，字符串是指字符的Unicode码。比如“中国”就是“\u4e2d\u56fd”。

本实施例中，后端会预先建立包含各种字体的字体文件的字体库，在工作过程中，如果DWG图纸包含新的自定义字体，则会将该新的自定义字体的字体文件加入到字体库中。字体文件包含两张表，一张为字符表，一张为数据表，通过字符表，可确定字符的Unicode码在数据表中的偏移量，比如“中”的Unicode码为0x42d，在字符表中对应58，那么便可确定“中”在数据表中的偏移量为58，数据表中的第58条数据即为“中”对应的字符信息。本实施例的字符信息也称为字符点串信息，是一串点的坐标，包括多个按序排列的坐标，按照顺序将所有坐标相连接，则可以将该字符信息对应的字符绘制出来。

图纸转换器遍历第一Hash表中的每一个字符串，从第一Hash表中得到该字符串对应的字体，从字体库中找到该字体对应的字体文件，并在该字体文件中寻找该字符串对应的字符信息，以得到DWG图纸中每一字符的字符信息。其中，从字体文件中选取字符对应的字符信息可以包括：根据字符的字符串，在字体文件所包括的字符表中确定偏移量；再根据偏移量，在字体文件所包括的数据表中确定该字符对应的字符信息。

S1中，对于每一字符，根据字符信息生成字符对应的SDF纹理图片可以包括：创建一张空白的位图；将字符信息采用画线的方式绘制在该位图上，得到字符位图，画线可以通过opecv的第三方库实现；利用Felzenszwalb提出的欧式距离转换算法计算字符位图中每一像素点的SDF值，得到SDF信息；根据SDF信息生成字符对应的SDF纹理图片。本实施例的SDF纹理图片采用8位的灰度图表示，在保存时直接以8位灰度图的形式保存，不需要进行转换处理，以减少SDF纹理图片的大小。

S2：在Web前端显示所述DWG图纸时，基于所述字符对应的SDF纹理图片绘制所述字符。

在显示DWG图纸的字符数据时，会基于后端生成的每一字符对应的SDF纹理图片绘制所有字符，每一字符的绘制过程包括：确定一四边形，并将该四边形放置于字符在DWG图纸中的位置，该四边形的大小与该字符对应的SDF纹理图片的大小相同；将字符对应的SDF纹理图片的四个顶点坐标赋予该四边形的四个顶点；以字符的SDF纹理图片作为输入纹理，利用片元着色器在四边形上绘制字符。

因渲染引擎对三角形的渲染支持比较好，本实施例的四边形由两个三角面片组成，如图3所示。

本实施例所提供的在Web浏览器中显示DWG图纸时保持字体一致性的高效绘制方法，基于后端获取和处理DWG图纸中使用的各种字体的字符，并生成每一字符的SDF纹理图片，且每个字符的SDF纹理图片都基于正确的字体生成，在前端加载显示DWG图纸的字符时，基于每一字符的SDF纹理图片绘制字符，既保证了大批量字符绘制的高效性和缩放时的抗锯齿性，也保证了显示字符的字体与原始图纸中的字符的字体一致。

优选的，在得到每一字符对应的SDF纹理图片之后，本实施例的绘制方法还包括：将所有字符对应的SDF纹理图片合并为若干张总纹理图片进行存储，每一字符对应的SDF纹理图片属于一张总纹理图片，且总纹理图片的张数由所有字符对应的SDF纹理图片的尺寸总和与总纹理图片的尺寸的比值向上取整得到。即本实施例将多个字符的SDF信息保存到一张总纹理图片中，总纹理图片采用8位的灰度图表示，在保存时直接以8位灰度图的形式保存，不需要进行转换处理，以减少总纹理图片大小，单张总纹理图片像素不超过2048*2048，如果字符的SDF信息超过了单张总纹理图片能表示的SDF信息，则用多张总纹理图片来保存。

对于每一字符，计算字符对应的SDF纹理图片在其所属的总纹理图片中的纹理坐标，纹理坐标的生成过程根据字符对应的SDF纹理图片在总纹理图片的位置来计算，并以字符对应的字符串、纹理坐标和字符对应的SDF纹理图片所属的总纹理图片的索引号作为键值，构建第二Hash表。即以“字符串+<该字符串对应的纹理坐标+该字符串所属的总纹理图片的索引号>”为键值，创建第二Hash表，并将该第二Hash表存储成二进制格式文件。

本实施例在后端将DWG图纸的几何图形数据、字符数据、多张总纹理图片以及第二Hash表存储为轻量化模型，在前端加载该轻量化模型，以显示DWG图纸。

在显示DWG图纸的字符数据时，先根据第二Hash表在所有总纹理图片中提取每一字符对应的SDF纹理图片，对于每一字符，在第二Hash表中找到该字符对应的SDF纹理图片所属的总纹理图片的索引号，以通过索引号从多张总纹理图片中找到正确的总纹理图片，在第二Hash表中找到该字符对应的纹理坐标，以从前述正确的总纹理图片中找到该字符对应的SDF纹理图片。然后在DWG图纸上构建每一字符的显示网格，对于每一字符，由于该字符有4个纹理坐标(即SDF纹理图片在总纹理图片中的四个顶点坐标，左上、左下、右上和右下)，所以每个字符的显示网格用由两个三角面片组成的四边形表示，如图3，并将该四边形放置于该字符在DWG图纸上的位置。最后在显示网格上渲染生成每一字符，对于每一字符，将SDF纹理图片中的纹理坐标赋值到字符的显示网格上，4个纹理坐标对应由两个三角面片所构成的四边形的四个顶点，创建着色器材质对象，即着色器材质(ShaderMaterial)，其是一个用GLSL编写的小程序，在GPU上运行，它能够提供materials之外的效果，也可以将许多对象组合成单个Geometry或BufferGeometry以提高性能，以SDF纹理图片作为输入纹理，利用片元着色器在该四边形上绘制该字符，实现基于SDF的字符绘制。

如图4所示，其为一张总纹理图片的示意图，在此，本实施例基于图4对各个字符的纹理坐标的计算过程予以介绍：该总纹理图片的大小为4096*4096，大小是固定的，对于“技”这一字符，可从字体文件中分析出该字符的宽和高，分别设为w和h，则它的左上坐标为(0，0)，右上坐标为(w/4096，0)，左下坐标为(0，h/4096)，右下坐标为(w/4096，h/4096)。同时会记录每一字符相较于“技”这一字符在w与h上的偏移，分别记为woffset，hoffset，则任意一个字符的纹理坐标只需在“技”的纹理坐标中加入偏移即可计算得到，左上坐标为(woffset/4096，hoffset/4096)，右上坐标为((w+woffset)/4096，hoffset/4096)，左下坐标为(woffset/4096，(h+hoffset)/4096)，右下坐标为((w+woffset)/4096，(h+hoffset)/4096)。

本实施例的绘制方法采用后端构建字体库，对DWG图纸的字符数据进行处理生成每一字符的SDF纹理图片，解决浏览器前端难以获取到DWG图纸所使用的各种字体的问题，使DWG图纸中的字符能以正确的字体绘制，保证与原始图纸效果的一致性。此外，一张DWG图纸SDF纹理图片的生成只需在后端处理一次，减少前端生成SDF纹理图片的处理时间，提升图纸的加载显示效率。字体的渲染采用SDF(SignedDistanceField有向距离场)方法，既能减少三角网格的数量也能有效的减少缩放时锯齿的生成，提升用户体验。

实施例2：

本实施例用于提供一种Web下DWG图纸字体一致性绘制系统，如图5所示，所述绘制系统包括：

纹理图片生成模块M1，用于在Web后端，提取DWG图纸中的所有字符；对于每一所述字符，从字体库中选取所述字符的字体所对应的字体文件，并从所述字体文件中选取所述字符对应的字符信息，根据所述字符信息生成所述字符对应的SDF纹理图片；所述字体库包括多种字体对应的字体文件；所述字体文件包括多个字符对应的字符信息；所述字符信息包括多个按序排列的坐标，按照顺序将所有所述坐标相连接则得到所述字符；

绘制模块M2，用于在Web前端显示所述DWG图纸时，基于所述字符对应的SDF纹理图片绘制所述字符。

本说明书中每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的系统而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种Web下DWG图纸字体一致性绘制方法，其特征在于，所述绘制方法包括：

在Web后端，提取DWG图纸中的所有字符；对于每一所述字符，从字体库中选取所述字符的字体所对应的字体文件，并从所述字体文件中选取所述字符对应的字符信息，根据所述字符信息生成所述字符对应的SDF纹理图片；所述字体库包括多种字体对应的字体文件；所述字体文件包括多个字符对应的字符信息；所述字符信息包括多个按序排列的坐标，按照顺序将所有所述坐标相连接即绘制得到所述字符；

在Web前端显示所述DWG图纸时，基于所述字符对应的SDF纹理图片绘制所述字符。

2.根据权利要求1所述的绘制方法，其特征在于，在所述提取DWG图纸中的所有字符之后，所述绘制方法还包括：以提取的每一所述字符的字体和字符串作为键值，构建第一Hash表。

3.根据权利要求1所述的绘制方法，其特征在于，所述从所述字体文件中选取所述字符对应的字符信息具体包括：根据所述字符的字符串，在所述字体文件所包括的字符表中确定偏移量；根据所述偏移量，在所述字体文件所包括的数据表中确定所述字符对应的字符信息。

4.根据权利要求1所述的绘制方法，其特征在于，所述根据所述字符信息生成所述字符对应的SDF纹理图片具体包括：

创建一张空白的位图；

将所述字符信息绘制在所述位图上，得到字符位图；

利用欧式距离转换算法计算所述字符位图中每一像素点的SDF值，得到SDF信息；

根据所述SDF信息生成所述字符对应的SDF纹理图片。

5.根据权利要求1所述的绘制方法，其特征在于，所述基于所述字符对应的SDF纹理图片绘制所述字符具体包括：

确定一四边形，并将所述四边形放置于所述字符在所述DWG图纸中的位置；

将所述字符对应的SDF纹理图片的四个顶点坐标赋予所述四边形的四个顶点；

以所述字符对应的SDF纹理图片作为输入纹理，利用片元着色器在所述四边形上绘制所述字符。

6.根据权利要求5所述的绘制方法，其特征在于，所述四边形由两个三角面片组成。

7.根据权利要求1所述的绘制方法，其特征在于，在得到所述字符对应的SDF纹理图片之后，所述绘制方法还包括：将所有所述字符对应的SDF纹理图片合并为若干张总纹理图片进行存储，每一所述字符对应的SDF纹理图片属于一所述总纹理图片；所述总纹理图片的张数由所有所述字符对应的SDF纹理图片的尺寸总和与所述总纹理图片的尺寸的比值向上取整得到。

8.根据权利要求7所述的绘制方法，其特征在于，对于每一所述字符，计算所述字符对应的SDF纹理图片在其所属的所述总纹理图片中的纹理坐标，并以所述字符对应的字符串、所述纹理坐标和所述字符对应的SDF纹理图片所属的总纹理图片的索引号作为键值，构建第二Hash表。

9.根据权利要求8所述的绘制方法，其特征在于，在所述基于所述字符对应的SDF纹理图片绘制所述字符之前，所述绘制方法还包括：根据所述第二Hash表在所有所述总纹理图片中提取所述字符对应的SDF纹理图片。

10.一种Web下DWG图纸字体一致性绘制系统，其特征在于，所述绘制系统包括：

纹理图片生成模块，用于在Web后端，提取DWG图纸中的所有字符；对于每一所述字符，从字体库中选取所述字符的字体所对应的字体文件，并从所述字体文件中选取所述字符对应的字符信息，根据所述字符信息生成所述字符对应的SDF纹理图片；所述字体库包括多种字体对应的字体文件；所述字体文件包括多个字符对应的字符信息；所述字符信息包括多个按序排列的坐标，按照顺序将所有所述坐标相连接即绘制得到所述字符；

绘制模块，用于在Web前端显示所述DWG图纸时，基于所述字符对应的SDF纹理图片绘制所述字符。

Images