遮罩图片显示方法、装置及遮罩图片显示方法、装置

摘要

本申请公开了一种遮罩图片显示方法、装置，属于图片处理技术领域。该方法包括：接收用户基于原始图片触发的遮罩指令，所述遮罩指令中携带有遮罩参数信息；根据所述遮罩指令获取所述原始图片对应的第一网格的第一属性信息；根据所述第一属性信息和所述遮罩参数信息生成遮罩图片对应的第二网格的第二属性信息；获取所述原始图片对应的纹理，并根据所述纹理与所述第二属性信息对所述第二网格进行渲染，以显示所述遮罩图片。本申请可以降低GPU在渲染图片时的运算量。

说明书

技术领域

本申请涉及计算机技术领域，尤其涉及一种遮罩图片显示方法、装置及遮罩图片显示方法、装置。

背景技术

目前的Unity(游戏引擎)内置的GUI系统在实现对原始图片的遮罩时，提供了RectMask2d组件来支持矩形遮罩。然而，Unity在使用RectMask2d组件来实现矩形遮罩时，RectMask2d组件需要先建立一个父子级的关系结构(GameObject)，并将被遮罩者(原始图片)作为子级，然后通过调整父级和子级的大小和位置实现对原始图片添加矩形遮罩。现有的这种通过父子级的关系结构的方式实现矩形遮罩由于需要同时调整父级和子级的大小和位置，GPU(Graphics Processing Unit，图形处理器)需要对父级和子级中的原始图片和遮罩图片进行计算，计算复杂，运算量较大。

发明内容

有鉴于此，现提供一种遮罩图片显示方法、装置、计算机设备及计算机可读存储介质，以解决现有的遮罩图片显示方法，GPU的计算复杂，运算量较大的问题。

本申请提供了一种遮罩图片显示方法，包括：

接收用户基于原始图片触发的遮罩指令，所述遮罩指令中携带有遮罩参数信息；

根据所述遮罩指令获取所述原始图片对应的第一网格的第一属性信息；

根据所述第一属性信息和所述遮罩参数信息生成遮罩图片对应的第二网格的第二属性信息；

获取所述原始图片对应的纹理，并根据所述纹理与所述第二属性信息对所述第二网格进行渲染，以显示所述遮罩图片。

可选地，所述遮罩图片显示还包括：

显示遮罩参数设置界面，以供用户基于所述参数设置界面设置所述遮罩参数信息。

可选地，所述第一属性信息包括所述第一网格的多个顶点的顶点坐标和所述第一网格的多个顶点对应的纹理坐标，所述第二属性信息包括所述第二网格的多个顶点的顶点坐标和所述第二网格的多个顶点对应的纹理坐标，所述根据所述第一属性信息和所述遮罩参数信息生成遮罩图片对应的第二网格的第二属性信息包括：

根据所述第一网格的多个顶点的顶点坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点的顶点坐标；

根据所述第一网格的多个顶点对应的纹理坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点对应的纹理坐标。

可选地，所述遮罩参数信息包括所述原始图片上边遮罩的比例、所述原始图片下边遮罩的比例、所述原始图片左边遮罩的比例及所述原始图片右边遮罩的比例，所述根据所述第一网格的多个顶点的顶点坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点的顶点坐标包括：

根据所述第一网格的多个顶点的顶点坐标、所述上边遮罩的比例、所述下边遮罩的比例、所述左边遮罩的比例及所述右边遮罩的比例确定所述第二网格的多个顶点的顶点坐标；

所述根据所述第一网格的多个顶点对应的纹理坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点对应的纹理坐标包括：

根据所述第一网格的多个顶点对应的纹理坐标、所述上边遮罩的比例、所述下边遮罩的比例、所述左边遮罩的比例及所述右边遮罩的比例确定所述第二网格的多个顶点对应的纹理坐标。

可选地，所述遮罩参数信息包括所述原始图片上边遮罩的比例、所述原始图片下边遮罩的比例、所述原始图片左边遮罩的比例、所述原始图片右边遮罩的比例、遮罩水平方向的倾斜值及遮罩垂直方向的倾斜值，所述根据所述第一网格的多个顶点的顶点坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点的顶点坐标包括：

根据所述第一网格的多个顶点的顶点坐标、所述上边遮罩的比例、所述下边遮罩的比例、所述左边遮罩的比例、所述右边遮罩的比例、所述遮罩水平方向的倾斜值及遮罩垂直方向的倾斜值确定所述第二网格的多个顶点的顶点坐标；

所述根据所述第一网格的多个顶点对应的纹理坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点对应的纹理坐标包括：

根据所述第一网格的多个顶点对应的纹理坐标、所述上边遮罩的比例、所述下边遮罩的比例、所述左边遮罩的比例、所述右边遮罩的比例、所述遮罩水平方向的倾斜值及遮罩垂直方向的倾斜值确定所述第二网格的多个顶点对应的纹理坐标。

可选地，所述遮罩参数信息包括圆角矩形的半径、以及所述圆角矩形的平滑度，所述根据所述第一网格的多个顶点的顶点坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点的顶点坐标包括：

根据所述第一网格的多个顶点的顶点坐标、所述圆角矩形的半径、以及所述圆角矩形的平滑度确定所述第二网格的多个顶点的顶点坐标；

所述根据所述第一网格的多个顶点对应的纹理坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点对应的纹理坐标包括：

根据所述第一网格的多个顶点对应的纹理坐标、所述圆角矩形的半径、以及所述圆角矩形的平滑度确定所述第二网格的多个顶点对应的纹理坐标。

可选地，所述根据所述第一网格的多个顶点的顶点坐标、所述圆角矩形的半径、以及所述圆角矩形的平滑度确定所述第二网格的多个顶点的顶点坐标步骤之前，还包括：

根据所述圆角矩形的平滑度与预设公式确定所述第二网格的顶点数量。

本申请还提供了一种遮罩图片显示装置，包括：

接收模块，用于接收用户基于原始图片触发的遮罩指令，所述遮罩指令中携带有遮罩参数信息；

获取模块，用于根据所述遮罩指令获取所述原始图片对应的第一网格的第一属性信息；

生成模块，用于根据所述第一属性信息和所述遮罩参数信息生成遮罩图片对应的第二网格的第二属性信息；

渲染模块，用于获取所述原始图片对应的纹理，并根据所述纹理与所述第二属性信息对所述第二网格进行渲染，以显示所述遮罩图片。

本申请还提供了一种计算机设备，所述计算机设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法的步骤。

上述技术方案的有益效果：

本发明实施例通过接收用户基于原始图片触发的遮罩指令，所述遮罩指令中携带有遮罩参数信息；根据所述遮罩指令获取所述原始图片对应的第一网格的第一属性信息；根据所述第一属性信息和所述遮罩参数信息生成遮罩图片对应的第二网格的第二属性信息；获取所述原始图片对应的纹理，并根据所述纹理与所述第二属性信息对所述第二网格进行渲染，以显示所述遮罩图片。本发明实施例根据用户设置的遮罩参数信息与原始图片对应的第一网格的第一属性信息来确定经过遮罩处理后得到的遮罩图片对应的第二网格的第二属性信息，然后根据该第二网格的第二属性信息与原始图片对应的纹理来生成遮罩图片，从而无需对原始图片和遮罩图片的所有纹理数据进行计算处理，可以节省计算量，提高显示速度。

