CN111209721A - 位图字体实现方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明的实施例提供了一种位图字体实现方法、装置、电子设备以及存储介质，涉及计算机技术领域。该方法包括：获取包括多个字符的源图，并获得包括源图中各个字符的源纹理区域数据的配置文件；根据配置文件获得待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量；根据配置文件获得待渲染文本中每个待渲染字符的源纹理区域数据；根据缩放比和偏移量以及每个待渲染字符的源纹理区域数据确定每个待渲染字符的目标纹理区域数据；根据每个待渲染字符的目标纹理区域数据在目标画布绘制每个待渲染字符，生成目标位图文本。本发明实施例的技术方案在显示字符长度增加时不需要增加HTML的文档对象模型节点，从而能够提高渲染性能。

Description

位图字体实现方法、装置、电子设备及存储介质

技术领域

本发明涉及计算机技术领域，具体而言，涉及一种位图字体实现方法、位图字体实现装置、电子设备以及计算机可读存储介质。

背景技术

位图字体(Bitmap Font)又叫位图文本(Bitmap Text)，是一种通过图片代替特殊效果文字展示的技术，在Web(World Wide Web，万维网)开发及游戏开发中都有广泛的应用。

在Web开发及游戏开发中，为了展示更酷炫的效果，经常会使用一些特殊字体或者艺术字体。如果直接将特殊字体或者艺术字体内置在网页和游戏程序中会使加载和运行速度变慢，使用位图字体可以很好的解决这个问题。目前，在实现位图字体的一种技术方案中，参照图1所述，将位图字体按照单张图片导出并命名，编写相关CSS(Cascading StyleSheets，层叠样式表)样式文件和HTML(HyperText Markup Language，超文本标记语言)代码，使用HTML中的img标签的src属性加载对应字符例如字符“520”的图片地址，运行对应的HTML代码对位图字体进行显示，显示效果如图2所示。

然而，在该技术方案中，随着显示字符长度的增加对应HTML的DOM(DocumentObject Model，文档对象模型)节点数量会增加，从而造成渲染性能降低的问题。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本发明背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本发明实施例的目的在于提供一种位图字体实现方法、位图字体实现装置、电子设备以及计算机可读存储介质，进而至少在一定程度上克服由于相关技术的限制和缺陷而导致的一个或者多个问题。

根据本发明实施例的第一方面，提供了一种位图字体实现方法，包括：获取包括多个字符的源图，并获得包括所述源图中各个字符的源纹理区域数据的配置文件，所述源纹理区域数据包括各个字符在所述源图中的位置和尺寸信息；根据所述配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量，所述源位图文本为由与所述待渲染文本中的待渲染字符对应的所述源图中的字符组成的文本；根据所述配置文件获得所述待渲染文本中每个待渲染字符的源纹理区域数据；根据所述缩放比和所述偏移量以及每个待渲染字符的源纹理区域数据确定每个待渲染字符的目标纹理区域数据，所述目标纹理区域数据包括每个待渲染字符在所述目标画布上的位置和尺寸信息；根据每个待渲染字符的目标纹理区域数据在所述目标画布绘制每个待渲染字符，生成目标位图文本。

在本发明的一些示例性实施例中，基于前述方案，所述位图字体实现方法还包括：配置字符模板，所述字符模板包括各个字符与所述字符的单字符源图之间的对应关系；根据所述配置文件和所述字符模板获得各个字符及所述字符的单字符源图、源纹理区域数据之间的映射关系。

在本发明的一些示例性实施例中，基于前述方案，根据所述配置文件和所述字符模板获得各个字符及所述字符的单字符源图、源纹理区域数据之间的映射关系，包括：遍历所述字符模板中的各个字符，获取各个字符的单字符源图的标识信息；基于所述标识信息从所述配置文件中获取各个字符的源纹理区域数据；获取各个字符及所述字符的单字符源图、源纹理区域数据之间的映射关系。

在本发明的一些示例性实施例中，基于前述方案，根据所述配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量，包括：根据所述待渲染文本和所述映射关系获得所述待渲染文本对应的源位图文本的逻辑尺寸；根据目标画布尺寸和所述逻辑尺寸获得所述源位图文本的缩放比；根据所述逻辑尺寸和所述缩放比获得所述源位图文本在所述目标画布上的所述偏移量。

