CN115712427A - 一种矩形控件渲染方法、装置、电子设备和存储介质 - Google Patents

Abstract

本发明实施例公开了一种矩形控件渲染方法、装置、电子设备和存储介质；本发明实施例可以获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，矩形遮罩图用于为矩形控件添加特效，根据第二UV坐标和第一UV坐标，对矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同，基于变换后的第一UV坐标重新渲染矩形遮罩图，得到新的矩形遮罩图，根据新的矩形遮罩图以及待渲染矩形控件的控件贴图，渲染待渲染矩形控件；本发明实施例可以无需针对每个矩形控件都制作一张遮罩图，降低了应用程序制作过程中的美术成本，减少应用程序的数据量。

Description

一种矩形控件渲染方法、装置、电子设备和存储介质

技术领域

本发明涉及渲染技术领域，具体涉及一种矩形控件渲染方法、装置、电子设备和存储介质。

背景技术

人们在日常生活中常常会使用各类应用程序进行购物、游戏、资讯浏览等。一般的，用户通过触发应用程序上的控件来使用应用程序提供的功能。为了改善用户的使用体验和视觉体验，可以在控件上添加特效以提示用户触发该控件或者提示用户已触发该控件等等。

目前，要实现在控件上添加特效，需要设计可以实现特效效果的遮罩图，但是由于不同控件的大小可能不同，每个尺寸的控件都需要设置一张遮罩图。因此，这种方案会导致美术制作成本增高，同时也会增大应用程序的数据量，占用更多的存储资源。

发明内容

本发明实施例提供一种矩形控件渲染方法、装置、电子设备和存储介质，可以无需针对每个矩形控件都制作一张遮罩图，降低了应用程序制作过程中的美术成本，减少应用程序的数据量。

本发明实施例提供一种矩形控件渲染方法，包括：

获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，所述矩形遮罩图用于为矩形控件添加特效；

根据所述第二UV坐标和所述第一UV坐标，对所述矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得所述变换后的第一UV坐标构成的新的矩形遮罩图尺寸与所述待渲染矩形控件尺寸相同；

基于所述变换后的第一UV坐标重新渲染所述矩形遮罩图，得到新的矩形遮罩图；

根据所述新的矩形遮罩图以及所述待渲染矩形控件的控件贴图，渲染所述待渲染矩形控件。

相应的，本发明实施例还提供一种矩形控件渲染装置，包括：

坐标获取单元，用于获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，所述矩形遮罩图用于为矩形控件添加特效；

伸缩变换单元，用于根据所述第二UV坐标和所述第一UV坐标，对所述矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得所述变换后的第一UV坐标构成的新的矩形遮罩图尺寸与所述待渲染矩形控件尺寸相同；

遮罩图渲染单元，用于基于所述变换后的第一UV坐标重新渲染所述矩形遮罩图，得到新的矩形遮罩图；

控件渲染单元，用于根据所述新的矩形遮罩图以及所述待渲染矩形控件的控件贴图，渲染所述待渲染矩形控件。

相应的，本发明实施例还提供一种电子设备，包括存储器和处理器；所述存储器存储有应用程序，所述处理器用于运行所述存储器内的应用程序，以执行本发明实施例所提供的任一种矩形控件渲染方法中的步骤。

相应的，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有多条指令，所述指令适于处理器进行加载，以执行本发明实施例所提供的任一种矩形控件渲染方法中的步骤。

此外，本发明实施例还提供一种计算机程序产品，包括计算机程序或指令，所述计算机程序或指令被处理器执行时实现本发明实施例所提供的任一种矩形控件渲染方法中的步骤。

采用本发明实施例的方案，可以获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，该矩形遮罩图用于为矩形控件添加特效，根据该第二UV坐标和该第一UV坐标，对该矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得该变换后的第一UV坐标构成的新的矩形遮罩图尺寸与该待渲染矩形控件尺寸相同，基于该变换后的第一UV坐标重新渲染该矩形遮罩图，得到新的矩形遮罩图，根据该新的矩形遮罩图以及该待渲染矩形控件的控件贴图，渲染该待渲染矩形控件；由于在本发明实施例中，对矩形遮罩图的UV坐标进行伸缩变换，使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同，因此，在对若干个待渲染矩形控件进行渲染时，可以无需针对每个待渲染矩形控件都制作一张遮罩图，降低了应用程序制作过程中的美术成本，减少应用程序的数据量。

附图说明

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

图1是本发明实施例提供的矩形控件渲染方法的场景示意图；

图2是本发明实施例提供的矩形控件渲染方法的流程图；

图3是本发明实施例提供的矩形遮罩图的示意图；

图4是本发明实施例提供的对矩形遮罩图进行分割的示意图；

图5是本发明实施例提供的对矩形遮罩图中的像素点进行伸缩变换的示意图；

图6是本发明实施例提供的矩形控件渲染方法的另一流程图；

图7是本发明实施例提供的矩形控件渲染装置的结构示意图；

图8是本发明实施例提供的矩形控件渲染装置的另一结构示意图；

图9是本发明实施例提供的电子设备的结构示意图。

具体实施方式

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

本发明实施例提供一种矩形控件渲染方法、装置、电子设备和计算机可读存储介质。具体地，本发明实施例提供适用于矩形控件渲染装置的矩形控件渲染方法，该矩形控件渲染装置可以集成在电子设备中。

该电子设备可以为终端等设备，包括但不限于移动终端和固定终端，例如移动终端包括但不限于智能手机、智能手表、平板电脑、笔记本电脑、智能车载等，其中，固定终端包括但不限于台式电脑、智能电视等。

该电子设备还可以为服务器等设备，该服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN(ContentDelivery Network，内容分发网络)、以及大数据和人工智能平台等基础云计算服务的云服务器，但并不局限于此。

本发明实施例的矩形控件渲染方法，可以由服务器实现，也可以由终端和服务器共同实现。

下面以终端和服务器共同实现该矩形控件渲染方法为例，对该方法进行说明。

如图1所示，本发明实施例提供的矩形控件渲染系统包括终端10和服务器20等；终端10与服务器20之间通过网络连接，比如，通过有线或无线网络连接等。

其中，终端10可以用于获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，矩形遮罩图用于为矩形控件添加特效，根据第二UV坐标和第一UV坐标，对矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同，基于变换后的第一UV坐标重新渲染矩形遮罩图，得到新的矩形遮罩图，根据新的矩形遮罩图以及待渲染矩形控件的控件贴图，渲染待渲染矩形控件。