附图说明

图1为本申请所述遮罩图片显示方法的系统框架图的一种实施例的框架图；

图2为本申请所述的遮罩图片显示方法的一种实施例的流程图；

图3为本申请一实施方式中遮罩参数设置界面的示意图；

图4为本申请一实施方式中根据所述第一属性信息和所述遮罩参数信息生成遮罩图片对应的第二网格的第二属性信息的步骤细化流程图；

图5为本申请一实施方式中原始图片的示意图；

图6为本申请一实施方式中对原始图片进行矩形遮罩处理后得到的遮罩图片示意图；

图7为本申请一实施方式中对原始图片进行平行四边形遮罩处理后得到的遮罩图片示意图；

图8为本申请一实施方式中对原始图片进行平行四边形遮罩处理后得到的遮罩图片示意图；

图9为本申请所述的遮罩图片显示装置的一种实施例的模块图；

图10为本申请实施例提供的执行遮罩图片显示方法或遮罩图片显示方法的计算机设备的硬件结构示意图。

具体实施方式

以下结合附图与具体实施例进一步阐述本申请的优点。

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

在本公开使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开。在本公开和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其它含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本公开可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本公开范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

在本申请的描述中，需要理解的是，步骤前的数字标号并不标识执行步骤的前后顺序，仅用于方便描述本申请及区别每一步骤，因此不能理解为对本申请的限制。

图1示意性示出了根据本申请实施例的遮罩图片显示方法的应用环境示意图。在示例性的实施例中，该应用环境的系统可包括用户终端10、后台服务器20。其中，用户终端10与后台服务器20形成无线或有线连接，且用户终端10具有相应的应用客户端或网页客户端。其中，用户终端10可以为PC、手机、iPAD，平板电脑、笔记本电脑、个人数字助理等。后台服务器20可以为机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。

参阅图2，其为本申请一实施例的遮罩图片显示方法的流程示意图。可以理解，本方法实施例中的流程图不用于对执行步骤的顺序进行限定。从图中可以看出，本实施例中所提供的遮罩图片显示方法包括：

步骤S20、接收用户基于原始图片触发的遮罩指令，所述遮罩指令中携带有遮罩参数信息。

现有技术中，Unity在显示原始图片时，是通过网格(Mesh)的方式来实现的，具体地，Unity在显示原始图片时，会先创建一个GameObject并添加MeshFilter组件、MeshRender组件，然后通过MeshFilter组件获取该原始图片对应的网格(Mesh)，并将获取到的网格给MeshRender组件，以通过MeshRender组件将原始图片渲染出来。

其中，Unity为创建3d游戏的客户端引擎。Mesh为该原始图片对应的网格，Mesh中包含有顶点坐标，法线，纹理坐标，三角形绘制序列等其他有用属性和功能信息。GameObject为Unity内置的基本结构。MeshRender组件为用于获得原始图片对应的网格的组件。Mesh Render组件为把网格渲染出来的组件，MeshFilter组件的作用就是把Mesh给MeshRender，以便其将原始图片绘制显示出来。

在本实施例中，Unity在通过网格显示原始图片后，用户可以基于该显示的原始图片触发遮罩指令，其中，该遮罩指令为用于对原始图片进行裁剪，以保留部分图片内容可视的指令。

在本实施例中，Unity在对原始图片进行裁剪时，是根据遮罩参数信息来进行的。其中，参见图3，所述遮罩参数信息可以包括以下参数信息：原始图片上边遮罩的比例(MaskTop)、原始图片下边遮罩的比例(Mask Bottom)、原始图片左边遮罩的比例(Mask Left)、原始图片右边遮罩的比例(Mask Right)、遮罩水平方向的倾斜值(Lean Horizontal)、遮罩垂直方向的倾斜值(Lean Vertical)、圆角矩形的半径(Radius)、圆角矩形的平滑度(Smoothness)、原始图片在遮罩中的偏移位置(Scroll X,Scroll Y)等。

需要说明的是，所述原始图片上边遮罩的比例指的是对原始图片的顶部进行裁剪的比例；所述原始图片下边遮罩的比例指的是对原始图片的底部进行裁剪的比例；所述原始图片左边遮罩的比例指的是对原始图片左边进行裁剪的比例；所述原始图片右边遮罩的比例指的是对原始图片右边进行裁剪的比例；所述遮罩水平方向的倾斜值指的是对遮罩图片进行左/右倾斜处理的倾斜值；所述遮罩垂直方向的倾斜值指的是对遮罩图片进行上/下倾斜处理的倾斜值；圆角矩形的半径指的是对原始图片进行圆角矩形遮罩处理时的圆角的半径；圆角矩形的平滑度为决定在对原始图片进行圆角矩形遮罩处理时将圆角矩形区域划分为多少个三角形的参数，比如，若圆角矩形的平滑度为n，则需要将圆角矩形区域划分为n个三角形。

在一实施方式中，用户在触发所述遮罩指令时，可以通过点击预设控件的方式来触发所述遮罩指令。可以理解的是，用户在触发所述遮罩指令之前，用户需要先设定所述遮罩参数信息。

在一示例性的实施方式中，为了便于用于设置所述遮罩参数信息，所述遮罩图片显示还包括：

显示遮罩参数设置界面，以供用户基于所述参数设置界面设置所述遮罩参数信息。

具体地，用户在对原始图片进行遮罩处理时，可以在屏幕上显示一个可视化的遮罩参数设置界面，用户通过遮罩参数设置界面可以对原始图片进行遮罩处理的各种遮罩参数信息进行设置，在一示例性的实施方式中，该遮罩参数设置界面如图3所示。

本实施例通过显示遮罩参数设置界面，可以方便用户对遮罩参数信息进行设置。

步骤S21，根据所述遮罩指令获取所述原始图片对应的第一网格的第一属性信息。

具体地，所述第一属性信息包括顶点坐标(vertex)、法线(normal)、纹理坐标(uv)、三角形序列(triangle)等。

其中，可以通过顶点坐标数组存放第一网格的每个顶点的空间坐标，由于该第一网格有4个顶点，则vertex的size为4。通过法线数组存放第一网格每个顶点的法线，大小与顶点坐标对应，即normal[i]对应顶点vertex[i]的法线。通过纹理坐标(uv)定义了图片上每个点的位置的信息，这些点与原始图片对应的3D模型是相互联系的,以决定表面纹理贴图的位置，UV就是将原始图片上每一个点精确对应到模型物体的表面，uv[i]对应vertex[i]。三角形序列(triangles)是一个int数组，这个数组包含顶点数组索引的三角形列表。在本实施例中，第一网格是由2个三角形组成，而三角形的三个点就是顶点坐标里的点。例如：第一网格有四个顶点0，1，2，3，顶点坐标分别为V0(1,1,0)，V1(-1,1,0)，V2(1,-1,0)，V3(-1,-1,0)，那么这四个顶点可以组成包含两个三角形的三角形序列tri[0]＝ver[0],ver[3],ver[1]，tri[1]＝ver[0],ver[2],ver[3]。