在本发明的一些示例性实施例中，基于前述方案，每个待渲染字符的源纹理区域数据包括每个待渲染字符的源位置信息和源尺寸信息；每个待渲染字符的目标纹理区域数据包括每个待渲染字符的目标位置信息和目标尺寸信息。

在本发明的一些示例性实施例中，基于前述方案，所述配置文件为JSON文件或CSS文件。

在本发明的一些示例性实施例中，基于前述方案，所述目标画布为Canvas画布。

在本发明的一些示例性实施例中，基于前述方案，根据所述缩放比和所述偏移量以及每个待渲染字符的源纹理区域数据确定每个待渲染字符的目标纹理区域数据，包括：从每个待选渲染字符的源纹理区域数据中获取对应的所述源图中的字符的位置和尺寸信息；基于所述缩放比和所述偏移量以及所述位置和尺寸信息确定每个待渲染字符在所述目标画布上的位置和尺寸信息；将每个待渲染字符在所述目标画布上的位置和尺寸信息作为每个待渲染字符的目标纹理区域数据。

根据本发明实施例的第二方面，提供一种位图字体实现方法，包括：源信息获取单元，用于获取包括多个字符的源图，并获得包括所述源图中各个字符的源纹理区域数据的配置文件；缩放比和偏移量确定单元，用于根据所述配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量；源纹理区域获取单元，用于根据所述配置文件获得所述待渲染文本中每个待渲染字符的源纹理区域数据；目标纹理区域确定单元，根据所述缩放比和所述偏移量以及每个待渲染字符的源纹理区域数据确定每个待渲染字符的目标纹理区域数据；位图文本生成单元，用于根据每个待渲染字符的目标纹理区域数据在所述目标画布绘制每个待渲染字符，生成目标位图文本。

根据本发明实施例的第三方面，提供一种电子设备，包括：处理器；以及存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时实现如上述任意一项所述的位图字体实现方法。

根据本发明实施例的第四方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上述任意一项所述的位图字体实现方法。

在本发明的一些实施例所提供的技术方案中，一方面，根据包括源图中各个字符的源纹理区域数据的配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量，能够确定每个待渲染字符对应的源字符在目标画布上的缩放比和偏移量；另一方面，根据缩放比和偏移量以及源纹理区域确定每个待渲染字符的目标纹理区域数据，并根据标纹理区域数据在目标画布绘制每个待渲染字符，由于每个待渲染字符的缩放比和偏移量相同，对每个待渲染字符对应的单字符源图执行类似的渲染过程，在显示字符长度增加时不需要增加HTML的文档对象模型节点，从而能够提高渲染性能。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1示出了一种技术方案中的多个字符的单张图片的示意图；

图2示出了图1所示的技术方案中的位图字体实现方法的实现效果的示意图；

图3示出了另一种技术方案中包含多个字符的源图的示意图；

图4示出了图3所示的技术方案中包含源图中各个字符的位置和尺寸信息的配置文件的示意图；

图5示出了图3所示的技术方案中的位图字体实现方法的实现效果的示意图；

图6示出了根据本发明的一些实施例的位图字体实现方法的流程示意图；

图7示出了根据本发明的一些实施例中包含源图中各个字符的位置和尺寸信息的配置文件的示意图；

图8示出了根据本发明的一些实施例的源纹理区域与目标纹理区域的示意图；

图9示出了根据本发明的一些实施例的字符模板的示意图；

图10示出了根据本发明的一些实施例确定源位图文本在目标画布上的缩放比和偏移量的流程示意图；

图11示出了根据本发明的一些实施例确定逻辑尺寸的流程示意图；

图12示出了根据本发明的一些实施例确定逻辑尺寸的示意图；

图13示出了根据本发明另一些实施例的位图字体实现方法的流程示意图；

图14示出了根据本发明的一些实施例的位图字体实现方法的实现效果的示意图；

图15示出了根据本发明的一些示例性实施例的位图字体实现装置的示意框图；

图16示出了适于用来实现本发明实施例的电子设备的计算机系统的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施例。然而，示例实施例能够以多种形式实施，且不应被理解为限于在此阐述的实施例；相反，提供这些实施例使得本发明将全面和完整，并将示例实施例的构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本发明的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本发明的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本发明的各方面。

附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。