服务器20可以存储有矩形遮罩图以及待渲染矩形控件的控件贴图等。

可以理解的是，在一些实施例中，终端10执行的矩形控件渲染的步骤也可以由服务器20执行，本发明实施例对此不做限定。

以下分别进行详细说明。需要说明的是，以下实施例的描述顺序不作为对实施例优选顺序的限定。

本发明实施例将从矩形控件渲染装置的角度进行描述，该矩形控件渲染装置具体可以集成在服务器或终端中。

如图2所示，本实施例的矩形控件渲染方法的具体流程可以如下：

201、获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，矩形遮罩图用于为矩形控件添加特效。

其中，矩形遮罩图可以如图3所述。在本发明实施例中，可以通过一张矩形遮罩图为若干个尺寸存在不同的矩形控件添加某种特效效果。

比如，通过如图3所示的矩形遮罩图，可以为若干个尺寸存在差异的待渲染矩形控件添加光晕或者流光特效。

其中，第一UV坐标用于将矩形遮罩图的图像文件映射为二维的平面。第二UV坐标用于在渲染待渲染矩形控件时，将待渲染矩形控件的控件贴图文件渲染为二维的平面。一般的，当使用图形渲染程序(例如OpenGL等)使用图像文件进行贴图时，图形渲染程序会定义UV纹理贴图坐标。

以为矩形控件实现环绕该矩形控件的流光效果(环绕流光效果)为例，相关技术中，在处理不同的大小不一的矩形控件的环绕流光效果时，需要对应矩形控件的大小遮罩图，去记录各个矩形控件对应的位置与范围大小。这样就会导致每需要制作一个此类型的矩形控件的环绕流光效果，就要增加一张遮罩图去记录矩形控件的流光范围与位置信息，造成美术制作成本增高与游戏整体包体增大。

而通过本发明实施例的矩形控件渲染方法，只需要一个遮罩图就可以实现各种矩形控件的环绕流光效果，同时提供可供美术人员设置的参数，以调节不同大小矩形控件的环绕流光，同时可以调节环绕流光的流光速度、流光长短、流光强弱与颜色。

通过本发明实施例的矩形控件渲染方法，一方面可以减少美术需要为了匹配不同大小的矩形按钮环绕流光而制作各种大小不一的遮罩图所耗费的人力资源，在另一方面也减少了游戏工程中的数据量与渲染过程中的信息加载量，减轻了游戏包体。

此外，由于相关技术的渲染过程中，存在多个不同大小矩形控件的遮罩贴图以纪录的不同矩形控件的流光分布区域，就带来了多张贴图的额外加载与读取过程，增加了渲染功耗。通过本发明实施例的矩形控件渲染方法也可以减少渲染过程中的显存占用，从而减少了渲染过程中的设备发热。

202、根据第二UV坐标和第一UV坐标，对矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同。

一张贴图的UV坐标可以包含贴图中每个像素的UV坐标，U和V坐标的数值范围都是0到1，左下角为坐标原点(0，0)，右上角为坐标(1.0，1.0)，着色器采样计算时逐像素读取UV坐标数据。

在一些可选的实施例中，可以根据矩形遮罩图中每个像素点的位置，以及待渲染矩形控件的位置，确定是否需要对像素点进行伸缩，也就是说，步骤202具体可以包括：

根据第二UV坐标，确定待渲染矩形控件对应的边界UV坐标；

将第一UV坐标中各像素点的UV坐标与边界UV坐标进行比较，得到各像素点与待渲染矩形控件之间的位置关系；

基于各像素点对应的位置关系，对各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标。

比如，如果某个像素点的位置关系为该像素点位于待渲染矩形控件的显示区域中，此时可以不对该像素点进行伸缩变换；如果某个像素点的位置关系为该像素点位于待渲染矩形控件的显示区域外，此时可以对该像素点进行伸缩变换，以使得该像素点位于待渲染矩形控件的显示区域内。

可以理解的是，对于像素点的伸缩变换可以是只对像素点的U坐标或者V坐标进行变换，也可以是对像素点的U坐标和V坐标均进行变换。

在一些可选的实施例中，具体在对像素点进行伸缩变换时，可以根据矩形遮罩图与待渲染矩形控件之间U坐标和V坐标的关系，确定要对矩形遮罩图中像素点的U坐标和/或V坐标进行变换。比如，边界UV坐标包括第一边界U坐标、第二边界U坐标、第一边界V坐标和第二边界V坐标，各像素点的UV坐标包括各像素点的U坐标和V坐标。

此时，步骤“将第一UV坐标中各像素点的UV坐标与边界UV坐标进行比较，得到各像素点与待渲染矩形控件之间的位置关系”，具体可以包括：

将第一UV坐标中各像素点的U坐标与第一边界U坐标和第二边界U坐标中的至少一个进行比较，得到各像素点与待渲染矩形控件之间的水平位置关系；

将各像素点的V坐标与第一边界V坐标和第二边界V坐标中的至少一个进行比较，得到各像素点与待渲染矩形控件之间的垂直位置关系。

其中，第一边界U坐标和第二边界U坐标可以分别为待渲染矩形控件的左边界或右边界对应的U值。第一边界V坐标和第二边界V坐标可以分别为待渲染矩形控件的上边界或下边界对应的V值。

可以理解的是，根据第一边界U坐标、第二边界U坐标、第一边界V坐标和第二边界V坐标，可以确定出待渲染矩形控件的控件区域。

例如，如图4所示，可以定义变量LineX1、LineX2、LineY1、LineY2作为横纵方向分割值。比如，LineX1为第一边界U坐标，LineX2为第二边界U坐标，LineY1为第一边界V坐标，LineY2为第二边界V坐标。

进一步的，可以将第一UV坐标中各像素点的U坐标分别与LineX1、LineX2相比较，第一UV坐标中各像素点的V坐标分别与LineY1、LineY2相比较，从而把矩形遮罩图用4条线分割成为9部分。

相应的，步骤“基于各像素点对应的位置关系，对各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标”，具体可以包括：

基于各像素点对应的水平位置关系，对各像素点的U坐标进行水平方向的伸缩变换，以及，基于各像素点对应的垂直位置关系，对各像素点的V坐标进行垂直方向的伸缩变换，得到变换后的第一UV坐标。