步骤S22，根据所述第一属性信息和所述遮罩参数信息生成遮罩图片对应的第二网格的第二属性信息。

具体地，所述遮罩图片为对原始图片进行遮罩处理后得到的图片。在本实施例中，在对遮罩图片进行显示时，也是通过mesh的方式来实现的，因此，为了显示遮罩图片需要先根据原始图片对应的网格的第一属性信息与遮罩参数信息来确定该遮罩图片对应的第二网格的第二属性信息。

在本实施例中，该第二网格的第二属性信息包含的数据类型与第一网格的第一属性信息包含的数据类型完全一致。也就是说，该第二属性信息也包括顶点坐标(vertex)、法线(normal)、纹理坐标(uv)、三角形序列(triangle)等信息。

在一示例性的实施例中，参照图4，第一属性信息可以包括所述第一网格的多个顶点的顶点坐标和所述第一网格的多个顶点对应的纹理坐标，所述第二属性信息包括所述第二网格的多个顶点的顶点坐标和所述第二网格的多个顶点对应的纹理坐标，所述根据所述第一属性信息和所述遮罩参数信息生成遮罩图片对应的第二网格的第二属性信息包括：

步骤S40，根据所述第一网格的多个顶点的顶点坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点的顶点坐标。

具体地，当获取到组成第一网格的各个顶点的顶点坐标之后，可以根据用户设置的遮罩参数信息与第一网格的各个顶点坐标，采用数学规律来重新计算出遮罩图片对应的第二网格的多个顶点的顶点坐标。

步骤S41，根据所述第一网格的多个顶点对应的纹理坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点对应的纹理坐标。

具体地，当获取到组成第一网格的各个顶点的纹理坐标之后，可以根据用户设置的遮罩参数信息与第一网格的各个顶点的纹理坐标，采用数学规律来重新计算出遮罩图片对应的第二网格的多个顶点的纹理坐标。

可以理解的是，对原始图片进行不同的遮罩处理，用户需要设置的遮罩参数信息也不同，在一示例性的实施方式中，当需要对原始图片进行矩形遮罩处理时，用户可以在遮罩参数设置界面中设置原始图片上边遮罩的比例、所述原始图片下边遮罩的比例、所述原始图片左边遮罩的比例及所述原始图片右边遮罩的比例，即所述遮罩参数信息包括所述原始图片上边遮罩的比例、所述原始图片下边遮罩的比例、所述原始图片左边遮罩的比例及所述原始图片右边遮罩的比例，所述根据所述第一网格的多个顶点的顶点坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点的顶点坐标包括：

根据所述第一网格的多个顶点的顶点坐标、所述上边遮罩的比例、所述下边遮罩的比例、所述左边遮罩的比例及所述右边遮罩的比例确定所述第二网格的多个顶点的顶点坐标。

所述根据所述第一网格的多个顶点对应的纹理坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点对应的纹理坐标包括：

根据所述第一网格的多个顶点对应的纹理坐标、所述上边遮罩的比例、所述下边遮罩的比例、所述左边遮罩的比例及所述右边遮罩的比例确定所述第二网格的多个顶点对应的纹理坐标。

具体地，参照图5，假设原始图片的宽和高都是1，所述上边遮罩的比例为T、所述下边遮罩的比例为B、所述左边遮罩的比例为L及所述右边遮罩的比例为R。

由于原始图片是通过mesh的方式来显示时，因此，在对原始图片进行遮罩处理时，可获取到该原始图片对应的第一网格包含的四个顶点的坐标分别为：左上角顶点坐标为(1,0)，右上角顶点坐标为(1,1)，左下角顶点坐标为(0,0)，右下角顶点坐标为(1,0)，且可以得到该原始图片对应的第一网格包含的四个顶点的纹理坐标分别为左上角顶点的纹理坐标为(1,0)，右上角顶点的纹理坐标为(1,1)，左下角顶点的纹理坐标为(0,0)，右下角顶点的纹理坐标为(1,0)。

在得到所述第一网格的多个顶点的顶点坐标、所述上边遮罩的比例T、所述下边遮罩的比例B、所述左边遮罩的比例L及所述右边遮罩的比例R之后，根据数学规律可知，对该原始图片进行矩形遮罩处理后得到的遮罩图片对应的第二网格的包含的四个顶点的坐标分别为：左上角顶点坐标为(L,1-T),右上角顶点坐标为(1-R,1-T),左下角顶点坐标为(L,B),右下角顶点坐标为(1-R,B)。

同理，在得到所述第一网格的多个顶点的纹理坐标、所述上边遮罩的比例T、所述下边遮罩的比例B、所述左边遮罩的比例L及所述右边遮罩的比例R之后，根据数学规律可知，对该原始图片进行矩形遮罩处理后得到的遮罩图片对应的第二网格的包含的四个顶点的纹理坐标分别为：左上角顶点的纹理坐标为(L,1-T),右上角顶点的纹理坐标为(1-R,1-T),左下角顶点的纹理坐标为(L,B),右下角顶点的纹理坐标为(1-R,B)。示例性的，对原始图片进行矩形遮罩处理后得到的遮罩图片如图6所示。

在另一示例性的实施方式中，当需要对原始图片进行平行四边形遮罩处理时，用户可以在遮罩参数设置界面中设置原始图片上边遮罩的比例、所述原始图片下边遮罩的比例、所述原始图片左边遮罩的比例、所述原始图片右边遮罩的比例、遮罩水平方向的倾斜值及遮罩垂直方向的倾斜值，即所述遮罩参数信息包括所述原始图片上边遮罩的比例、所述原始图片下边遮罩的比例、所述原始图片左边遮罩的比例、所述原始图片右边遮罩的比例、遮罩水平方向的倾斜值及遮罩垂直方向的倾斜值，则所述根据所述第一网格的多个顶点的顶点坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点的顶点坐标包括：

根据所述第一网格的多个顶点的顶点坐标、所述上边遮罩的比例、所述下边遮罩的比例、所述左边遮罩的比例、所述右边遮罩的比例、所述遮罩水平方向的倾斜值及遮罩垂直方向的倾斜值确定所述第二网格的多个顶点的顶点坐标；

所述根据所述第一网格的多个顶点对应的纹理坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点对应的纹理坐标包括：

根据所述第一网格的多个顶点对应的纹理坐标、所述上边遮罩的比例、所述下边遮罩的比例、所述左边遮罩的比例、所述右边遮罩的比例、所述遮罩水平方向的倾斜值及遮罩垂直方向的倾斜值确定所述第二网格的多个顶点对应的纹理坐标。