在另一种技术方案中，通过合图工具如spritesmith将艺术字符的单张图片合并成大图即源图并导出对应单张图在源图中的位置和尺寸信息。源图nums.png如图3所示，描述单张图在源图中的位置和尺寸信息的样式文件nums.css如图4所示，在图4中，以字符“0”为例，字符“0”在源图中的宽为80像素、高为135像素，位置位于(0，0)像素处。通过编写与待渲染文本例如“520”中的各个字符对应的CSS样式文件和HTML代码，使用HTML中div标签的class属性给对应字符图片的样式名称进行赋值。然后，运行对应HTML代码获得如图5所示效果。

然而，在该技术方案中，在该技术方案中，随着显示字符长度的增加对应的HTML文档对象模型的节点数量增加，仍然会造成渲染性能降低的问题；此外，在特定场景动态显示不同文本时会频繁操作HTML的DOM节点造成渲染性能降低；

因此，在本发明的示例实施例中，首先提供了一种位图字体实现方法。图6示出了根据本发明的一些实施例的位图字体实现方法的流程示意图。

参照图6所示，在步骤S610中，获取包括多个字符的源图，并获得包括所述源图中各个字符的源纹理区域数据的配置文件，所述源纹理区域数据包括各个字符在所述源图中的位置和尺寸信息。

在示例实施例中，可以预先将多个字符例如艺术字的图片合并成一张大图即源图，通过配置文件例如JSON文件描述与每个字符对应的单张图在该源图中的源纹理区域数据，该源纹理区域数据包括每个字符在源图中的源位置信息和源尺寸信息。此外，配置文件中还可以包括：源图的名称、源图的尺寸信息例如宽、高等数据。将得到的源图以及配置文件进行缓存例如缓存到程序内存中，从缓存中获取源图以及包括源图中各个字符的源纹理区域数据的配置文件。

需要说明的是，在本示例实施例中，配置文件为JSON文件，但是，在本发明的示例实施例中，配置文件也可以为其他适当形式的文件例如CSS文件，这同样在本发明的保护范围内。

在步骤S620中，根据所述配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量，所述源位图文本为由与所述待渲染文本中的待渲染字符对应的所述源图中的字符组成的文本。

在示例实施例中，待渲染文本为用户输入的文本内容例如用户输入的文本内容“520”，根据待渲染文本中的字符从配置文件中获取对应字符的尺寸，基于对应字符的尺寸与各个字符的水平间距确定待渲染文本的逻辑尺寸，待渲染文本的逻辑尺寸为待渲染文本中的各个字符与源图中保持相同的尺寸并考虑了字符之间的间距的尺寸。

进一步地，在示例实施例中，基于待渲染文本的逻辑尺寸以及目标画布的尺寸确定待渲染文本在目标画布上的缩放比；根据待渲染文本的逻辑尺寸以及该缩放比确定源位图文本在目标画布上的偏移量。原位图文本在目标画布上的偏移量与源位图文本在目标画布上的布局有关，例如，整个位图文本是布局于目标画布的中央，还是位于目标画布的左上角，或者位于目标画布的右下角。以将位图文本布局于目标画布中央为例，根据逻辑尺寸以及缩放比以及位图文本在目标画布的布局位置确定位图文本在目标画布上的整体偏移量，例如，左边空25个像素，右边同样空25个像素。

在步骤S630中，根据所述配置文件获得所述待渲染文本中每个待渲染字符的源纹理区域数据。

在示例实施例中，根据待渲染文本中的每个待渲染字符从配置文件中获取对应字符的源纹理区域数据，每个待渲染字符的源纹理区域数据包括每个待渲染字符的源位置信息和源尺寸信息，例如每个待渲染字符的源纹理区域数据可以包括：该字符的单张图的一个顶点在源图中的坐标，以及该单张图的宽与高。

在示例实施例中，遍历待渲染文本例如文本“520”中的每个字符的标识，基于各个字符的标识从配置文件中获取各个字符对应在源图中的源位置，即sx，sy，sw，sh四个参数值。其中，sx表示需要绘制到目标画布中的，源字符图像的矩形选择框的左上角X坐标；sy表示需要绘制到目标画布中的，源字符图像的矩形选择框的左上角Y坐标；sw表示需要绘制到目标画布中的，源字符图像的矩形选择框的宽度；sh表示需要绘制到目标画布中的，源字符图像的矩形选择框的高度。

