CN113392268A - 一种特效文本渲染方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请提供了一种特效文本渲染方法、装置、电子设备及存储介质，该方法包括：首先，获取特效文本的内容信息及特征信息；然后，根据内容信息及特征信息，生成特效文本的轮廓信息；进而，根据轮廓信息，绘制特效文本的图像，以实现对特效文本的渲染。这样，根据不同的特效文本的内容信息及特征信息，可以动态生成特效文本，而且安装包的容量也不会很大，从而可以提升用户体验。

Description

一种特效文本渲染方法、装置、电子设备及存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及一种特效文本渲染方法、装置、 电子设备及存储介质。

背景技术

UI即User Interface(用户界面)，是指对软件的人机交互、操作逻辑、界 面美观的整体设计，UI可以充分体现软件的定位和特点。优秀的UI效果 能够让软件更加生动，用户对软件的使用体验也能够得到提升，从而提升软 件的市场竞争力。

文字特效作为目前比较流行的UI效果，普遍用于短视频或直播类软件 中，例如，可以将镂空效果的文字作为视频分类标签，显示在视频播放图层 上方，使得视频分类标签与视频尽可能融为一体，并不显得突兀。

目前，对文字进行特效渲染的方法通常是：预先设计好带文字特效的 PNG(Portable Network Graphics，便携式网络图形)图片，并将图片传送至 客户端，客户端直接展示预先设计好的图片，也就展示出了带有特效的文字。 但是，这种方法不能动态修改特效文字的内容和背景色，而且，还会增大软 件的包体积，导致用户体验较差。

发明内容

为解决上述技术问题，本申请示出了一种特效文本渲染方法、装置、电 子设备及存储介质。

第一方面，本申请示出了一种特效文本渲染方法，所述方法包括：

获取特效文本的内容信息及特征信息；

根据所述内容信息及所述特征信息，生成所述特效文本的轮廓信息；

根据所述轮廓信息，绘制所述特效文本的图像，以实现对所述特效文本 的渲染。

第二方面，本申请示出了一种特效文本渲染装置，所述装置包括：

获取模块，用于获取特效文本的内容信息及特征信息；

生成模块，用于根据所述内容信息及所述特征信息，生成所述特效文本 的轮廓信息；

绘制模块，用于根据所述轮廓信息，绘制所述特效文本的图像，以实现 对所述特效文本的渲染。

第三方面，本申请示出了一种电子设备，所述电子设备包括存储器、处 理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行 所述程序时实现如上述任一项所述的特效文本渲染方法的步骤。

第四方面，本申请示出了一种计算机可读存储介质，所述计算机可读存 储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述任一 项所述的特效文本渲染方法的步骤。

与现有技术相比，本申请包括以下优点：

在本申请中，首先，获取特效文本的内容信息及特征信息；然后，根据 内容信息及特征信息，生成特效文本的轮廓信息；进而，根据轮廓信息，绘 制特效文本的图像，以实现对特效文本的渲染。

这样，根据不同的特效文本的内容信息及特征信息，可以动态生成特效 文本，而且安装包的容量也不会很大，从而可以提升用户体验。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本 领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的， 而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示 相同的部件。在附图中：

图1是本申请的一种特效文本渲染方法的步骤流程图；

图2是本申请的另一种特效文本渲染方法的步骤流程图；

图3是本申请的一种特效文本渲染装置的结构框图；

图4是本申请的一种电子设备的结构框图。

具体实施方式

下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示 了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不 应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地 理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。

下面将通过具体的实施例，对本发明实施例提供的特效文本渲染方法进 行详细描述。

参照图1，示出了本申请的一种特效文本渲染方法的步骤流程图，该方 法具体可以包括如下步骤：

S101：获取特效文本的内容信息及特征信息。

其中，内容信息即为特效文本的文本内容，包括文字、符号或标点等， 特征信息即为特效文本的特征，如文本颜色、尺寸等等。特效文本的内容信 息及特征信息可以通过软件与用户之间的交互获得，也就是说，用户可以根 据需求输入相应的文本，并对想要的文本特效进行设置。

一种实现方式中，在获取特效文本的内容信息及特征信息之后，可以根 据特效文本的内容信息及特征信息，查询是否存储该特效文本的缓存图像； 若存储，则可以获取并绘制特效文本的图像，以实现对特效文本的渲染；若 未存储，则执行根据内容信息及特征信息，生成特效文本的轮廓信息的步骤。