具体地，参照图5，假设原始图片的宽和高都是1，所述上边遮罩的比例为T、所述下边遮罩的比例为B、所述左边遮罩的比例为L及所述右边遮罩的比例为R，所述遮罩水平方向的倾斜值为H，所述遮罩垂直方向的倾斜值为V。

由于对原始图片进行平行四边形遮罩处理可以看作是在对原始图片进行矩形遮罩处理后得到的图片再进行遮罩水平方向的倾斜处理和进行遮罩垂直方向的倾斜处理。

在得到所述第一网格的多个顶点的顶点坐标、所述上边遮罩的比例T、所述下边遮罩的比例B、所述左边遮罩的比例L、所述右边遮罩的比例R、所述遮罩水平方向的倾斜值为H，所述遮罩垂直方向的倾斜值为V之后，根据数学规律可知，对该原始图片进行平行四边形遮罩处理后得到的遮罩图片对应的第二网格的包含的四个顶点的坐标分别为：左上角顶点坐标为(L+H,1-T-V),右上角顶点坐标为(1-R+H,1-T+V),左下角顶点坐标为(L-H,B-V),右下角顶点坐标为(1-R-H,B+V)。

同理，在得到所述第一网格的多个顶点的纹理坐标、所述上边遮罩的比例T、所述下边遮罩的比例B、所述左边遮罩的比例L、所述右边遮罩的比例R、所述遮罩水平方向的倾斜值为H，所述遮罩垂直方向的倾斜值为V之后，根据数学规律可知，对该原始图片进行平行四边形遮罩处理后得到的遮罩图片对应的第二网格的包含的四个顶点的纹理坐标分别为：左上角顶点的纹理坐标为(L+H,1-T-V),右上角顶点的纹理坐标为(1-R+H,1-T+V),左下角顶点的纹理坐标为(L-H,B-V),右下角顶点的纹理坐标为(1-R-H,B+V)。示例性的，对原始图片进行平行四边形遮罩处理后得到的遮罩图片如图7所示。

在另一示例性的实施方式中，当需要对原始图片进行圆角遮罩处理时，用户可以在遮罩参数设置界面中设置圆角矩形的半径、以及所述圆角矩形的平滑度，即所述遮罩参数信息包括圆角矩形的半径、以及所述圆角矩形的平滑度，则所述根据所述第一网格的多个顶点的顶点坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点的顶点坐标包括：

根据所述第一网格的多个顶点的顶点坐标、所述圆角矩形的半径、以及所述圆角矩形的平滑度确定所述第二网格的多个顶点的顶点坐标；

所述根据所述第一网格的多个顶点对应的纹理坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点对应的纹理坐标包括：

根据所述第一网格的多个顶点对应的纹理坐标、所述圆角矩形的半径、以及所述圆角矩形的平滑度确定所述第二网格的多个顶点对应的纹理坐标。

具体地，假设原始图片的宽和高都是1，圆角矩形的半径为0.2，圆角矩形的平滑度为4。当对原始图片进行圆角矩形遮罩处理时，可以看作是将原始图片划分为如图8所示的包含有中间的三组矩形与4个角中的圆角矩形区域，而由于现有技术中，Unity在绘制圆角矩形时都是通过将圆角矩形划分为若干个大小相同的三角形的方式来绘制的，因此，本实施例中，在对原始图片进行圆角矩形遮罩处理时，即可以将原始图片分解为由中间的三组矩形和由4组若干个三角形组成的圆角矩形区域。

此外，在本实施例中，由于每一个圆角矩形区域可以划分的三角形的个数由圆角矩形的平滑度决定，因此，在获取到圆角矩形的平滑度后，首先需要根据该圆角矩形的平滑度与预设公式确定所述第二网格的顶点数量，其中与预设公式为：对原始图片进行圆角矩形遮罩处理后得到的第二网格的顶点数量＝4*(圆角矩形的平滑度+2)，即，若圆角矩形区域划分的三角形个数为4，则对原始图片进行圆角矩形遮罩处理后得到的第二网格的顶点数量为：(4+2)*4＝24个，三角形的夹角α＝90°/4＝22.5°。

示例性的，在得到所述第一网格的多个顶点的纹理坐标、圆角矩形的半径为0.2，圆角矩形的平滑度为4之后，根据数学规律可知，对该原始图片进行圆角矩形处理后得到的遮罩图片对应的第二网格的包含的24个顶点的纹理坐标分别为：

中间矩形的四个顶点坐标分别为：左上角顶点坐标为(0.2,1)，右上角顶点坐标为(0.8,1)，左下角顶点坐标为(0.2,0)，右下角顶点坐标为(0.8,0)。

左侧矩形的四个顶点坐标分别为：左上角顶点坐标为(0,0.8)，右上角顶点坐标为(0.2,0.8)，左下角顶点坐标为(0,0.2)，右下角顶点坐标为(0.2,0.2)。

右侧矩形的四个顶点坐标分别为：左上角顶点坐标为(0.8,0.8)，右上角顶点坐标为(1,0.8)，左下角顶点坐标为(0.8,0.2)，右下角顶点坐标为(1,0.2)。

左上角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点1、顶点2、顶点3)的坐标依次为(0.2-0.2*cosα,0.8+0.2*sinα)，(0.2-0.2*cos2α,0.8+0.2*sin2α)，(0.2-0.2*cos3α,0.8+0.2*sin3α)。

右上角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点4、顶点5、顶点6)的坐标依次为(0.8+0.2*cosα,0.8+0.2*sinα)，(0.8+0.2*cos2α,0.8+0.2*sin2α)，(0.8+0.2*cos3α,0.8+0.2*sin3α)。

左下角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点7、顶点8、顶点9)的坐标依次为(0.2-0.2*cosα,0.2-0.2*sinα)，(0.2-0.2*cos2α,0.2-0.2*sin2α)，(0.2-0.2*cos3α,0.2-0.2*sin3α)。

右下角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点10、顶点11、顶点12)的坐标依次为(0.8+0.2*cosα,0.2-0.2*sinα)，(0.8+0.2*cos2α,0.2-0.2*sin2α)，(0.8+0.2*cos3α,0.2-0.2*sin3α)。

同理，在得到所述第一网格的多个顶点的纹理坐标、圆角矩形的半径为0.2，圆角矩形的平滑度为4之后，根据数学规律可知，对该原始图片进行圆角遮罩处理后得到的遮罩图片对应的第二网格的包含的24个顶点的纹理坐标分别为：

中间矩形的四个顶点的纹理坐标分别为：左上角顶点的纹理坐标为(0.2,1)，右上角顶点的纹理坐标为(0.8,1)，左下角顶点的纹理坐标为(0.2,0)，右下角顶点的纹理坐标为(0.8,0)。