参照图7所示，配置文件中可以包括源图的尺寸、每个字符的单张图的位置和尺寸。每个待渲染字符的源纹理区域数据即为每个字符的单张图的位置和尺寸信息。源图的标识符为“nums.png”，源图的宽度为420，高度为275；字符“num_0.png”的x轴为0，y轴为0，宽度为80，高度为135；字符“num_1.png”的x轴为85，y轴为0，宽度为80，高度为135。

在步骤S640中，根据所述缩放比和所述偏移量以及每个待渲染字符的源纹理区域数据确定每个待渲染字符的目标纹理区域数据，所述目标纹理区域数据包括每个待渲染字符在所述目标画布上的位置和尺寸信息。

在示例实施例中，遍历待渲染文本中的每个待渲染字符，根据每个待渲染字符的源纹理数据、缩放比、偏移量确定每个待渲染字符的目标纹理区域数据，每个待渲染字符的目标纹理区域数据包括每个待渲染字符的目标位置信息和目标尺寸信息。

具体而言，从每个待渲染字符的源纹理区域数据获取对应字符的源位置信息和源尺寸信息，参照图8所示，即sx、sy、sw以及sh四个参数值，基于上述缩放比以及偏移量确定每个待渲染字符在目标画布上的目标位置，即图8中的dx，dy，dw，dh四个参数值，其中，dx表示目标画布的左上角在目标canvas上X轴的位置；dy表示目标画布的左上角在目标canvas上Y轴的位置；dw表示在目标画布上绘制图像的宽度；dh表示在目标画布上绘制图像的高度。

在步骤S650中，根据每个待渲染字符的目标纹理区域数据在所述目标画布绘制每个待渲染字符，生成目标位图文本。

在示例实施例中，基于每个待渲染字符的目标纹理区域数据、每个待渲染字符的源纹理区域以及对应字符的源图，在目标画布上绘制出每个待渲染字符，生成目标位图文本。

根据图6中所示的位图字体实现方法，一方面，根据包括源图中各个字符的源纹理区域数据的配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量，能够确定每个待渲染字符对应的源字符在目标画布上的缩放比和偏移量；另一方面，根据缩放比和偏移量以及源纹理区域确定每个待渲染字符的目标纹理区域数据，并根据标纹理区域数据在目标画布绘制每个待渲染字符，由于每个待渲染字符的缩放比和偏移量相同，对每个待渲染字符对应的单字符源图执行类似的渲染过程，在显示字符长度增加时不需要增加HTML的文档对象模型节点，从而能够提高渲染性能。

进一步地，在示例实施例中，以目标画布为canvas画布为例，在目标画布绘制待渲染字符时，可以利用canvas上下文(句柄)的方法_context.drawImage(imageData，srcRect.x，srcRect.y，srcRect.width，srcRect.height，dstRect.x，dstRect.y，dstRect.width，dstRect.height)画出对应字符的位图文本。drawImage方法为Canvas 2DAPI(Application Program Interface，应用程序接口)中的方法：_context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)提供了多种方式来在Canvas上绘制图像。参照图8所示，位图文本绘制原理如下：参数image表示绘制到上下文的字符元素，例如上述图8的源图的“5”。在本示例实施例中，允许任何的canvas图像源；参数dx表示目标画布的左上角在目标画布canvas上X轴的位置；参数dy表示目标画布的左上角在目标canvas上Y轴的位置；参数dw表示在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放；参数dh表示在目标画布上绘制图像的高度，允许对绘制的图像进行缩放；参数sx表示需要绘制到目标画布上下文中的，源图像的矩形选择框的左上角X坐标；参数sy表示需要绘制到目标画布上下文中的，源图像的矩形选择框的左上角Y坐标；参数sw表示需要绘制到目标上下文中的，源图像的矩形选择框的宽度；参数sh表示需要绘制到目标画布上下文中的，源图像的矩形选择框的高度。

此外，在示例实施例中，配置字符模板，该字符模板包括各个字符与所述字符的单字符源图之间的对应关系；通过配置字符模板，能够提高字符的可扩展性，例如，通过配置字符模板，在源图“nums.png”中，字符01234845679可以不按照严格的顺序排列。参照图9所示，在该字符模板中，“0”为字符的关键字即key，“num_0.png”为与字符0对应的值value。字符的key代表真实字符即艺术字，如果是一些特殊的艺术字，则可以将对应的艺术字写入字符模板的key。