这样，对于相同内容信息及特征信息的特效文本，可以直接查询获取缓 存图像，而不需要重复进行对应的图像的生成步骤，从而减少***资源的占 用。

其中，特效文本的缓存图像可以存储在缓存或对应的数据库中，数据库 可以是当前设备内部的数据库，也可以是网络中的第三方数据库，具体不作 限定。

举例而言，在缓存或对应的数据库中，特效文本的图像可以以16进制 表达形式进行命名，命名规则可以包括内容信息及特征信息中输入参数文本 内容、字体大小、字重和非镂空区域背景色等信息，每个内容信息及特征信 息对应唯一的文件名，这样，在获取特效文本的内容信息及特征信息之后， 可以在缓存或对应的数据库的目录下查找文件命名相同的图片文件。

S102：根据内容信息及特征信息，生成特效文本的轮廓信息。

一种实现方式中，根据内容信息及特征信息，生成特效文本的轮廓信息 的步骤，可以包括：

根据内容信息及特征信息，生成特效文本的富文本对象，其中，富文本 对象可以理解为用于描述需要在设备上显示的文字信息，包括字体大小、字 体颜色、行高、行间距等信息。

然后，根据富文本对象，确定多个行排版数据对象数组，遍历多个行排 版数据对象数组，获得每个字的排版数据和字体数据，并生成该字的渲染数 据，其中，行排版对象可以理解为用于描述文字布局的信息，包括每行的显 示位置、每行包括哪些字，每个字的显示位置等信息，通过函数调用，可以 根据富文本对象获得行排版对象数组。

进而，对每个字的渲染数据进行封装，得到特效文本的轮廓信息，其中， 对每个字的渲染数据进行封装，是将渲染数据从底层API到上层API的转 换，其中还包括坐标系转换，这样，方便上层API后续对渲染数据的调用。

举例而言，根据内容信息及特征信息，生成特效文本的富文本对象，具 体可以为使用NSAttributedString初始化方法，根据参数文本内容(NSString)、 文本字体大小和字重信息(UIFont)参数生成富文本对象。

然后，根据富文本对象，确定多个行排版数据对象数组，遍历多个行排 版数据对象数组，获得每个字的排版数据和字体数据，生成该字的渲染数据， 比如，可以利用CTLineCreateWithAttributedString方法生成富文本对象对应 的所有行排版数据对象数组，遍历所有行排版数据对象数组获得每一行的排 版数据(CTLineRef)，遍历行排版对象获得每行每个字形排版数据 (CGGlyph)和字体数据(CTFontRef)，利用CTFontCreatePathForGlyph方 法生成具体每个字形的渲染数据(CGPathRef)，将所有字形的渲染数据保 存在CGMutablePathRef对象中。

进而，对每个字的渲染数据进行封装，得到特效文本的轮廓信息，具体 可以为使用UIBezierPath初始化方法，将文本的渲染数据集合 CGMutablePathRef转化成UIBezierPath对象，也就是轮廓信息。因为Core Text的坐标系为自然坐标系，即左下角为坐标原点，而UIKits的坐标原点 在左上角，所以，转成UIBezierPath后需要坐标系转换操作。

S103：根据轮廓信息，绘制特效文本的图像，以实现对特效文本的渲染。

一种实现方式中，根据轮廓信息，绘制特效文本的图像的步骤，可以包 括：创建画板；将预先获取的背景的轮廓信息及特效文本的轮廓信息添加至 画板中；对画板中背景对应区域及所述特效文本对应区域进行颜色填充，得 到特效文本的图像。其中，可以将特效文本的图像作为待绘制的位图，那么， 画板也就是位图的上下文，在位图中包括背景对应区域和特效文本对应区 域，预先获取的背景的轮廓信息可以包括背景的像素尺寸和背景色。

在本步骤中，对画板中背景对应区域及所述特效文本对应区域进行颜色 填充的方式，可以采用奇偶填充规则，根据背景的轮廓信息及特效文本的轮 廓信息，将背景及所述特效文本对应区域划分为路径内部区域及路径外部区 域；然后，对画板中路径内部区域进行颜色填充，得到特效文本的图像。