左侧矩形的四个顶点的纹理坐标分别为：左上角顶点的纹理坐标为(0,0.8)，右上角顶点的纹理坐标为(0.2,0.8)，左下角顶点的纹理坐标为(0,0.2)，右下角顶点的纹理坐标为(0.2,0.2)。

右侧矩形的四个顶点的纹理坐标分别为：左上角顶点的纹理坐标为(0.8,0.8)，右上角顶点的纹理坐标为(1,0.8)，左下角顶点的纹理坐标为(0.8,0.2)，右下角顶点的纹理坐标为(1,0.2)。

左上角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点1、顶点2、顶点3)的纹理坐标依次为(0.2-0.2*cosα,0.8+0.2*sinα)，(0.2-0.2*cos2α,0.8+0.2*sin2α)，(0.2-0.2*cos3α,0.8+0.2*sin3α)。

右上角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点4、顶点5、顶点6)的纹理坐标依次为(0.8+0.2*cosα,0.8+0.2*sinα)，(0.8+0.2*cos2α,0.8+0.2*sin2α)，(0.8+0.2*cos3α,0.8+0.2*sin3α)。

左下角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点7、顶点8、顶点9)的纹理坐标依次为(0.2-0.2*cosα,0.2-0.2*sinα)，(0.2-0.2*cos2α,0.2-0.2*sin2α)，(0.2-0.2*cos3α,0.2-0.2*sin3α)。

右下角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点10、顶点11、顶点12)的纹理坐标依次为(0.8+0.2*cosα,0.2-0.2*sinα)，(0.8+0.2*cos2α,0.2-0.2*sin2α)，(0.8+0.2*cos3α,0.2-0.2*sin3α)。

本实施例中，在对原始图片进行矩形遮罩处理时，可以根据用户设置的遮罩参数信息与第一网格的各个顶点的顶点坐标和纹理坐标计算出遮罩图片对应的第二网格的顶点坐标和纹理坐标，以便后续可以根据该第二网格的顶点坐标和纹理坐标来对第二网格进行渲染得到对原始图片进行矩形遮罩处理后得到的遮罩图片，而无需对原始图片的所有纹理数据进行计算处理，从而可以节省计算量，提高显示速度。

步骤S23，获取所述原始图片对应的纹理，并根据所述纹理与所述第二属性信息对所述第二网格进行渲染，以显示所述遮罩图片。

具体地，纹理是由图片转化过来的格式，是GPU(Graphics Processing Unit，图形处理器)能够处理的格式。

由于第二属性信息中包含有组成第二网格的各个顶点的顶点坐标和纹理坐标，以及由各个顶点组成的三角形序列(triangle)等属性信息。

因此，在得到这些属性信息之后，可以根据这些属性信息来创建第二网格，然后根据第二网格中的纹理坐标来对原始图片对应的纹理区域进行采样，并根据采样得到的纹理对第二网格进行渲染，从而显示遮罩图片。

本发明实施例中根据用户设置的遮罩参数信息与原始图片对应的第一网格的第一属性信息来确定经过遮罩处理后得到的遮罩图片对应的第二网格的第二属性信息，然后根据该第二网格的第二属性信息与原始图片对应的纹理来生成遮罩图片，从而无需对原始图片和遮罩图片的所有纹理数据进行计算处理，可以节省计算量，提高显示速度。

参阅图9所示，是本申请遮罩图片显示装置900一实施例的程序模块图。

本实施例中，所述遮罩图片显示装置900包括一系列的存储于存储器上的计算机程序指令，当该计算机程序指令被处理器执行时，可以实现本申请各实施例的遮罩图片显示功能。在一些实施例中，基于该计算机程序指令各部分所实现的特定的操作，遮罩图片显示装置900可以被划分为一个或多个模块。例如，在图9中，所述遮罩图片显示装置900可以被分割成接收模块901、获取模块902、生成模块903、渲染模块904。其中：

接收模块901，用于接收用户基于原始图片触发的遮罩指令，所述遮罩指令中携带有遮罩参数信息。

现有技术中，Unity在显示原始图片时，是通过网格(Mesh)的方式来实现的，具体地，Unity在显示原始图片时，会先创建一个GameObject并添加MeshFilter组件、MeshRender组件，然后通过MeshFilter组件获取该原始图片对应的网格(Mesh)，并将获取到的网格给MeshRender组件，以通过MeshRender组件将原始图片渲染出来。

其中，Unity为创建3d游戏的客户端引擎。Mesh为该原始图片对应的网格，Mesh中包含有顶点坐标，法线，纹理坐标，三角形绘制序列等其他有用属性和功能信息。GameObject为Unity内置的基本结构。MeshRender组件为用于获得原始图片对应的网格的组件。Mesh Render组件为把网格渲染出来的组件，MeshFilter组件的作用就是把Mesh给MeshRender，以便其将原始图片绘制显示出来。

在本实施例中，Unity在通过网格显示原始图片后，用户可以基于该显示的原始图片触发遮罩指令，其中，该遮罩指令为用于对原始图片进行裁剪，以保留部分图片内容可视的指令。

在本实施例中，Unity在对原始图片进行裁剪时，是根据遮罩参数信息来进行的。其中，所述遮罩参数信息可以包括以下参数信息：原始图片上边遮罩的比例、原始图片下边遮罩的比例、原始图片左边遮罩的比例、原始图片右边遮罩的比例、遮罩水平方向的倾斜值、遮罩垂直方向的倾斜值、圆角矩形的半径、圆角矩形的平滑度、原始图片在遮罩中的偏移位置等。

需要说明的是，所述原始图片上边遮罩的比例指的是对原始图片的顶部进行裁剪的比例；所述原始图片下边遮罩的比例指的是对原始图片的底部进行裁剪的比例；所述原始图片左边遮罩的比例指的是对原始图片左边进行裁剪的比例；所述原始图片右边遮罩的比例指的是对原始图片右边进行裁剪的比例；所述遮罩水平方向的倾斜值指的是对遮罩图片进行左/右倾斜处理的倾斜值；所述遮罩垂直方向的倾斜值指的是对遮罩图片进行上/下倾斜处理的倾斜值；圆角矩形的半径指的是对原始图片进行圆角矩形遮罩处理时的圆角的半径；圆角矩形的平滑度为决定在对原始图片进行圆角矩形遮罩处理时将圆角矩形区域划分为多少个三角形的参数，比如，若圆角矩形的平滑度为n，则需要将圆角矩形区域划分为n个三角形。

在一实施方式中，用户在触发所述遮罩指令时，可以通过点击预设控件的方式来触发所述遮罩指令。可以理解的是，用户在触发所述遮罩指令之前，用户需要先设定所述遮罩参数信息。

在一示例性的实施方式中，为了便于用于设置所述遮罩参数信息，所述遮罩图片显示装置900还包括：设置模块。

所述设置模块，用于显示遮罩参数设置界面，以供用户基于所述参数设置界面设置所述遮罩参数信息。