进一步地，在示例实施例中，根据所述配置文件和所述字符模板获得各个字符及对应字符的单字符源图、源纹理区域数据之间的映射关系。例如，将上述步骤1的配置文件即json文件和字符模板即template组合起来，获得各个字符及对应字符的单字符源图、源纹理区域数据之间的映射关系，例如，在字符模板中，“0”对应num_0.png，同时，在配置文件中，num_0.png对应的源纹理区域数据即x，y，w，h分别为0、0、80、135。

具体而言，可以整合由配置文件例如json文件nums.json以及字符模板数据；遍历字符模板中的每个key，根据与每个key对应的value值在配置文件nums.json的对应字段例如图7中的frames字段找到对应的配置项进行组合，获得需要显示的字符以及对应单字符源图、纹理区域数据之间的映射关系。通过建立字符与单字符源图、纹理区域数据之间的映射关系，能够在显示字符串长度增加时不用增加HTML的DOM节点数量，从而能够提高渲染性能；并且，在动态显示不同文本时，不会频繁操作HTML的DOM节点，从而能够进一步提高渲染性能。

图10示出了根据本发明的一些实施例确定源位图文本在目标画布上的缩放比和偏移量的流程示意图。

参照图10所示，在步骤S1010中，根据所述待渲染文本和所述映射关系获得所述待渲染文本对应的源位图文本的逻辑尺寸。

在示例实施例中，根据待渲染文本结合各个字符及对应字符的单字符源图、源纹理区域数据之间的映射关系，计算出待渲染文本对应的位图文本的逻辑尺寸_logicSize，待渲染文本内容为输入参数“520”，即要用位图显示的特殊字符，根据输入参数和上述映射关系数据，可以计算出“520”在下面的蓝色的画布canvas的整体的宽和高即位图文本的逻辑尺寸_logicSize，需要说明的是，这里的_logicSize是指520字符的宽和高没有进行缩放，与源图中保持一样的宽和高的情况下计算出来的，同时这里还根据设置的画布中每个字符之间的间隙来计算_logicSize，每个字符之间的间隙是可以人为设置的，类似word中输入的多个字符之间的间距设置。

在步骤S1020中，根据目标画布尺寸和所述逻辑尺寸获得所述源位图文本的缩放比；

在示例实施例中，根据逻辑尺寸_logicSize和目标画布的尺寸可以判断该位图文本是否要进行缩放，例如，如果最终想要达到的布局效果是将整个位图文本“520”全部占满整个画布canvas，而_logicSize较小，则需要将位图文本进行相应比例的放大；反之，若整个位图文本较大，超过了画布尺寸，则需要将位图文本进行缩小。

在步骤S1030中，根据所述逻辑尺寸和所述缩放比获得所述源位图文本在所述目标画布上的所述偏移量。

在示例实施例中，根据想要的布局效果有关，例如，整个位图文本是位于画布的中央，还是位于画布的左上角，或者位于画布的右下角。以想要的布局效果位于画布中央为例，根据_logicSize和_scale可以计算出位图文本在画布上的整体偏移量，例如左边空25个像素，右边同样的空25个像素。

图11示出了根据本发明的一些实施例确定逻辑尺寸的流程示意图。

参照图11所示，在步骤S1110中，将源位图文本的逻辑尺寸的宽logic_w以及高logic_h初始化为0，设置目标画布例如canvas画布中每个字符之间的间隙hspace，可以根据需要设置间隙hspace的值。

在步骤S1120中，判断待渲染文本中的字符是否已经处理完毕，即判断下一个待处理的字符的编号是否小于待渲染文本的长度，若下一个待处理的字符的标号小于待渲染文本的长度，表示还未处理完毕，进行至步骤S1130，若不小于待渲染文本的长度，表示已处理完毕，进行至步骤S1150。

在步骤S1130中，获取下一个待处理的字符，获取与该字符对应的源纹理区域数据，将该字符的源纹理区域数据中的宽度、目标画布中的字符之间的间隙hspace、以及上一次计算的逻辑尺寸的宽相加，获得增加了该字符之后的逻辑尺寸的宽logic_w，逻辑尺寸的高logic_h取上一次计算的逻辑尺寸的高与该字符的源纹理数据中的高的较大值。

在步骤S1140中，在对该字符处理完毕后，将该字符的编号值加1，然后返回至步骤S1120。

在步骤S1150中，在对待渲染文本中的字符处理完毕之后，获得待渲染文本对应的源位图文本的逻辑尺寸。参照图12所示，该对应的源位图文本的逻辑尺寸即为下图中矩形框的宽和高。