具体的，水平位置关系可以是像素点的U坐标与LineX1和LineX2之间的大小关系，或者说，可以是像素点与直线U＝LineX1和直线U＝LineX2之间的位置关系。比如，像素点位于直线U＝LineX1的左侧或右侧等。

类似的，垂直位置关系可以是像素点的V坐标与LineV1和LineV2之间的大小关系，或者说，可以是像素点与直线V＝LineV1和直线V＝LineV2之间的位置关系。比如，像素点位于直线V＝LineV1的上侧或下侧等。

通过观察图4可以发现，分割后的图像中，区域5是最规则的形状(矩形，与待渲染矩形控件的边界没有公共边)，其次是区域2、4、6、8(矩形，但是与待渲染矩形控件的边界有一条公共边)，最后是四个区域1、3、7、9与待渲染矩形控件的边界有两条公共边。

在一些实施例中，可以制定一定的纹理拉伸规则，以图4为例进行说明：

(1)保证区域1、3、7、9不做任何拉伸。

(2)与待渲染矩形控件的边界有一条公共边的四个矩形区域2、4、6、8做单向拉伸，即保证与待渲染矩形控件的边界的公共边不拉伸，例如区域2和8中的像素点只进行横向拉伸，区域4和6中的像素点只进行纵向拉伸。

(3)中间部分5做双向拉伸，即横向、纵向同时拉伸。

可选的，LineX1、LineX2、LineY1、LineY2为自定义变量，数值上可自定义为0到1范围内的小数，如LineX1、LineX2、LineY1、LineY2分别赋值0.2，0.8，0.2，0.8。

也就是说，在本发明实施例中，可以逐像素地对矩形遮罩图上每个像素的U坐标分别与LineX1、LineX2进行比较，逐像素对矩形遮罩图上每个像素的V坐标分别与LineY1、LineY2进行比较，从而在数值上区分出九个部分。

以U坐标比较为例，具体的计算方式可以如下代码所示：

首先，可以将第一UV坐标中各像素点的U坐标与第一边界U坐标和第二边界U坐标进行比较：

float sxl＝step(LineX_1,uv.x)；

float sxr＝step(LineX_2,uv.x)；

其中，uv.x为第一UV坐标中一进行判断的像素点的U坐标。通过step函数，可以比较uv.x与LineX_1以及uv.x与LineX_2之间的大小关系。比如，如果uv.x小于LineX_1，则sxl可以为0。

进一步的，可以基于比较结果，对第一UV坐标中各像素点的U坐标进行拉伸计算：

float lx＝uv.x*屏幕缩放值*(1-sxl)+sxl*max(LineX1,uv.x)；

float rx＝(uv.x*屏幕缩放值-(屏幕缩放值-1))*(sxr)+(1-sxr)*min(LineX2,uv.x)；

具体的，屏幕缩放值可以由技术人员根据实际需求进行设置。通过缩放处理，可以将U坐标小于LineX1的像素点的U坐标放缩为LineX1或者lx，将U坐标大于LineX2的像素点的U坐标放缩为LineX2或者rx。

对于像素点的V坐标的变换原理与U坐标的变换类似，本发明实施例在此不再赘述。

例如，矩形遮罩图可以如图5所示进行缩放。以图5中右侧图形为拉伸后的矩形遮罩图为例，可以发现区域1、3、7、9未发生拉伸，区域4和6发生了纵向拉伸，区域2和区域8发生了横向缩小，区域5发生了纵向拉伸和横向缩小。

203、基于变换后的第一UV坐标重新渲染矩形遮罩图，得到新的矩形遮罩图。

可以理解的是，变换后的第一UV坐标所构成的矩形遮罩图，与原始的矩形遮罩图的尺寸可能是不同的。因此，需要根据变换后的第一UV坐标从原始的矩形遮罩图中进行纹理采样，以生成新的矩形遮罩图。

因此，在一些可选的实施例中，步骤“基于变换后的第一UV坐标重新渲染矩形遮罩图，得到新的矩形遮罩图”，具体可以包括：

基于变换后的第一UV坐标，对矩形遮罩图的纹理进行采样，得到变换后的第一UV坐标中每个像素点的纹理采样结果；

根据纹理采样结果，生成新的矩形遮罩图。

比如，对矩形遮罩图的纹理进行采样时，可以基于对应像素点位置距离最近的四个点的像素值计算出该像素点对应的像素值即纹理采样结果。

例如，可以通过如下的代码实现根据拉伸后得到的UV(即变换后的第一UV坐标)进行贴图采样：

float3 temp3＝(Texture2DSample(Tex,TexSampler,((UV)-((缩放值*float2(0.5,0.5))-float2(0.5,0.5)))).a*clamp1)。

在本发明实施例中，可以通过如图3所示的矩形遮罩图，实现为矩形控件添加流光效果。具体的，流光效果为矩形控件的边缘仿佛存在一组像素点沿着边缘在流动。

具体要实现流光效果，需要控制遮罩图中各像素点的像素值进行变化，以实现仿佛固定有一组像素点在流动的效果。步骤“基于变换后的第一UV坐标，对矩形遮罩图的纹理进行采样，得到变换后的第一UV坐标中每个像素点的纹理采样结果”，具体可以包括：

基于变换后的第一UV坐标，对矩形遮罩图的纹理进行采样，得到变换后的第一UV坐标中每个像素点的初始纹理采样结果；

获取坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数；

从变换后的第一UV坐标中，选择预设位置的像素点的旋转UV坐标；

基于旋转UV坐标、坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数，计算旋转UV坐标中每个像素点的旋转纹理采样结果；

根据初始纹理采样结果和旋转纹理采样结果，确定变换后的第一UV坐标中每个像素点的纹理采样结果。

其中，坐标旋转矩阵可以对当前具有流光效果的像素点的坐标进行三角函数变换，以确定在流光效果下，下一个需要添加流光效果的像素点的位置。

其中，旋转速度控制参数可以用于控制流光效果中像素点“流动”的速度。

可选的，旋转颜色参数为旋转UV坐标对应的像素点的像素值。比如，某个矩形控件的边界具有黄色发光效果，该黄色发光效果可以由如图3所示的矩形遮罩图得到。进一步的，该矩形控件的边界还可以有橙色流光效果，该橙色流光效果，可以通过旋转颜色参数控制颜色、通过坐标旋转矩阵确定在每一时刻参与流光效果的像素点以及通过旋转速度控制参数控制该流光效果在矩形控件的边界的移动速度。

例如，可以利用UV旋转矩阵公式旋转变换后的第一UV坐标中的旋转UV坐标：