具体地，用户在对原始图片进行遮罩处理时，可以在屏幕上显示一个可视化的遮罩参数设置界面，用户通过遮罩参数设置界面可以对原始图片进行遮罩处理的各种遮罩参数信息进行设置，在一示例性的实施方式中，该遮罩参数设置界面如图3所示。

本实施例通过显示遮罩参数设置界面，可以方便用户对遮罩参数信息进行设置。

获取模块902，用于根据所述遮罩指令获取所述原始图片对应的第一网格的第一属性信息。

具体地，所述第一属性信息包括顶点坐标(vertex)、法线(normal)、纹理坐标(uv)、三角形序列(triangle)等。

其中，可以通过顶点坐标数组存放第一网格的每个顶点的空间坐标，由于该第一网格有4个顶点，则vertex的size为4。通过法线数组存放第一网格每个顶点的法线，大小与顶点坐标对应，即normal[i]对应顶点vertex[i]的法线。通过纹理坐标(uv)定义了图片上每个点的位置的信息，这些点与原始图片对应的3D模型是相互联系的,以决定表面纹理贴图的位置，UV就是将原始图片上每一个点精确对应到模型物体的表面，uv[i]对应vertex[i]。三角形序列(triangles)是一个int数组，这个数组包含顶点数组索引的三角形列表。在本实施例中，第一网格是由2个三角形组成，而三角形的三个点就是顶点坐标里的点。例如：第一网格有四个顶点0，1，2，3，顶点坐标分别为V0(1,1,0)，V1(-1,1,0)，V2(1,-1,0)，V3(-1,-1,0)，那么这四个顶点可以组成包含两个三角形的三角形序列tri[0]＝ver[0],ver[3],ver[1]，tri[1]＝ver[0],ver[2],ver[3]。

生成模块903，用于根据所述第一属性信息和所述遮罩参数信息生成遮罩图片对应的第二网格的第二属性信息。

具体地，所述遮罩图片为对原始图片进行遮罩处理后得到的图片。在本实施例中，在对遮罩图片进行显示时，也是通过mesh的方式来实现的，因此，为了显示遮罩图片需要先根据原始图片对应的网格的第一属性信息与遮罩参数信息来确定该遮罩图片对应的第二网格的第二属性信息。

在本实施例中，该第二网格的第二属性信息包含的数据类型与第一网格的第一属性信息包含的数据类型完全一致。也就是说，该第二属性信息也包括顶点坐标(vertex)、法线(normal)、纹理坐标(uv)、三角形序列(triangle)等信息。

在一示例性的实施例中，参照图4，第一属性信息可以包括所述第一网格的多个顶点的顶点坐标和所述第一网格的多个顶点对应的纹理坐标，所述第二属性信息包括所述第二网格的多个顶点的顶点坐标和所述第二网格的多个顶点对应的纹理坐标，所述设置模块903，还用于根据所述第一网格的多个顶点的顶点坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点的顶点坐标。

具体地，当获取到组成第一网格的各个顶点的顶点坐标之后，可以根据用户设置的遮罩参数信息与第一网格的各个顶点坐标，采用数学规律来重新计算出遮罩图片对应的第二网格的多个顶点的顶点坐标。

所述设置模块903，还用于根据所述第一网格的多个顶点对应的纹理坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点对应的纹理坐标。

具体地，当获取到组成第一网格的各个顶点的纹理坐标之后，可以根据用户设置的遮罩参数信息与第一网格的各个顶点的纹理坐标，采用数学规律来重新计算出遮罩图片对应的第二网格的多个顶点的纹理坐标。

可以理解的是，对原始图片进行不同的遮罩处理，用户需要设置的遮罩参数信息也不同，在一示例性的实施方式中，当需要对原始图片进行矩形遮罩处理时，用户可以在遮罩参数设置界面中设置原始图片上边遮罩的比例、所述原始图片下边遮罩的比例、所述原始图片左边遮罩的比例及所述原始图片右边遮罩的比例，即所述遮罩参数信息包括所述原始图片上边遮罩的比例、所述原始图片下边遮罩的比例、所述原始图片左边遮罩的比例及所述原始图片右边遮罩的比例，所述根据所述第一网格的多个顶点的顶点坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点的顶点坐标包括：

根据所述第一网格的多个顶点的顶点坐标、所述上边遮罩的比例、所述下边遮罩的比例、所述左边遮罩的比例及所述右边遮罩的比例确定所述第二网格的多个顶点的顶点坐标。

所述根据所述第一网格的多个顶点对应的纹理坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点对应的纹理坐标包括：

根据所述第一网格的多个顶点对应的纹理坐标、所述上边遮罩的比例、所述下边遮罩的比例、所述左边遮罩的比例及所述右边遮罩的比例确定所述第二网格的多个顶点对应的纹理坐标。

具体地，参照图5，假设原始图片的宽和高都是1，所述上边遮罩的比例为T、所述下边遮罩的比例为B、所述左边遮罩的比例为L及所述右边遮罩的比例为R。

由于原始图片是通过mesh的方式来显示时，因此，在对原始图片进行遮罩处理时，可获取到该原始图片对应的第一网格包含的四个顶点的坐标分别为：左上角顶点坐标为(1,0)，右上角顶点坐标为(1,1)，左下角顶点坐标为(0,0)，右下角顶点坐标为(1,0)，且可以得到该原始图片对应的第一网格包含的四个顶点的纹理坐标分别为左上角顶点的纹理坐标为(1,0)，右上角顶点的纹理坐标为(1,1)，左下角顶点的纹理坐标为(0,0)，右下角顶点的纹理坐标为(1,0)。

在得到所述第一网格的多个顶点的顶点坐标、所述上边遮罩的比例T、所述下边遮罩的比例B、所述左边遮罩的比例L及所述右边遮罩的比例R之后，根据数学规律可知，对该原始图片进行矩形遮罩处理后得到的遮罩图片对应的第二网格的包含的四个顶点的坐标分别为：左上角顶点坐标为(L,1-T),右上角顶点坐标为(1-R,1-T),左下角顶点坐标为(L,B),右下角顶点坐标为(1-R,B)。

同理，在得到所述第一网格的多个顶点的纹理坐标、所述上边遮罩的比例T、所述下边遮罩的比例B、所述左边遮罩的比例L及所述右边遮罩的比例R之后，根据数学规律可知，对该原始图片进行矩形遮罩处理后得到的遮罩图片对应的第二网格的包含的四个顶点的纹理坐标分别为：左上角顶点的纹理坐标为(L,1-T),右上角顶点的纹理坐标为(1-R,1-T),左下角顶点的纹理坐标为(L,B),右下角顶点的纹理坐标为(1-R,B)。示例性的，对原始图片进行矩形遮罩处理后得到的遮罩图片如图6所示。