图13示出了根据本发明的一些实施例的位图字体实现方法的实现效果的示意图。

参照图13所示，在步骤S1310中，创建目标画布例如Canvas画布，获得画图句柄即上下文_context。

在步骤S1320中，判断是否缓存了各个字符及对应字符的单字符源图、源纹理区域数据之间的映射关系数据，若判定缓存了映射关系数据，则进行至步骤S1350；若判定未缓存映射关系数据，则进行至步骤S1330。

在步骤S1330中，加载配置文件，从配置文件中获取各个字符的源纹理区域数据。

在步骤S1340中，生成各个字符以及对应字符的单字符源图、源纹理区域数据之间的映射关系。

在步骤S1350中，从缓存中获得映射关系数据即_desc。

在步骤S1360中，清除目标画布，基于映射关系数据以及待渲染文本确定与待渲染文本对应的源位图文本的逻辑尺寸_logicSize，根据目标画布尺寸和该逻辑尺寸确定源位图文本的缩放比_scale；根据该逻辑尺寸以及该缩放比获得源位图文本在目标画布上的偏移量offset。

在步骤S1370中，判断待渲染文本中的字符是否已经处理完毕，即判断下一个待处理的字符的编号是否小于待渲染文本的长度，若下一个待处理的字符的标号小于待渲染文本的长度，表示还未处理完毕，进行至步骤S1380；若不小于待渲染文本的长度，表示已处理完毕，则渲染结束。

在步骤S1380中，获取下一个待处理的字符，获取与该字符对应的源纹理区域数据，根据步骤S1360中得到的缩放比和偏移量offset确定该字符在目标画布上的位置dstRect，基于该字符的目标纹理区域数据、源纹理区域数据、以及对应的源图数据在目标画布上绘制该字符。以Canvas画布为了，可以通过_context.drawImage(imagedata，srcRect，dstRect)API在Canvas上绘制对应的字符，其中，imagedata为源图数据，srcRect为源纹理区域数据，dstRect为目标纹理区域数据。

在步骤S1390中，在对该字符处理完毕后，将该字符的编号值加1，然后返回至步骤S1370。

图14示出了根据本发明的一些实施例的位图字体实现方法的实现效果的示意图。参照图14所示，左图表示在目标画布上渲染之后的位图文本，右图为对应的HTML编码，从右图可以看出，采用本发明的实施例的技术方案之后，仅需在HTML源码中添加canvas画布的宽即400和高135一个节点，不需要额外的DOM节点，从而能够在显示字符长度增加时不需要增加DOM节点数据，进而能够提高渲染性能；在动态显示不同文本时，不会频繁操作HTML的DOM节点，从而能够进一步提高渲染性能。

此外，在本发明的实施例中，还提供了一种位图字体实现装置。参照图15所示，该位图字体实现装置1500可以包括：源信息获取单元1510、缩放比和偏移量确定单元1520、源纹理区域获取单元1530、目标纹理区域确定单元1540以及位图文本生成单元1550。其中，源信息获取单元1510用于获取包括多个字符的源图，并获得包括所述源图中各个字符的源纹理区域数据的配置文件，所述源纹理区域数据包括各个字符在所述源图中的位置和尺寸信息；缩放比和偏移量确定单元1520用于根据所述配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量，所述源位图文本为由与所述待渲染文本中的待渲染字符对应的所述源图中的字符组成的文本；源纹理区域获取单元1530用于根据所述配置文件获得所述待渲染文本中每个待渲染字符的源纹理区域数据；目标纹理区域确定单元1540根据所述缩放比和所述偏移量以及每个待渲染字符的源纹理区域数据确定每个待渲染字符的目标纹理区域数据，所述目标纹理区域数据包括每个待渲染字符在所述目标画布上的位置和尺寸信息；位图文本生成单元1550用于根据每个待渲染字符的目标纹理区域数据在所述目标画布绘制每个待渲染字符，生成目标位图文本。

在本发明的一些示例性实施例中，基于前述方案，所述位图字体实现装置1500还包括：字符模板配置单元，用于配置字符模板，所述字符模板包括各个字符与所述字符的单字符源图之间的对应关系；映射关系生成单元，用于根据所述配置文件和所述字符模板获得各个字符及所述字符的单字符源图、源纹理区域数据之间的映射关系。