另外，在进行颜色填充时，可以仅对画板中路径内部区域进行颜色填充， 路径外部区域则不填充颜色，从而得到镂空效果的特效文本的图像；或者， 也可以设置两种不同的颜色，分别对路径内部区域及路径外部区域进行填 充；或者，还可以设置两种不同的透明度，采用同一种颜色分别为路径内部 区域及路径外部区域进行填充，具体不作限定。

其中，奇偶填充规则即为，在画板中任意找一个点，然后以这个点为起 点，发射一条无限长的射线，起始值为0，射线会和背景或特效文本的轮廓 相交，每交叉一条轮廓，计数就加1，最终计数如果是奇数，则认为当前区 域是路径内部区域，需要填充颜色；如果是偶数，则认为当前区域是路径外 部区域，不需要填充颜色，这样，可以实现特效文本的镂空效果。

举例而言，使用UIGraphicsBeginImageContextWithOptions创建一个位 图的上下文(CGContextRef)，然后，将预先获取的背景的轮廓信息及特效 文本的轮廓信息UIBezierPath添加到位图上下文，进而，将背景对应区域及 特效文本对应区域作为位图，使用CGContextEOFillPath对位图进行颜色填 充，比如，可以使用CGContextSetFillColorWithColor设置非镂空背景色，其 中，CGContextEOFillPath的填充规则为奇偶填充规则，这样可以得到镂空 效果的位图，然后，使用UIGraphicsGetImageFromCurrentImageContext方法 生成位图对象。

一种实现方式中，在根据轮廓信息，绘制特效文本的图像之后，可以将 特效文本的图像、内容信息及特征信息对应存储，作为特效文本的缓存图像。 这样，便于查找缓存的图像，减少对计算资源的浪费。

由以上可见，本申请根据不同的特效文本的内容信息及特征信息，可以 动态生成特效文本，而且安装包的容量也不会很大，从而可以提升用户体验。

参照图2，示出了本申请的另一种特效文本渲染方法的步骤流程图，该 方法具体可以包括如下步骤：

S201：获取特效文本的内容信息及特征信息。

其中，内容信息即为特效文本的文本内容，包括文字、符号或标点等， 特征信息即为特效文本的特征，如文本颜色、尺寸等等。特效文本的内容信 息及特征信息可以通过软件与用户之间的交互获得，也就是说，用户可以根 据需求输入相应的文本，并对想要的文本特效进行设置。

一种实现方式中，在获取特效文本的内容信息及特征信息之后，可以根 据特效文本的内容信息及特征信息，查询是否存储该特效文本的缓存图像； 若存储，则可以获取并绘制特效文本的图像，以实现对特效文本的渲染；若 未存储，则执行根据内容信息及特征信息，生成特效文本的轮廓信息的步骤。

这样，对于相同内容信息及特征信息的特效文本，可以直接查询获取缓 存图像，而不需要重复进行对应的图像的生成步骤，从而减少***资源的占 用。

S202：根据内容信息及特征信息，生成特效文本的富文本对象。

其中，富文本对象可以理解为用于描述需要在设备上显示的文字信息， 包括字体大小、字体颜色、行高、行间距等信息。

举例而言，根据内容信息及特征信息，生成特效文本的富文本对象，具 体可以为使用NSAttributedString初始化方法，根据参数文本内容(NSString)、 文本字体大小和字重信息(UIFont)参数生成富文本对象。

S203：根据富文本对象，确定多个行排版数据对象数组，遍历多个行排 版数据对象数组，获得每个字的排版数据和字体数据，并生成该字的渲染数 据。

其中，行排版对象可以理解为用于描述文字布局的信息，包括每行的显 示位置、每行包括哪些字，每个字的显示位置等信息，通过函数调用，可以 根据富文本对象获得行排版对象数组。

根据富文本对象，确定多个行排版数据对象数组，遍历多个行排版数据 对象数组，获得每个字的排版数据和字体数据，生成该字的渲染数据，比如， 可以利用CTLineCreateWithAttributedString方法生成富文本对象对应的所有 行排版数据对象数组，遍历所有行排版数据对象数组获得每一行的排版数据 (CTLineRef)，遍历行排版对象获得每行每个字形排版数据(CGGlyph) 和字体数据(CTFontRef)，利用CTFontCreatePathForGlyph方法生成具体每 个字形的渲染数据(CGPathRef)，将所有字形的渲染数据保存在CGMutablePathRef对象中。