在另一示例性的实施方式中，当需要对原始图片进行平行四边形遮罩处理时，用户可以在遮罩参数设置界面中设置原始图片上边遮罩的比例、所述原始图片下边遮罩的比例、所述原始图片左边遮罩的比例、所述原始图片右边遮罩的比例、遮罩水平方向的倾斜值及遮罩垂直方向的倾斜值，即所述遮罩参数信息包括所述原始图片上边遮罩的比例、所述原始图片下边遮罩的比例、所述原始图片左边遮罩的比例、所述原始图片右边遮罩的比例、遮罩水平方向的倾斜值及遮罩垂直方向的倾斜值，则所述根据所述第一网格的多个顶点的顶点坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点的顶点坐标包括：

根据所述第一网格的多个顶点的顶点坐标、所述上边遮罩的比例、所述下边遮罩的比例、所述左边遮罩的比例、所述右边遮罩的比例、所述遮罩水平方向的倾斜值及遮罩垂直方向的倾斜值确定所述第二网格的多个顶点的顶点坐标；

所述根据所述第一网格的多个顶点对应的纹理坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点对应的纹理坐标包括：

根据所述第一网格的多个顶点对应的纹理坐标、所述上边遮罩的比例、所述下边遮罩的比例、所述左边遮罩的比例、所述右边遮罩的比例、所述遮罩水平方向的倾斜值及遮罩垂直方向的倾斜值确定所述第二网格的多个顶点对应的纹理坐标。

具体地，参照图5，假设原始图片的宽和高都是1，所述上边遮罩的比例为T、所述下边遮罩的比例为B、所述左边遮罩的比例为L及所述右边遮罩的比例为R，所述遮罩水平方向的倾斜值为H，所述遮罩垂直方向的倾斜值为V。

由于对原始图片进行平行四边形遮罩处理可以看作是在对原始图片进行矩形遮罩处理后得到的图片再进行遮罩水平方向的倾斜处理和进行遮罩垂直方向的倾斜处理。

在得到所述第一网格的多个顶点的顶点坐标、所述上边遮罩的比例T、所述下边遮罩的比例B、所述左边遮罩的比例L、所述右边遮罩的比例R、所述遮罩水平方向的倾斜值为H，所述遮罩垂直方向的倾斜值为V之后，根据数学规律可知，对该原始图片进行平行四边形遮罩处理后得到的遮罩图片对应的第二网格的包含的四个顶点的坐标分别为：左上角顶点坐标为(L+H,1-T-V),右上角顶点坐标为(1-R+H,1-T+V),左下角顶点坐标为(L-H,B-V),右下角顶点坐标为(1-R-H,B+V)。

同理，在得到所述第一网格的多个顶点的纹理坐标、所述上边遮罩的比例T、所述下边遮罩的比例B、所述左边遮罩的比例L、所述右边遮罩的比例R、所述遮罩水平方向的倾斜值为H，所述遮罩垂直方向的倾斜值为V之后，根据数学规律可知，对该原始图片进行平行四边形遮罩处理后得到的遮罩图片对应的第二网格的包含的四个顶点的纹理坐标分别为：左上角顶点的纹理坐标为(L+H,1-T-V),右上角顶点的纹理坐标为(1-R+H,1-T+V),左下角顶点的纹理坐标为(L-H,B-V),右下角顶点的纹理坐标为(1-R-H,B+V)。示例性的，对原始图片进行平行四边形遮罩处理后得到的遮罩图片如图7所示。

在另一示例性的实施方式中，当需要对原始图片进行圆角遮罩处理时，用户可以在遮罩参数设置界面中设置圆角矩形的半径、以及所述圆角矩形的平滑度，即所述遮罩参数信息包括圆角矩形的半径、以及所述圆角矩形的平滑度，则所述根据所述第一网格的多个顶点的顶点坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点的顶点坐标包括：

根据所述第一网格的多个顶点的顶点坐标、所述圆角矩形的半径、以及所述圆角矩形的平滑度确定所述第二网格的多个顶点的顶点坐标；

所述根据所述第一网格的多个顶点对应的纹理坐标与所述遮罩参数信息生成遮罩图片对应的第二网格的多个顶点对应的纹理坐标包括：

根据所述第一网格的多个顶点对应的纹理坐标、所述圆角矩形的半径、以及所述圆角矩形的平滑度确定所述第二网格的多个顶点对应的纹理坐标。

具体地，假设原始图片的宽和高都是1，圆角矩形的半径为0.2，圆角矩形的平滑度为4。当对原始图片进行圆角矩形遮罩处理时，可以看作是将原始图片经圆角矩形处理后得到的遮罩图片划分为如图8所示的包含有中间的三组矩形与4个角中的圆角矩形区域，而由于现有技术中，Unity在绘制圆角矩形时都是通过将圆角矩形划分为若干个大小相同的三角形的方式来绘制的，因此，本实施例中，在对原始图片进行圆角矩形遮罩处理时，即可以将原始图片分解为由中间的三组矩形和由4组若干个三角形组成的圆角矩形区域。

此外，在本实施例中，由于每一个圆角矩形区域可以划分的三角形的个数由圆角矩形的平滑度决定，因此，在获取到圆角矩形的平滑度后，首先需要根据该圆角矩形的平滑度与预设公式确定所述第二网格的顶点数量，其中与预设公式为：对原始图片进行圆角矩形遮罩处理后得到的第二网格的顶点数量＝4*(圆角矩形的平滑度+2)，即，若圆角矩形区域划分的三角形个数为4，则对原始图片进行圆角矩形遮罩处理后得到的第二网格的顶点数量为：(4+2)*4＝24个，三角形的夹角α＝90°/4＝22.5°。

示例性的，在得到所述第一网格的多个顶点的纹理坐标、圆角矩形的半径为0.2，圆角矩形的平滑度为4之后，根据数学规律可知，对该原始图片进行圆角矩形处理后得到的遮罩图片对应的第二网格的包含的24个顶点的纹理坐标分别为：

中间矩形的四个顶点坐标分别为：左上角顶点坐标为(0.2,1)，右上角顶点坐标为(0.8,1)，左下角顶点坐标为(0.2,0)，右下角顶点坐标为(0.8,0)。

左侧矩形的四个顶点坐标分别为：左上角顶点坐标为(0,0.8)，右上角顶点坐标为(0.2,0.8)，左下角顶点坐标为(0,0.2)，右下角顶点坐标为(0.2,0.2)。

右侧矩形的四个顶点坐标分别为：左上角顶点坐标为(0.8,0.8)，右上角顶点坐标为(1,0.8)，左下角顶点坐标为(0.8,0.2)，右下角顶点坐标为(1,0.2)。

左上角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点1、顶点2、顶点3)的坐标依次为(0.2-0.2*cosα,0.8+0.2*sinα)，(0.2-0.2*cos2α,0.8+0.2*sin2α)，(0.2-0.2*cos3α,0.8+0.2*sin3α)。

右上角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点4、顶点5、顶点6)的坐标依次为(0.8+0.2*cosα,0.8+0.2*sinα)，(0.8+0.2*cos2α,0.8+0.2*sin2α)，(0.8+0.2*cos3α,0.8+0.2*sin3α)。