float2 rotator＝mul(UV-float2(0.5,0.5),float2x2(cos(1.0*time),-sin(1.0*time),sin(1.0*time),cos(1.0*time)))+float2(0.5,0.5)；

其中，time即为旋转速度控制参数，通过修改time值，可以控制流光效果的流动速度。

进一步的，还可以对流光的强度进行控制，步骤“基于变换后的第一UV坐标，对矩形遮罩图的纹理进行采样，得到变换后的第一UV坐标中每个像素点的纹理采样结果”，具体可以包括：

获取特效强度控制参数；

相应的，步骤“基于所述旋转UV坐标、所述坐标旋转矩阵、所述旋转速度控制参数以及所述旋转颜色参数，计算所述旋转UV坐标中每个像素点的旋转纹理采样结果”，包括：

基于所述旋转UV坐标、所述坐标旋转矩阵、所述旋转速度控制参数、所述旋转颜色参数以及所述特效强度控制参数，计算所述旋转UV坐标中每个像素点的旋转纹理采样结果。

例如，可以利用Clamp函数限制流光强度：

float clamp1＝clamp(smoothstep1,0.0,1.0)；

具体的，流光强度可以认为是流光效果的亮度。通过特效强度控制参数，可以使得不同的矩形控件具有不同亮度的流光效果。

在一些可选的实施例中，为了避免流光效果的边缘走样，比如具有肉眼可见的锯齿效果等，可以进行平滑处理。步骤“基于旋转UV坐标、坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数，计算旋转UV坐标中每个像素点的旋转纹理采样结果”之后，本发明实施例提供的矩形控件渲染方法还可以包括：

获取特效平滑处理参数；

根据特效平滑处理参数，对旋转纹理采样结果进行平滑处理，得到平滑过渡的旋转纹理采样结果。

例如，可以利用SmoothStep函数进行平滑过渡：

float smoothstep1＝smoothstep(宽度,(宽度+模糊值),(0.0+(((rotator/6.28318548202515)*(rotator/6.28318548202515))-0.0)*(4.2-0.0)/(1.0-0.0)))；

其中，宽度以及模糊值即为特效平滑处理参数。

204、根据新的矩形遮罩图以及待渲染矩形控件的控件贴图，渲染待渲染矩形控件。

由上可知，本发明实施例可以获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，矩形遮罩图用于为矩形控件添加特效，根据第二UV坐标和第一UV坐标，对矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同，基于变换后的第一UV坐标重新渲染矩形遮罩图，得到新的矩形遮罩图，根据新的矩形遮罩图以及待渲染矩形控件的控件贴图，渲染待渲染矩形控件；由于在本发明实施例中，对矩形遮罩图的UV坐标进行伸缩变换，使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同，因此，在对若干个待渲染矩形控件进行渲染时，可以无需针对每个待渲染矩形控件都制作一张遮罩图，降低了应用程序制作过程中的美术成本，减少应用程序的数据量。

根据前面实施例所描述的方法，以下将举例作进一步详细说明。

在本实施例中，将以实现矩形控件的流光效果为例，结合图1的系统进行说明。

如图6所示，本实施例的矩形控件渲染方法，具体流程可以如下：

601、获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标。

其中，矩形遮罩图用于为矩形控件添加特效。

602、根据第二UV坐标，确定待渲染矩形控件对应的边界UV坐标，边界UV坐标包括第一边界U坐标、第二边界U坐标、第一边界V坐标和第二边界V坐标。

603、将第一UV坐标中各像素点的U坐标与第一边界U坐标和第二边界U坐标中的至少一个进行比较，得到各像素点与待渲染矩形控件之间的水平位置关系。

604、将各像素点的V坐标与第一边界V坐标和第二边界V坐标中的至少一个进行比较，得到各像素点与待渲染矩形控件之间的垂直位置关系。

例如，如图4所示，自定义变量LineX1、LineX2、LineY1、LineY2作为纹理横纵方向分割值，将第二步得到的UV的横坐标分别与LineX1、LineX2相比较，UV的纵坐标分别与LineY1、LineY2相比较，从而把纹理用4条线分割成9部分。

相应的，步骤“基于各像素点对应的位置关系，对各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标”，具体可以包括：

基于各像素点对应的水平位置关系，对各像素点的U坐标进行水平方向的伸缩变换，以及，基于各像素点对应的垂直位置关系，对各像素点的V坐标进行垂直方向的伸缩变换，得到变换后的第一UV坐标。

通过观察图4可以发现，区域5是最规则的形状(矩形，与待渲染矩形控件的边界没有公共边)，其次是区域2、4、6、8(矩形，但是与待渲染矩形控件的边界有一条公共边)，最后是四个区域1、3、7、9与待渲染矩形控件的边界有两条公共边。

在一些实施例中，可以制定一定的纹理拉伸规则，以图4为例进行说明：

(1)保证区域1、3、7、9不做任何拉伸。

(2)与待渲染矩形控件的边界有一条公共边的四个矩形区域2、4、6、8做单向拉伸，即保证与待渲染矩形控件的边界的公共边不拉伸，例如区域2和8中的像素点只进行横向拉伸，区域4和6中的像素点只进行纵向拉伸。

(3)中间部分5做双向拉伸，即横向、纵向同时拉伸。

605、基于各像素点对应的水平位置关系，对各像素点的U坐标进行水平方向的伸缩变换，以及，基于各像素点对应的垂直位置关系，对各像素点的V坐标进行垂直方向的伸缩变换，得到变换后的第一UV坐标。

606、基于变换后的第一UV坐标，对矩形遮罩图的纹理进行采样，得到变换后的第一UV坐标中每个像素点的初始纹理采样结果。

607、获取坐标旋转矩阵、旋转速度控制参数、特效强度控制参数以及旋转颜色参数。

608、从变换后的第一UV坐标中，选择预设位置的像素点的旋转UV坐标，基于旋转UV坐标、坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数，计算旋转UV坐标中每个像素点的旋转纹理采样结果。

例如，可以利用UV旋转矩阵公式旋转变换后的第一UV坐标中的旋转UV坐标：

float2 rotator＝mul(UV-float2(0.5,0.5),float2x2(cos(1.0*time),-sin(1.0*time),sin(1.0*time),cos(1.0*time)))+float2(0.5,0.5)；

其中，time即为旋转速度控制参数，通过修改time值，可以控制流光效果的流动速度。

