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

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

Bitmap font implementation method, device, electronic equipment and storage medium

【技术实现步骤摘要】
位图字体实现方法、装置、电子设备及存储介质
本专利技术涉及计算机
，具体而言，涉及一种位图字体实现方法、位图字体实现装置、电子设备以及计算机可读存储介质。
技术介绍
位图字体(BitmapFont)又叫位图文本(BitmapText)，是一种通过图片代替特殊效果文字展示的技术，在Web(WorldWideWeb，万维网)开发及游戏开发中都有广泛的应用。在Web开发及游戏开发中，为了展示更酷炫的效果，经常会使用一些特殊字体或者艺术字体。如果直接将特殊字体或者艺术字体内置在网页和游戏程序中会使加载和运行速度变慢，使用位图字体可以很好的解决这个问题。目前，在实现位图字体的一种技术方案中，参照图1所述，将位图字体按照单张图片导出并命名，编写相关CSS(CascadingStyleSheets，层叠样式表)样式文件和HTML(HyperTextMarkupLanguage，超文本标记语言)代码，使用HTML中的img标签的src属性加载对应字符例如字符“520”的图片地址，运行对应的HTML代码对位图字体进行显示，显示效果如图2所示。然而，在该技术方案中，随着显示字符长度的增加对应HTML的DOM(DocumentObjectModel，文档对象模型)节点数量会增加，从而造成渲染性能降低的问题。需要说明的是，在上述
技术介绍
部分公开的信息仅用于加强对本专利技术背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。
技术实现思路
本专利技术实施例的目的在于提供一种位图字体实现方法、位图字体实现装置、电子设备以及计算机可读存储介质，进而至少在一定程度上克服由于相关技术的限制和缺陷而导致的一个或者多个问题。根据本专利技术实施例的第一方面，提供了一种位图字体实现方法，包括：获取包括多个字符的源图，并获得包括所述源图中各个字符的源纹理区域数据的配置文件，所述源纹理区域数据包括各个字符在所述源图中的位置和尺寸信息；根据所述配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量，所述源位图文本为由与所述待渲染文本中的待渲染字符对应的所述源图中的字符组成的文本；根据所述配置文件获得所述待渲染文本中每个待渲染字符的源纹理区域数据；根据所述缩放比和所述偏移量以及每个待渲染字符的源纹理区域数据确定每个待渲染字符的目标纹理区域数据，所述目标纹理区域数据包括每个待渲染字符在所述目标画布上的位置和尺寸信息；根据每个待渲染字符的目标纹理区域数据在所述目标画布绘制每个待渲染字符，生成目标位图文本。在本专利技术的一些示例性实施例中，基于前述方案，所述位图字体实现方法还包括：配置字符模板，所述字符模板包括各个字符与所述字符的单字符源图之间的对应关系；根据所述配置文件和所述字符模板获得各个字符及所述字符的单字符源图、源纹理区域数据之间的映射关系。在本专利技术的一些示例性实施例中，基于前述方案，根据所述配置文件和所述字符模板获得各个字符及所述字符的单字符源图、源纹理区域数据之间的映射关系，包括：遍历所述字符模板中的各个字符，获取各个字符的单字符源图的标识信息；基于所述标识信息从所述配置文件中获取各个字符的源纹理区域数据；获取各个字符及所述字符的单字符源图、源纹理区域数据之间的映射关系。在本专利技术的一些示例性实施例中，基于前述方案，根据所述配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量，包括：根据所述待渲染文本和所述映射关系获得所述待渲染文本对应的源位图文本的逻辑尺寸；根据目标画布尺寸和所述逻辑尺寸获得所述源位图文本的缩放比；根据所述逻辑尺寸和所述缩放比获得所述源位图文本在所述目标画布上的所述偏移量。在本专利技术的一些示例性实施例中，基于前述方案，每个待渲染字符的源纹理区域数据包括每个待渲染字符的源位置信息和源尺寸信息；每个待渲染字符的目标纹理区域数据包括每个待渲染字符的目标位置信息和目标尺寸信息。在本专利技术的一些示例性实施例中，基于前述方案，所述配置文件为JSON文件或CSS文件。在本专利技术的一些示例性实施例中，基于前述方案，所述目标画布为Canvas画布。在本专利技术的一些示例性实施例中，基于前述方案，根据所述缩放比和所述偏移量以及每个待渲染字符的源纹理区域数据确定每个待渲染字符的目标纹理区域数据，包括：从每个待选渲染字符的源纹理区域数据中获取对应的所述源图中的字符的位置和尺寸信息；基于所述缩放比和所述偏移量以及所述位置和尺寸信息确定每个待渲染字符在所述目标画布上的位置和尺寸信息；将每个待渲染字符在所述目标画布上的位置和尺寸信息作为每个待渲染字符的目标纹理区域数据。根据本专利技术实施例的第二方面，提供一种位图字体实现方法，包括：源信息获取单元，用于获取包括多个字符的源图，并获得包括所述源图中各个字符的源纹理区域数据的配置文件；缩放比和偏移量确定单元，用于根据所述配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量；源纹理区域获取单元，用于根据所述配置文件获得所述待渲染文本中每个待渲染字符的源纹理区域数据；目标纹理区域确定单元，根据所述缩放比和所述偏移量以及每个待渲染字符的源纹理区域数据确定每个待渲染字符的目标纹理区域数据；位图文本生成单元，用于根据每个待渲染字符的目标纹理区域数据在所述目标画布绘制每个待渲染字符，生成目标位图文本。根据本专利技术实施例的第三方面，提供一种电子设备，包括：处理器；以及存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时实现如上述任意一项所述的位图字体实现方法。根据本专利技术实施例的第四方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上述任意一项所述的位图字体实现方法。在本专利技术的一些实施例所提供的技术方案中，一方面，根据包括源图中各个字符的源纹理区域数据的配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量，能够确定每个待渲染字符对应的源字符在目标画布上的缩放比和偏移量；另一方面，根据缩放比和偏移量以及源纹理区域确定每个待渲染字符的目标纹理区域数据，并根据标纹理区域数据在目标画布绘制每个待渲染字符，由于每个待渲染字符的缩放比和偏移量相同，对每个待渲染字符对应的单字符源图执行类似的渲染过程，在显示字符长度增加时不需要增加HTML的文档对象模型节点，从而能够提高渲染性能。应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本专利技术。附图说明此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本专利技术的实施例，并与说明书一起用于解释本专利技术的原理。显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：图1示出了一种技术方案中的多个字符的单张图片的示意图；图2示出了图1所示的技术方案中的位图字体实现方法的实现效果的示意图；图3示出了另一种技术方案中包含多个字符的源本文档来自技高网...