左下角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点7、顶点8、顶点9)的坐标依次为(0.2-0.2*cosα,0.2-0.2*sinα)，(0.2-0.2*cos2α,0.2-0.2*sin2α)，(0.2-0.2*cos3α,0.2-0.2*sin3α)。

右下角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点10、顶点11、顶点12)的坐标依次为(0.8+0.2*cosα,0.2-0.2*sinα)，(0.8+0.2*cos2α,0.2-0.2*sin2α)，(0.8+0.2*cos3α,0.2-0.2*sin3α)。

同理，在得到所述第一网格的多个顶点的纹理坐标、圆角矩形的半径为0.2，圆角矩形的平滑度为4之后，根据数学规律可知，对该原始图片进行圆角遮罩处理后得到的遮罩图片对应的第二网格的包含的24个顶点的纹理坐标分别为：

中间矩形的四个顶点的纹理坐标分别为：左上角顶点的纹理坐标为(0.2,1)，右上角顶点的纹理坐标为(0.8,1)，左下角顶点的纹理坐标为(0.2,0)，右下角顶点的纹理坐标为(0.8,0)。

左侧矩形的四个顶点的纹理坐标分别为：左上角顶点的纹理坐标为(0,0.8)，右上角顶点的纹理坐标为(0.2,0.8)，左下角顶点的纹理坐标为(0,0.2)，右下角顶点的纹理坐标为(0.2,0.2)。

右侧矩形的四个顶点的纹理坐标分别为：左上角顶点的纹理坐标为(0.8,0.8)，右上角顶点的纹理坐标为(1,0.8)，左下角顶点的纹理坐标为(0.8,0.2)，右下角顶点的纹理坐标为(1,0.2)。

左上角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点1、顶点2、顶点3)的纹理坐标依次为(0.2-0.2*cosα,0.8+0.2*sinα)，(0.2-0.2*cos2α,0.8+0.2*sin2α)，(0.2-0.2*cos3α,0.8+0.2*sin3α)。

右上角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点4、顶点5、顶点6)的纹理坐标依次为(0.8+0.2*cosα,0.8+0.2*sinα)，(0.8+0.2*cos2α,0.8+0.2*sin2α)，(0.8+0.2*cos3α,0.8+0.2*sin3α)。

左下角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点7、顶点8、顶点9)的纹理坐标依次为(0.2-0.2*cosα,0.2-0.2*sinα)，(0.2-0.2*cos2α,0.2-0.2*sin2α)，(0.2-0.2*cos3α,0.2-0.2*sin3α)。

右下角圆角区域中包含的尚未计算顶点坐标的三个顶点(顶点10、顶点11、顶点12)的纹理坐标依次为(0.8+0.2*cosα,0.2-0.2*sinα)，(0.8+0.2*cos2α,0.2-0.2*sin2α)，(0.8+0.2*cos3α,0.2-0.2*sin3α)。

本实施例中，在对原始图片进行矩形遮罩处理时，可以根据用户设置的遮罩参数信息与第一网格的各个顶点的顶点坐标和纹理坐标计算出遮罩图片对应的第二网格的顶点坐标和纹理坐标，以便后续可以根据该第二网格的顶点坐标和纹理坐标来对第二网格进行渲染得到对原始图片进行矩形遮罩处理后得到的遮罩图片，而无需对原始图片的所有纹理数据进行计算处理，从而可以节省计算量，提高显示速度。

渲染模块904，用于获取所述原始图片对应的纹理，并根据所述纹理与所述第二属性信息对所述第二网格进行渲染，以显示所述遮罩图片。

具体地，由于第二属性信息中包含有组成第二网格的各个顶点的顶点坐标和纹理坐标，以及由各个顶点组成的三角形序列(triangle)等属性信息。

因此，在得到这些属性信息之后，可以根据这些属性信息来创建第二网格，然后根据第二网格中的纹理坐标来对原始图片对应的纹理区域进行采样，并根据采样得到的纹理对第二网格进行渲染，从而显示遮罩图片。

本发明实施例中根据用户设置的遮罩参数信息与原始图片对应的第一网格的第一属性信息来确定经过遮罩处理后得到的遮罩图片对应的第二网格的第二属性信息，然后根据该第二网格的第二属性信息与原始图片对应的纹理来生成遮罩图片，从而无需对原始图片和遮罩图片的所有纹理数据进行计算处理，可以节省计算量，提高显示速度。

图10示意性示出了根据本申请实施例的适于实现遮罩图片显示方法的计算机设备10的硬件架构示意图。本实施例中，计算机设备10是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。例如，可以是平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。如图10所示，计算机设备10至少包括但不限于：可通过系统总线相互通信链接存储器901、处理器902、网络接口903。其中：

存储器901至少包括一种类型的计算机可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器901可以是计算机设备10的内部存储模块，例如该计算机设备10的硬盘或内存。在另一些实施例中，存储器901也可以是计算机设备10的外部存储设备，例如该计算机设备10上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(FlashCard)等。当然，存储器901还可以既包括计算机设备10的内部存储模块也包括其外部存储设备。本实施例中，存储器901通常用于存储安装于计算机设备10的操作系统和各类应用软件，例如遮罩图片显示方法的程序代码等。此外，存储器901还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器902在一些实施例中可以是中央处理器(Central Processing Unit，简称为CPU)、控制器、微控制器、微处理器、或其它数据处理芯片。该处理器902通常用于控制计算机设备10的总体操作，例如执行与计算机设备10进行数据交互或者通信相关的控制和处理等。本实施例中，处理器902用于运行存储器901中存储的程序代码或者处理数据。

网络接口903可包括无线网络接口或有线网络接口，该网络接口903通常用于在计算机设备10与其它计算机设备之间建立通信链接。例如，网络接口903用于通过网络将计算机设备10与外部终端相连，在计算机设备10与外部终端之间的建立数据传输通道和通信链接等。网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(GlobalSystem of Mobile communication，简称为GSM)、宽带码分多址(Wideband Code DivisionMultiple Access，简称为WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。

需要指出的是，图10仅示出了具有部件901～903的计算机设备，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。

在本实施例中，存储于存储器901中的遮罩图片显示方法还可以被分割为一个或者多个程序模块，并由一个或多个处理器(本实施例为处理器902)所执行，以完成本申请。

本申请实施例提供了一种非易失性计算机可读存储介质，计算机可读存储介质其上存储有计算机程序，计算机程序被处理器执行时实现实施例中的遮罩图片显示方法的步骤。

本实施例中，计算机可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，计算机可读存储介质可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，计算机可读存储介质也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，计算机可读存储介质还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，计算机可读存储介质通常用于存储安装于计算机设备的操作系统和各类应用软件，例如实施例中的遮罩图片显示方法的程序代码等。此外，计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的各类数据。

以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到至少两个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本申请实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域普通技术人员可以清楚地了解到各实施方式可借助软件加通用硬件平台的方式来实现，当然也可以通过硬件。本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-OnlyMemory，ROM)或随机存储记忆体(RandomAccessMemory，RAM)等。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。