609、获取特效平滑处理参数，根据特效平滑处理参数，对旋转纹理采样结果进行平滑处理，得到平滑过渡的旋转纹理采样结果。

具体的，可以通过如下代码对流光特效进行平滑过渡处理：

float smoothstep1＝smoothstep(宽度,(宽度+模糊值),(0.0+(((rotator/6.28318548202515)*(rotator/6.28318548202515))-0.0)*(4.2-0.0)/(1.0-0.0)))；

在一些可选的示例中，还可以通过如下代码限制流光效果的强度：

float clamp1＝clamp(smoothstep1,0.0,1.0)；

610、根据初始纹理采样结果和旋转纹理采样结果，生成新的矩形遮罩图。

可以理解的是，变换后的第一UV坐标构成的新的矩形遮罩图尺寸与所述待渲染矩形控件尺寸相同。

具体的，可以通过如下代码进行贴图采样：

float3 temp3＝(Texture2DSample(Tex,TexSampler,((UV)-((缩放值*float2(0.5,0.5))-float2(0.5,0.5)))).a*clamp1)；

611、根据新的矩形遮罩图以及待渲染矩形控件的控件贴图，渲染待渲染矩形控件。

由上可知，本发明实施例可以获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，矩形遮罩图用于为矩形控件添加特效，根据第二UV坐标和第一UV坐标，对矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同，基于变换后的第一UV坐标重新渲染矩形遮罩图，得到新的矩形遮罩图，根据新的矩形遮罩图以及待渲染矩形控件的控件贴图，渲染待渲染矩形控件；由于在本发明实施例中，对矩形遮罩图的UV坐标进行伸缩变换，使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同，因此，在对若干个待渲染矩形控件进行渲染时，可以无需针对每个待渲染矩形控件都制作一张遮罩图，降低了应用程序制作过程中的美术成本，减少应用程序的数据量。

为了更好地实施以上方法，相应的，本发明实施例还提供一种矩形控件渲染装置。

参考图7，该装置可以包括：

坐标获取单元701，可以用于获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，矩形遮罩图可以用于为矩形控件添加特效；

伸缩变换单元702，可以用于根据第二UV坐标和第一UV坐标，对矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同；

遮罩图渲染单元703，可以用于基于变换后的第一UV坐标重新渲染矩形遮罩图，得到新的矩形遮罩图；

控件渲染单元704，可以用于根据新的矩形遮罩图以及待渲染矩形控件的控件贴图，渲染待渲染矩形控件。

在一些可选的实施例中，伸缩变换单元702，可以用于根据第二UV坐标，确定待渲染矩形控件对应的边界UV坐标；

将第一UV坐标中各像素点的UV坐标与边界UV坐标进行比较，得到各像素点与待渲染矩形控件之间的位置关系；

基于各像素点对应的位置关系，对各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标。

在一些可选的实施例中，边界UV坐标可以包括第一边界U坐标、第二边界U坐标、第一边界V坐标和第二边界V坐标，各像素点的UV坐标可以包括各像素点的U坐标和V坐标；

伸缩变换单元702，可以用于将第一UV坐标中各像素点的U坐标与第一边界U坐标和第二边界U坐标中的至少一个进行比较，得到各像素点与待渲染矩形控件之间的水平位置关系；

将各像素点的V坐标与第一边界V坐标和第二边界V坐标中的至少一个进行比较，得到各像素点与待渲染矩形控件之间的垂直位置关系；

基于各像素点对应的水平位置关系，对各像素点的U坐标进行水平方向的伸缩变换，以及，基于各像素点对应的垂直位置关系，对各像素点的V坐标进行垂直方向的伸缩变换，得到变换后的第一UV坐标。

在一些可选的实施例中，遮罩图渲染单元703，可以用于基于变换后的第一UV坐标，对矩形遮罩图的纹理进行采样，得到变换后的第一UV坐标中每个像素点的纹理采样结果；

根据纹理采样结果，生成新的矩形遮罩图。

在一些可选的实施例中，遮罩图渲染单元703，可以用于基于变换后的第一UV坐标，对矩形遮罩图的纹理进行采样，得到变换后的第一UV坐标中每个像素点的初始纹理采样结果；

获取坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数；

从变换后的第一UV坐标中，选择预设位置的像素点的旋转UV坐标；

基于旋转UV坐标、坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数，计算旋转UV坐标中每个像素点的旋转纹理采样结果；

根据初始纹理采样结果和旋转纹理采样结果，确定变换后的第一UV坐标中每个像素点的纹理采样结果。

在一些可选的实施例中，如图8所示，本发明实施例提供的矩形控件渲染装置还可以包括强度参数获取单元705，可以用于获取特效强度控制参数；

遮罩图渲染单元703，可以用于基于旋转UV坐标、坐标旋转矩阵、旋转速度控制参数、旋转颜色参数以及特效强度控制参数，计算旋转UV坐标中每个像素点的旋转纹理采样结果。

在一些可选的实施例中，本发明实施例提供的矩形控件渲染装置还可以包括平滑处理单元706，可以用于获取特效平滑处理参数；

根据特效平滑处理参数，对旋转纹理采样结果进行平滑处理，得到平滑过渡的旋转纹理采样结果。

由上可知，通过矩形控件渲染装置，可以获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，矩形遮罩图用于为矩形控件添加特效，根据第二UV坐标和第一UV坐标，对矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同，基于变换后的第一UV坐标重新渲染矩形遮罩图，得到新的矩形遮罩图，根据新的矩形遮罩图以及待渲染矩形控件的控件贴图，渲染待渲染矩形控件；由于在本发明实施例中，对矩形遮罩图的UV坐标进行伸缩变换，使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同，因此，在对若干个待渲染矩形控件进行渲染时，可以无需针对每个待渲染矩形控件都制作一张遮罩图，降低了应用程序制作过程中的美术成本，减少应用程序的数据量。

此外，相应的，本申请实施例还提供一种计算机设备，该计算机设备可以为终端。如图9所示，图9为本申请实施例提供的计算机设备的结构示意图。该计算机设备900包括有一个或者一个以上处理核心的处理器901、有一个或一个以上计算机可读存储介质的存储器902及存储在存储器902上并可在处理器上运行的计算机程序。其中，处理器901与存储器902电性连接。本领域技术人员可以理解，图中示出的计算机设备结构并不构成对计算机设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