在本发明的一些示例性实施例中，基于前述方案，映射关系生成单元包括：遍历单元，用于遍历所述字符模板中的各个字符，获取各个字符的单字符源图的标识信息；源纹理数据获取单元，用于基于所述标识信息从所述配置文件中获取各个字符的源纹理区域数据；映射关系确定单元，用于获取各个字符及所述字符的单字符源图、源纹理区域数据之间的映射关系。

在本发明的一些示例性实施例中，基于前述方案，缩放比和偏移量确定单元1520包括：逻辑尺寸确定单元，用于根据所述待渲染文本和所述映射关系获得所述待渲染文本对应的源位图文本的逻辑尺寸；缩放比确定单元，用于根据目标画布尺寸和所述逻辑尺寸获得所述源位图文本的缩放比；偏移量确定单元，用于根据所述逻辑尺寸和所述缩放比获得所述源位图文本在所述目标画布上的所述偏移量。

在本发明的一些示例性实施例中，基于前述方案，每个待渲染字符的源纹理区域数据包括每个待渲染字符的源位置信息和源尺寸信息；每个待渲染字符的目标纹理区域数据包括每个待渲染字符的目标位置信息和目标尺寸信息。

在本发明的一些示例性实施例中，基于前述方案，所述配置文件为JSON文件或CSS文件。

在本发明的一些示例性实施例中，基于前述方案，所述目标画布为Canvas画布。

在本发明的一些示例性实施例中，基于前述方案，目标纹理区域确定单元1540被配置为：从每个待选渲染字符的源纹理区域数据中获取对应的所述源图中的字符的位置和尺寸信息；基于所述缩放比和所述偏移量以及所述位置和尺寸信息确定每个待渲染字符在所述目标画布上的位置和尺寸信息；将每个待渲染字符在所述目标画布上的位置和尺寸信息作为每个待渲染字符的目标纹理区域数据。

由于本发明的示例实施例的位图字体实现装置1500的各个功能模块与上述位图字体实现方法的示例实施例的步骤对应，因此在此不再赘述。

在本发明的示例性实施例中，还提供了一种能够实现上述方法的电子设备。

下面参考图16，其示出了适于用来实现本发明实施例的电子设备的计算机系统1600的结构示意图。图16示出的电子设备的计算机系统1600仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图16所示，计算机系统1600包括中央处理单元(CPU)1601，其可以根据存储在只读存储器(ROM)1602中的程序或者从存储部分1608加载到随机访问存储器(RAM)1603中的程序而执行各种适当的动作和处理。在RAM 1603中，还存储有系统操作所需的各种程序和数据。CPU 1601、ROM 1602以及RAM 1603通过总线1604彼此相连。输入/输出(I/O)接口1605也连接至总线1604。

以下部件连接至I/O接口1605：包括键盘、鼠标等的输入部分1606；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分1607；包括硬盘等的存储部分1608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分1609。通信部分1609经由诸如因特网的网络执行通信处理。驱动器1610也根据需要连接至I/O接口1605。可拆卸介质1611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1610上，以便于从其上读出的计算机程序根据需要被安装入存储部分1608。

特别地，根据本发明的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分1609从网络上被下载和安装，和/或从可拆卸介质1611被安装。在该计算机程序被中央处理单元(CPU)1601执行时，执行本申请的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现，所描述的单元也可以设置在处理器中。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定。

作为另一方面，本申请还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该电子设备执行时，使得该电子设备实现如上述实施例中所述的位图字体实现方法。

例如，所述电子设备可以实现如图6中所示的：步骤S610，获取包括多个字符的源图，并获得包括所述源图中各个字符的源纹理区域数据的配置文件；步骤S620，根据所述配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量；步骤S630，根据所述配置文件获得所述待渲染文本中每个待渲染字符的源纹理区域数据；步骤S640，根据所述缩放比和所述偏移量以及每个待渲染字符的源纹理区域数据确定每个待渲染字符的目标纹理区域数据；步骤S650，根据每个待渲染字符的目标纹理区域数据在所述目标画布绘制每个待渲染字符，生成目标位图文本。

应当注意，尽管在上文详细描述中提及了用于动作执行的设备或装置的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本发明实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、触控终端、或者网络设备等)执行根据本发明实施方式的方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本发明的其它实施方案。本申请旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本发明未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的权利要求指出。

应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求来限制。

Claims (11)