S204：对每个字的渲染数据进行封装，得到特效文本的轮廓信息。

其中，对每个字的渲染数据进行封装，是将渲染数据从底层API到上 层API的转换，其中还包括坐标系转换，这样，方便上层API后续对渲染 数据的调用。

举例而言，可以使用UIBezierPath初始化方法，将文本的渲染数据集合CGMutablePathRef转化成UIBezierPath对象，也就是轮廓信息。因为Core Text的坐标系为自然坐标系，即左下角为坐标原点，而UIKits的坐标原点 在左上角，所以，转成UIBezierPath后需要坐标系转换操作。

S205：创建画板，将预先获取的背景的轮廓信息及特效文本的轮廓信息 添加至画板中。

其中，可以将特效文本的图像作为待绘制的位图，那么，画板也就是位 图的上下文，在位图中包括背景对应区域和特效文本对应区域，预先获取的 背景的轮廓信息可以包括背景的像素尺寸和背景色。

S206：根据背景的轮廓信息及特效文本的轮廓信息，将背景及所述特效 文本对应区域划分为路径内部区域及路径外部区域；对画板中路径内部区域 进行颜色填充，得到特效文本的图像。

举例而言，使用UIGraphicsBeginImageContextWithOptions创建一个位 图的上下文(CGContextRef)，然后，将预先获取的背景的轮廓信息及特效 文本的轮廓信息UIBezierPath添加到位图上下文，进而，将背景对应区域及 特效文本对应区域作为位图。

其中，奇偶填充规则即为，在画板中任意找一个点，然后以这个点为起 点，发射一条无限长的射线，起始值为0，射线会和背景或特效文本的轮廓 相交，每交叉一条轮廓，计数就加1，最终计数如果是奇数，则认为当前区 域是路径内部区域，需要填充颜色；如果是偶数，则认为当前区域是路径外 部区域，不需要填充颜色，这样，可以实现特效文本的镂空效果。

比如，可以使用CGContextSetFillColorWithColor设置非镂空背景色，其 中，CGContextEOFillPath的填充规则为奇偶填充规则，这样可以得到镂空 效果的位图，然后，使用UIGraphicsGetImageFromCurrentImageContext方法 生成位图对象。

一种实现方式中，在根据轮廓信息，绘制特效文本的图像之后，可以将 特效文本的图像、内容信息及特征信息对应存储，作为特效文本的缓存图像。 这样，便于查找缓存的图像，减少对计算资源的浪费。

由以上可见，本申请根据不同的特效文本的内容信息及特征信息，可以 动态生成特效文本，而且安装包的容量也不会很大，从而可以提升用户体验。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系 列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作 顺序的限制，因为依据本申请，某些步骤可以采用其他顺序或者同时进行。 其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于可选实 施例，所涉及的动作并不一定是本申请所必须的。

参照图3，示出了本申请的一种特效文本渲染装置的结构框图，该装置 具体可以包括如下模块：

获取模块301，用于获取特效文本的内容信息及特征信息；

生成模块302，用于根据内容信息及特征信息，生成特效文本的轮廓信 息；

绘制模块303，用于根据轮廓信息，绘制特效文本的图像，以实现对特 效文本的渲染。

一种实现方式中，生成模块302，具体用于：

根据内容信息及特征信息，生成特效文本的富文本对象；

获取富文本对象对应的多个行排版数据对象数组，遍历多个行排版数据 对象数组，获得每个字的排版数据和字体数据，并生成该字的渲染路径；

将每个字的渲染路径转化为特效文本的轮廓信息。

一种实现方式中，绘制模块303，具体用于：

创建位图的上下文；

将特效文本的背景区域的轮廓信息及特效文本的轮廓信息添加至位图 的上下文中；

对位图进行颜色填充，得到特效文本的图像。

一种实现方式中，该装置还包括：

查询模块，用于根据内容信息及特征信息，查询是否存储特效文本的缓 存图像；若存储，则绘制特效文本的图像，以实现对特效文本的渲染；若未 存储，则执行根据内容信息及特征信息，生成特效文本的轮廓信息的步骤。

一种实现方式中，该装置还包括：

存储模块，用于将特效文本的图像、内容信息及特征信息对应存储，作 为特效文本的缓存图像。