处理器901是计算机设备900的控制中心，利用各种接口和线路连接整个计算机设备900的各个部分，通过运行或加载存储在存储器902内的软件程序和/或模块，以及调用存储在存储器902内的数据，执行计算机设备900的各种功能和处理数据，从而对计算机设备900进行整体监控。

在本申请实施例中，计算机设备900中的处理器901会按照如下的步骤，将一个或一个以上的应用程序的进程对应的指令加载到存储器902中，并由处理器901来运行存储在存储器902中的应用程序，从而实现各种功能：

获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，矩形遮罩图用于为矩形控件添加特效；

根据第二UV坐标和第一UV坐标，对矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同；

基于变换后的第一UV坐标重新渲染矩形遮罩图，得到新的矩形遮罩图；

根据新的矩形遮罩图以及待渲染矩形控件的控件贴图，渲染待渲染矩形控件。

在一些可选的实施例中，根据第二UV坐标和第一UV坐标，对矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，包括：

根据第二UV坐标，确定待渲染矩形控件对应的边界UV坐标；

将第一UV坐标中各像素点的UV坐标与边界UV坐标进行比较，得到各像素点与待渲染矩形控件之间的位置关系；

基于各像素点对应的位置关系，对各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标。

在一些可选的实施例中，边界UV坐标包括第一边界U坐标、第二边界U坐标、第一边界V坐标和第二边界V坐标，各像素点的UV坐标包括各像素点的U坐标和V坐标；

将第一UV坐标中各像素点的UV坐标与边界UV坐标进行比较，得到各像素点与待渲染矩形控件之间的位置关系，包括：

将第一UV坐标中各像素点的U坐标与第一边界U坐标和第二边界U坐标中的至少一个进行比较，得到各像素点与待渲染矩形控件之间的水平位置关系；

将各像素点的V坐标与第一边界V坐标和第二边界V坐标中的至少一个进行比较，得到各像素点与待渲染矩形控件之间的垂直位置关系；

基于各像素点对应的位置关系，对各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，包括：

基于各像素点对应的水平位置关系，对各像素点的U坐标进行水平方向的伸缩变换，以及，基于各像素点对应的垂直位置关系，对各像素点的V坐标进行垂直方向的伸缩变换，得到变换后的第一UV坐标。

在一些可选的实施例中，基于变换后的第一UV坐标重新渲染矩形遮罩图，得到新的矩形遮罩图，包括：

基于变换后的第一UV坐标，对矩形遮罩图的纹理进行采样，得到变换后的第一UV坐标中每个像素点的纹理采样结果；

根据纹理采样结果，生成新的矩形遮罩图。

在一些可选的实施例中，基于变换后的第一UV坐标，对矩形遮罩图的纹理进行采样，得到变换后的第一UV坐标中每个像素点的纹理采样结果，包括：

基于变换后的第一UV坐标，对矩形遮罩图的纹理进行采样，得到变换后的第一UV坐标中每个像素点的初始纹理采样结果；

获取坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数；

从变换后的第一UV坐标中，选择预设位置的像素点的旋转UV坐标；

基于旋转UV坐标、坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数，计算旋转UV坐标中每个像素点的旋转纹理采样结果；

根据初始纹理采样结果和旋转纹理采样结果，确定变换后的第一UV坐标中每个像素点的纹理采样结果。

在一些可选的实施例中，基于旋转UV坐标、坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数，计算旋转UV坐标中每个像素点的旋转纹理采样结果之前，本发明实施例提供的矩形控件渲染方法还包括：

获取特效强度控制参数；

基于旋转UV坐标、坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数，计算旋转UV坐标中每个像素点的旋转纹理采样结果，包括：

基于旋转UV坐标、坐标旋转矩阵、旋转速度控制参数、旋转颜色参数以及特效强度控制参数，计算旋转UV坐标中每个像素点的旋转纹理采样结果。

在一些可选的实施例中，基于旋转UV坐标、坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数，计算旋转UV坐标中每个像素点的旋转纹理采样结果之后，本发明实施例提供的矩形控件渲染方法还包括：

获取特效平滑处理参数；

根据特效平滑处理参数，对旋转纹理采样结果进行平滑处理，得到平滑过渡的旋转纹理采样结果。

本方案可以获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，矩形遮罩图用于为矩形控件添加特效，根据第二UV坐标和第一UV坐标，对矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同，基于变换后的第一UV坐标重新渲染矩形遮罩图，得到新的矩形遮罩图，根据新的矩形遮罩图以及待渲染矩形控件的控件贴图，渲染待渲染矩形控件；由于在本发明实施例中，对矩形遮罩图的UV坐标进行伸缩变换，使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同，因此，在对若干个待渲染矩形控件进行渲染时，可以无需针对每个待渲染矩形控件都制作一张遮罩图，降低了应用程序制作过程中的美术成本，减少应用程序的数据量。

以上各个操作的具体实施可参见前面的实施例，在此不再赘述。

可选的，如图9所示，计算机设备900还包括：触控显示屏903、射频电路904、音频电路905、输入单元906以及电源907。其中，处理器901分别与触控显示屏903、射频电路904、音频电路905、输入单元906以及电源907电性连接。本领域技术人员可以理解，图9中示出的计算机设备结构并不构成对计算机设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

触控显示屏903可用于显示图形用户界面以及接收用户作用于图形用户界面产生的操作指令。触控显示屏903可以包括显示面板和触控面板。其中，显示面板可用于显示由用户输入的信息或提供给用户的信息以及计算机设备的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。可选的，可以采用液晶显示器(LCD，Liquid Crystal Display)、有机发光二极管(OLED，Organic Light-EmittingDiode)等形式来配置显示面板。触控面板可用于收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板上或在触控面板附近的操作)，并生成相应的操作指令，且操作指令执行对应程序。可选的，触控面板可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器901，并能接收处理器901发来的命令并加以执行。触控面板可覆盖显示面板，当触控面板检测到在其上或附近的触摸操作后，传送给处理器901以确定触摸事件的类型，随后处理器901根据触摸事件的类型在显示面板上提供相应的视觉输出。在本申请实施例中，可以将触控面板与显示面板集成到触控显示屏903而实现输入和输出功能。但是在某些实施例中，触控面板与触控面板可以作为两个独立的部件来实现输入和输出功能。即触控显示屏903也可以作为输入单元906的一部分实现输入功能。

射频电路904可用于收发射频信号，以通过无线通信与网络设备或其他计算机设备建立无线通讯，与网络设备或其他计算机设备之间收发信号。