1.一种位图字体实现方法，其特征在于，包括：

获取包括多个字符的源图，并获得包括所述源图中各个字符的源纹理区域数据的配置文件，所述源纹理区域数据包括各个字符在所述源图中的位置和尺寸信息；

根据所述配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量，所述源位图文本为由与所述待渲染文本中的待渲染字符对应的所述源图中的字符组成的文本；

根据所述配置文件获得所述待渲染文本中每个待渲染字符的源纹理区域数据；

根据所述缩放比和所述偏移量以及每个待渲染字符的源纹理区域数据确定每个待渲染字符的目标纹理区域数据，所述目标纹理区域数据包括每个待渲染字符在所述目标画布上的位置和尺寸信息；

根据每个待渲染字符的目标纹理区域数据在所述目标画布绘制每个待渲染字符，生成目标位图文本。

2.根据权利要求1所述的位图字体实现方法，其特征在于，所述位图字体实现方法还包括：

配置字符模板，所述字符模板包括各个字符与所述字符的单字符源图之间的对应关系；

根据所述配置文件和所述字符模板获得各个字符及所述字符的单字符源图、源纹理区域数据之间的映射关系。

3.根据权利要求2所述的位图字体实现方法，其特征在于，根据所述配置文件和所述字符模板获得各个字符及所述字符的单字符源图、源纹理区域数据之间的映射关系，包括：

遍历所述字符模板中的各个字符，获取各个字符的单字符源图的标识信息；

基于所述标识信息从所述配置文件中获取各个字符的源纹理区域数据；

获取各个字符及所述字符的单字符源图、源纹理区域数据之间的映射关系。

4.根据权利要求2所述的位图字体实现方法，其特征在于，根据所述配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量，包括：

根据所述待渲染文本和所述映射关系获得所述待渲染文本对应的源位图文本的逻辑尺寸；

根据目标画布尺寸和所述逻辑尺寸获得所述源位图文本的缩放比；

根据所述逻辑尺寸和所述缩放比获得所述源位图文本在所述目标画布上的所述偏移量。

5.根据权利要求4所述的位图字体实现方法，其特征在于，每个待渲染字符的源纹理区域数据包括每个待渲染字符的源位置信息和源尺寸信息；每个待渲染字符的目标纹理区域数据包括每个待渲染字符的目标位置信息和目标尺寸信息。

6.根据权利要求2所述的位图字体实现方法，其特征在于，所述配置文件为JSON文件或CSS文件。

7.根据权利要求1至6中任一项所述的位图字体实现方法，其特征在于，所述目标画布为Canvas画布。

8.根据权利要求1所述的位图字体实现方法，其特征在于，根据所述缩放比和所述偏移量以及每个待渲染字符的源纹理区域数据确定每个待渲染字符的目标纹理区域数据，包括：

从每个待选渲染字符的源纹理区域数据中获取对应的所述源图中的字符的位置和尺寸信息；

基于所述缩放比和所述偏移量以及所述位置和尺寸信息确定每个待渲染字符在所述目标画布上的位置和尺寸信息；

将每个待渲染字符在所述目标画布上的位置和尺寸信息作为每个待渲染字符的目标纹理区域数据。

9.一种位图字体实现装置，其特征在于，包括：

源信息获取单元，用于获取包括多个字符的源图，并获得包括所述源图中各个字符的源纹理区域数据的配置文件，所述源纹理区域数据包括各个字符在所述源图中的位置和尺寸信息；

缩放比和偏移量确定单元，用于根据所述配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量，所述源位图文本为由与所述待渲染文本中的待渲染字符对应的所述源图中的字符组成的文本；

源纹理区域获取单元，用于根据所述配置文件获得所述待渲染文本中每个待渲染字符的源纹理区域数据；

目标纹理区域确定单元，根据所述缩放比和所述偏移量以及每个待渲染字符的源纹理区域数据确定每个待渲染字符的目标纹理区域数据，所述目标纹理区域数据包括每个待渲染字符在所述目标画布上的位置和尺寸信息；

位图文本生成单元，用于根据每个待渲染字符的目标纹理区域数据在所述目标画布绘制每个待渲染字符，生成目标位图文本。

10.一种电子设备，其特征在于，包括：处理器；以及存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时实现如权利要求1至8中任一项所述的位图字体实现方法。

11.一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至8中任一项所述的位图字体实现方法。

Images