由以上可见，本申请根据不同的特效文本的内容信息及特征信息，可以 动态生成特效文本，而且安装包的容量也不会很大，从而可以提升用户体验。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较 简单，相关之处参见方法实施例的部分说明即可。

本发明实施例提供的特效文本渲染装置具备执行特效文本渲染方法相 应的功能模块，可执行本发明实施例所提供的特效文本渲染方法，且能达到 相同的有益效果。

在本发明提供的又一实施例中，还提供了一种电子设备，电子设备可以 包括：处理器、存储器以及存储在所述存储器上并可在所述处理器上运行的 计算机程序，所述处理器执行所述程序时实现上述特效文本渲染方法实施例 的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。示例 的，如图4所示，该电子设备具体可以包括：处理器401、存储装置402、 具有触摸功能的显示屏403、输入装置404、输出装置405以及通信装置406。 该电子设备中处理器401的数量可以是一个或者多个，图4中以一个处理器 401为例。该电子设备的处理器401、存储装置402、显示屏403、输入装置 404、输出装置405以及通信装置406可以通过总线或者其他方式连接。

在本发明提供的又一实施例中，还提供了一种计算机可读存储介质，该 计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执 行上述实施例中任一所述的特效文本渲染方法。

在本发明提供的又一实施例中，还提供了一种包含指令的计算机程序产 品，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的特效 文本渲染方法。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来 将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示 这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、 “包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列 要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确 列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的 要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

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

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范 围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均 包含在本发明的保护范围内。

Claims (9)

1.一种特效文本渲染方法，其特征在于，所述方法包括：

获取特效文本的内容信息及特征信息；

根据所述内容信息及所述特征信息，生成所述特效文本的轮廓信息；

根据所述轮廓信息，绘制所述特效文本的图像，以实现对所述特效文本的渲染。

2.根据权利要求1所述的方法，其特征在于，所述根据所述内容信息及所述特征信息，生成所述特效文本的轮廓信息，包括：

根据所述内容信息及所述特征信息，生成所述特效文本的富文本对象；

根据所述富文本对象，确定多个行排版数据对象数组；

遍历所述多个行排版数据对象数组，获得每个字的排版数据和字体数据，并生成该字的渲染数据；

对每个字的渲染数据进行封装，得到所述特效文本的轮廓信息。

3.根据权利要求1所述的方法，其特征在于，所述根据所述轮廓信息，绘制所述特效文本的图像，包括：

创建画板；

将预先获取的背景的轮廓信息及所述特效文本的轮廓信息添加至所述画板中；

对所述画板中背景对应区域及所述特效文本对应区域进行颜色填充，得到所述特效文本的图像。

4.根据权利要求3所述的方法，其特征在于，所述对所述画板中背景对应区域及所述特效文本对应区域进行颜色填充，得到所述特效文本的图像，包括：

采用奇偶填充规则，根据所述背景的轮廓信息及所述特效文本的轮廓信息，将所述背景及所述特效文本对应区域划分为路径内部区域及路径外部区域；

对所述画板中路径内部区域进行颜色填充，得到所述特效文本的图像。

5.根据权利要求1所述的方法，其特征在于，在所述获取特效文本的内容信息及特征信息之后，所述方法还包括：

根据所述内容信息及所述特征信息，查询是否存储所述特效文本的缓存图像；

若存储，则绘制所述特效文本的图像，以实现对所述特效文本的渲染；

若未存储，则执行所述根据所述内容信息及所述特征信息，生成所述特效文本的轮廓信息的步骤。

6.根据权利要求5所述的方法，其特征在于，在所述根据所述轮廓信息，绘制所述特效文本的图像之后，所述方法还包括：

将所述特效文本的图像、内容信息及特征信息对应存储，作为所述特效文本的缓存图像。

7.一种特效文本渲染装置，其特征在于，所述装置包括：

获取模块，用于获取特效文本的内容信息及特征信息；

生成模块，用于根据所述内容信息及所述特征信息，生成所述特效文本的轮廓信息；

绘制模块，用于根据所述轮廓信息，绘制所述特效文本的图像，以实现对所述特效文本的渲染。

8.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至6中任一项所述的特效文本渲染方法的步骤。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至6中任一项所述的特效文本渲染方法的步骤。

Images