音频电路905可以用于通过扬声器、传声器提供用户与计算机设备之间的音频接口。音频电路905可将接收到的音频数据转换后的电信号，传输到扬声器，由扬声器转换为声音信号输出；另一方面，传声器将收集的声音信号转换为电信号，由音频电路905接收后转换为音频数据，再将音频数据输出处理器901处理后，经射频电路904以发送给比如另一计算机设备，或者将音频数据输出至存储器902以便进一步处理。音频电路905还可能包括耳塞插孔，以提供外设耳机与计算机设备的通信。

输入单元906可用于接收输入的数字、字符信息或用户特征信息(例如指纹、虹膜、面部信息等)，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。

电源907用于给计算机设备900的各个部件供电。可选的，电源907可以通过电源管理系统与处理器901逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源907还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管图9中未示出，计算机设备900还可以包括摄像头、传感器、无线保真模块、蓝牙模块等，在此不再赘述。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

由上可知，本实施例提供的计算机设备，获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，矩形遮罩图用于为矩形控件添加特效，根据第二UV坐标和第一UV坐标，对矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同，基于变换后的第一UV坐标重新渲染矩形遮罩图，得到新的矩形遮罩图，根据新的矩形遮罩图以及待渲染矩形控件的控件贴图，渲染待渲染矩形控件；由于在本发明实施例中，对矩形遮罩图的UV坐标进行伸缩变换，使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同，因此，在对若干个待渲染矩形控件进行渲染时，可以无需针对每个待渲染矩形控件都制作一张遮罩图，降低了应用程序制作过程中的美术成本，减少应用程序的数据量。

本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。

为此，本申请实施例提供一种计算机可读存储介质，其中存储有多条计算机程序，该计算机程序能够被处理器进行加载，以执行本申请实施例所提供的任一种矩形控件渲染方法中的步骤。例如，该计算机程序可以执行如下步骤：

获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，矩形遮罩图用于为矩形控件添加特效；

根据第二UV坐标和第一UV坐标，对矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同；

基于变换后的第一UV坐标重新渲染矩形遮罩图，得到新的矩形遮罩图；

根据新的矩形遮罩图以及待渲染矩形控件的控件贴图，渲染待渲染矩形控件。

在一些可选的实施例中，根据第二UV坐标和第一UV坐标，对矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，包括：

根据第二UV坐标，确定待渲染矩形控件对应的边界UV坐标；

将第一UV坐标中各像素点的UV坐标与边界UV坐标进行比较，得到各像素点与待渲染矩形控件之间的位置关系；

基于各像素点对应的位置关系，对各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标。

在一些可选的实施例中，边界UV坐标包括第一边界U坐标、第二边界U坐标、第一边界V坐标和第二边界V坐标，各像素点的UV坐标包括各像素点的U坐标和V坐标；

将第一UV坐标中各像素点的UV坐标与边界UV坐标进行比较，得到各像素点与待渲染矩形控件之间的位置关系，包括：

将第一UV坐标中各像素点的U坐标与第一边界U坐标和第二边界U坐标中的至少一个进行比较，得到各像素点与待渲染矩形控件之间的水平位置关系；

将各像素点的V坐标与第一边界V坐标和第二边界V坐标中的至少一个进行比较，得到各像素点与待渲染矩形控件之间的垂直位置关系；

基于各像素点对应的位置关系，对各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，包括：

基于各像素点对应的水平位置关系，对各像素点的U坐标进行水平方向的伸缩变换，以及，基于各像素点对应的垂直位置关系，对各像素点的V坐标进行垂直方向的伸缩变换，得到变换后的第一UV坐标。

在一些可选的实施例中，基于变换后的第一UV坐标重新渲染矩形遮罩图，得到新的矩形遮罩图，包括：

基于变换后的第一UV坐标，对矩形遮罩图的纹理进行采样，得到变换后的第一UV坐标中每个像素点的纹理采样结果；

根据纹理采样结果，生成新的矩形遮罩图。

在一些可选的实施例中，基于变换后的第一UV坐标，对矩形遮罩图的纹理进行采样，得到变换后的第一UV坐标中每个像素点的纹理采样结果，包括：

基于变换后的第一UV坐标，对矩形遮罩图的纹理进行采样，得到变换后的第一UV坐标中每个像素点的初始纹理采样结果；

获取坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数；

从变换后的第一UV坐标中，选择预设位置的像素点的旋转UV坐标；

基于旋转UV坐标、坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数，计算旋转UV坐标中每个像素点的旋转纹理采样结果；

根据初始纹理采样结果和旋转纹理采样结果，确定变换后的第一UV坐标中每个像素点的纹理采样结果。

在一些可选的实施例中，基于旋转UV坐标、坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数，计算旋转UV坐标中每个像素点的旋转纹理采样结果之前，本发明实施例提供的矩形控件渲染方法还包括：

获取特效强度控制参数；

基于旋转UV坐标、坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数，计算旋转UV坐标中每个像素点的旋转纹理采样结果，包括：

基于旋转UV坐标、坐标旋转矩阵、旋转速度控制参数、旋转颜色参数以及特效强度控制参数，计算旋转UV坐标中每个像素点的旋转纹理采样结果。

在一些可选的实施例中，基于旋转UV坐标、坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数，计算旋转UV坐标中每个像素点的旋转纹理采样结果之后，本发明实施例提供的矩形控件渲染方法还包括：

获取特效平滑处理参数；

根据特效平滑处理参数，对旋转纹理采样结果进行平滑处理，得到平滑过渡的旋转纹理采样结果。

本方案可以获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，矩形遮罩图用于为矩形控件添加特效，根据第二UV坐标和第一UV坐标，对矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同，基于变换后的第一UV坐标重新渲染矩形遮罩图，得到新的矩形遮罩图，根据新的矩形遮罩图以及待渲染矩形控件的控件贴图，渲染待渲染矩形控件；由于在本发明实施例中，对矩形遮罩图的UV坐标进行伸缩变换，使得变换后的第一UV坐标构成的新的矩形遮罩图尺寸与待渲染矩形控件尺寸相同，因此，在对若干个待渲染矩形控件进行渲染时，可以无需针对每个待渲染矩形控件都制作一张遮罩图，降低了应用程序制作过程中的美术成本，减少应用程序的数据量。

以上各个操作的具体实施可参见前面的实施例，在此不再赘述。

其中，该存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)、磁盘或光盘等。