【技术保护点】
1.一种位图字体实现方法，其特征在于，包括：/n获取包括多个字符的源图，并获得包括所述源图中各个字符的源纹理区域数据的配置文件，所述源纹理区域数据包括各个字符在所述源图中的位置和尺寸信息；/n根据所述配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量，所述源位图文本为由与所述待渲染文本中的待渲染字符对应的所述源图中的字符组成的文本；/n根据所述配置文件获得所述待渲染文本中每个待渲染字符的源纹理区域数据；/n根据所述缩放比和所述偏移量以及每个待渲染字符的源纹理区域数据确定每个待渲染字符的目标纹理区域数据，所述目标纹理区域数据包括每个待渲染字符在所述目标画布上的位置和尺寸信息；/n根据每个待渲染字符的目标纹理区域数据在所述目标画布绘制每个待渲染字符，生成目标位图文本。/n

【技术特征摘要】
1.一种位图字体实现方法，其特征在于，包括：
获取包括多个字符的源图，并获得包括所述源图中各个字符的源纹理区域数据的配置文件，所述源纹理区域数据包括各个字符在所述源图中的位置和尺寸信息；
根据所述配置文件确定待渲染文本对应的源位图文本在目标画布上的缩放比和偏移量，所述源位图文本为由与所述待渲染文本中的待渲染字符对应的所述源图中的字符组成的文本；
根据所述配置文件获得所述待渲染文本中每个待渲染字符的源纹理区域数据；
根据所述缩放比和所述偏移量以及每个待渲染字符的源纹理区域数据确定每个待渲染字符的目标纹理区域数据，所述目标纹理区域数据包括每个待渲染字符在所述目标画布上的位置和尺寸信息；
根据每个待渲染字符的目标纹理区域数据在所述目标画布绘制每个待渲染字符，生成目标位图文本。


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


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


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


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

【专利技术属性】
技术研发人员：唐谢军，
申请(专利权)人：北京京东尚科信息技术有限公司，北京京东世纪贸易有限公司，
类型：发明
国别省市：北京;11