由于该存储介质中所存储的计算机程序，可以执行本申请实施例所提供的任一种矩形控件渲染方法中的步骤，因此，可以实现本申请实施例所提供的任一种矩形控件渲染方法所能实现的有益效果，详见前面的实施例，在此不再赘述。

以上对本申请实施例所提供的一种矩形控件渲染方法、装置、存储介质及计算机设备进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (10)

1.一种矩形控件渲染方法，其特征在于，包括：

获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，所述矩形遮罩图用于为矩形控件添加特效；

根据所述第二UV坐标和所述第一UV坐标，对所述矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得所述变换后的第一UV坐标构成的新的矩形遮罩图尺寸与所述待渲染矩形控件尺寸相同；

基于所述变换后的第一UV坐标重新渲染所述矩形遮罩图，得到新的矩形遮罩图；

根据所述新的矩形遮罩图以及所述待渲染矩形控件的控件贴图，渲染所述待渲染矩形控件。

2.根据权利要求1所述的矩形控件渲染方法，其特征在于，所述根据所述第二UV坐标和所述第一UV坐标，对所述矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，包括：

根据所述第二UV坐标，确定所述待渲染矩形控件对应的边界UV坐标；

将所述第一UV坐标中各像素点的UV坐标与所述边界UV坐标进行比较，得到各所述像素点与所述待渲染矩形控件之间的位置关系；

基于各所述像素点对应的所述位置关系，对各所述像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标。

3.根据权利要求2所述的矩形控件渲染方法，其特征在于，所述边界UV坐标包括第一边界U坐标、第二边界U坐标、第一边界V坐标和第二边界V坐标，所述各像素点的UV坐标包括各像素点的U坐标和V坐标；

所述将所述第一UV坐标中各像素点的UV坐标与所述边界UV坐标进行比较，得到各所述像素点与所述待渲染矩形控件之间的位置关系，包括：

将所述第一UV坐标中各所述像素点的U坐标与所述第一边界U坐标和所述第二边界U坐标中的至少一个进行比较，得到各所述像素点与所述待渲染矩形控件之间的水平位置关系；

将各所述像素点的V坐标与所述第一边界V坐标和第二边界V坐标中的至少一个进行比较，得到各所述像素点与所述待渲染矩形控件之间的垂直位置关系；

所述基于各所述像素点对应的所述位置关系，对各所述像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，包括：

基于各所述像素点对应的所述水平位置关系，对各所述像素点的U坐标进行水平方向的伸缩变换，以及，基于各所述像素点对应的所述垂直位置关系，对各所述像素点的V坐标进行垂直方向的伸缩变换，得到变换后的第一UV坐标。

4.根据权利要求1所述的矩形控件渲染方法，其特征在于，所述基于所述变换后的第一UV坐标重新渲染所述矩形遮罩图，得到新的矩形遮罩图，包括：

基于所述变换后的第一UV坐标，对所述矩形遮罩图的纹理进行采样，得到所述变换后的第一UV坐标中每个像素点的纹理采样结果；

根据所述纹理采样结果，生成新的矩形遮罩图。

5.根据权利要求4所述的矩形控件渲染方法，其特征在于，所述基于所述变换后的第一UV坐标，对所述矩形遮罩图的纹理进行采样，得到所述变换后的第一UV坐标中每个像素点的纹理采样结果，包括：

基于所述变换后的第一UV坐标，对所述矩形遮罩图的纹理进行采样，得到所述变换后的第一UV坐标中每个像素点的初始纹理采样结果；

获取坐标旋转矩阵、旋转速度控制参数以及旋转颜色参数；

从所述变换后的第一UV坐标中，选择预设位置的像素点的旋转UV坐标；

基于所述旋转UV坐标、所述坐标旋转矩阵、所述旋转速度控制参数以及所述旋转颜色参数，计算所述旋转UV坐标中每个像素点的旋转纹理采样结果；

根据所述初始纹理采样结果和所述旋转纹理采样结果，确定所述变换后的第一UV坐标中每个像素点的纹理采样结果。

6.根据权利要求5所述的矩形控件渲染方法，其特征在于，所述基于所述旋转UV坐标、所述坐标旋转矩阵、所述旋转速度控制参数以及所述旋转颜色参数，计算所述旋转UV坐标中每个像素点的旋转纹理采样结果之前，所述方法还包括：

获取特效强度控制参数；

所述基于所述旋转UV坐标、所述坐标旋转矩阵、所述旋转速度控制参数以及所述旋转颜色参数，计算所述旋转UV坐标中每个像素点的旋转纹理采样结果，包括：

基于所述旋转UV坐标、所述坐标旋转矩阵、所述旋转速度控制参数、所述旋转颜色参数以及所述特效强度控制参数，计算所述旋转UV坐标中每个像素点的旋转纹理采样结果。

7.根据权利要求5所述的矩形控件渲染方法，其特征在于，所述基于所述旋转UV坐标、所述坐标旋转矩阵、所述旋转速度控制参数以及所述旋转颜色参数，计算所述旋转UV坐标中每个像素点的旋转纹理采样结果之后，所述方法还包括：

获取特效平滑处理参数；

根据所述特效平滑处理参数，对所述旋转纹理采样结果进行平滑处理，得到平滑过渡的旋转纹理采样结果。

8.一种矩形控件渲染装置，其特征在于，包括：

坐标获取单元，用于获取矩形遮罩图的第一UV坐标以及待渲染矩形控件的第二UV坐标，所述矩形遮罩图用于为矩形控件添加特效；

伸缩变换单元，用于根据所述第二UV坐标和所述第一UV坐标，对所述矩形遮罩图中各像素点的UV坐标进行伸缩变换，得到变换后的第一UV坐标，以使得所述变换后的第一UV坐标构成的新的矩形遮罩图尺寸与所述待渲染矩形控件尺寸相同；

遮罩图渲染单元，用于基于所述变换后的第一UV坐标重新渲染所述矩形遮罩图，得到新的矩形遮罩图；

控件渲染单元，用于根据所述新的矩形遮罩图以及所述待渲染矩形控件的控件贴图，渲染所述待渲染矩形控件。

9.一种电子设备，其特征在于，包括存储器和处理器；所述存储器存储有应用程序，所述处理器用于运行所述存储器内的应用程序，以执行权利要求1至7任一项所述的矩形控件渲染方法中的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有多条指令，所述指令适于处理器进行加载，以执行权利要求1至7任一项所述的矩形控件渲染方法中的步骤。

Images