图像展示区域的形状设置方法及装置与流程

本发明涉及图像处理领域，尤其涉及一种图像展示区域的形状设置方法及装置。

背景技术：

一般情况下，手机或电脑客户端程序中，窗口组件的展示区域为直角矩形区域，计算机程序可通过定义矩形区域的顶点或长宽即可确定直角矩形的展示区域，但在一些应用场景中，为了适配操作系统或应用页面的主题风格，如图1所示，视频展示区域需要被设计为圆角矩形的外观，现有技术中的常见做法就是使用cpu对视频帧进行边角的裁减。

参考图2所示，对于圆角区域，需要先在圆角区域生成n个三角形，通过这n个三角形的底边来逼近圆角，三角形n的数量若较少，则视觉观感上就会出现锯齿状的边缘纹路，而三角形n的数量越多，则圆角越平滑，视觉观感上则越不会出现锯齿状的纹路。

为此，为了防止圆角矩形的圆角区域不会出现锯齿状的纹路，从而达到较好的视觉效果，传统技术中通常需要使用cpu资源生成较多的三角形，这样就非常消耗cpu的使用率。

技术实现要素：

基于此，为了实现圆角矩阵的图像展示区域，或者实现任意形状的图像展示区域，并保证较低的处理器和内存的使用率，提高计算机资源的利用率，特提出了一种图像展示区域的形状设置方法。

一种图像展示区域的形状设置方法，包括：

获取图像待展示区域的纹理区域和顶点坐标；

调用图形程序接口，将所述顶点坐标输入至图形处理器gpu的顶点着色器中；

获取与所述顶点着色器对应的像素着色器；

采样目标图像中位置属于所述纹理区域的像素点的像素值，通过所述像素着色器将所述像素值渲染到所述纹理区域中相应的位置。

此外，为了实现圆角矩阵的图像展示区域，或者实现任意形状的图像展示区域，并保证较低的处理器和内存的使用率，提高计算机资源的利用率，还特提出了一种图像展示区域的形状设置装置。

一种图像展示区域的形状设置装置，包括：

纹理区域确定模块，用于获取图像待展示区域的纹理区域和顶点坐标；

顶点着色器处理模块，用于调用图形程序接口，将所述顶点坐标输入至图形处理器gpu的顶点着色器中；

像素着色器获取模块，用于获取与所述顶点着色器对应的像素着色器；

图像渲染模块，用于采样目标图像中位置属于所述纹理区域的像素点的像素值，通过所述像素着色器将所述像素值渲染到所述纹理区域中相应的位置。

实施本发明实施例，将具有如下有益效果：

采用了上述图像展示区域的形状设置方法及装置之后，可通过调用图形处理接口使得cpu向gpu发出指令，指示gpu利用顶点着色器和相应的像素着色器，在顶点坐标限定的区域中按照预输入的纹理区域对目标图像进行绘制，这样就使的gpu通过图形处理接口返回的图像具有与纹理区域对应的形状，从而对图像展示区域的形状进行了设置。上述过程中，图像处理过程由gpu分担，而不需要cpu生成多个三角形来逼近圆弧的曲线，因此降低了cpu的使用率，节省了计算资源。

另外，上述图像展示区域的形状设置方法也可适用于定义成任意形状的纹理区域，由于设置形状的方式并不是采用的多边形的直边近似的方式，因此抗锯齿的效果更加明显。

附图说明

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

其中：

图1为一个实施例中圆角矩阵视频播放界面的示意图；

图2为一个实施例中cpu在矩阵直角处生成三角形逼近圆弧的原理示意图；

图3为一个实施例中一种图像展示区域的形状设置方法的流程示意图；

图4为一个实施例中内切于顶点限定的矩形的圆形的纹理区域的示意图；

图5为一个实施例中cpu通过调用opengl指示gpu工作的示意图；

图6为一个实施例中opengl中的渲染管线的执行过程示意图；

图7为一个实施例中像素着色点根据目标图像绘制纹理区域的原理示意图；

图8为一个实施例中像素着色点根据目标图像绘制纹理区域的流程图；

图9为一个实施例中对边缘区域进行原色到透明的渐变处理的示意图；

图10为一个实施例中一种图像展示区域的形状设置装置的结构示意图；

图11为一个实施例中运行前述图像展示区域的形状设置方法的计算机设备的结构示意图。

具体实施方式

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

为了实现圆角矩阵的图像展示区域，或者实现任意形状的图像展示区域，并保证较低的处理器和内存的使用率，提高计算机资源的利用率，在本实施例中，特提出了一种图像展示区域的形状设置方法，该方法的实现可依赖于计算机程序，该计算机程序可运行于基于冯诺依曼体系的计算机系统之上，该计算机系统包括中央处理器cpu和图形处理器gpu，该计算机程序可以是图片管理程序、视频播放器程序或视频播放器的插件程序，该计算机程序可由中央处理器cpu执行，该计算机程序可通过调用图形处理接口opengl(opengraphicslibrary)控制cpu向gpu发送计算机指令，以指示图形处理器gpu执行相应的图形处理业务。

本发明实施例在实现圆角矩阵的图像展示区域时，不需要使用cpu在矩形角处生成多个三角形，而是通过调用图形处理接口opengl，将绘制圆角矩阵的图像的任务交给gpu来实现，这样就使的gpu分担了cpu的处理任务，从而降低了cpu的使用率。另外，本方法并不限于实现圆角矩阵的图像展示区域，还可实现任意形状的图像展示区域。

具体的，如图3所示，在一个实施例中，以圆形的图像展示区域为例详细阐述上述图像展示区域的形状设置方法，该包括：

步骤s102：获取图像待展示区域的纹理区域和顶点坐标。

为了设置圆形的图像展示区域，先需要确定包含该圆形的图像展示区域的矩形区域。如图4所示，需要设置的图像展示区域为圆形，则需要先确定包含图像展示区域的矩形abcd的位置，然后再在矩形abcd中确定圆形的纹理区域。

也就是说，可先通过顶点坐标确定一个矩形区域，然后再在该矩形区域中定义它的内切圆为纹理区域，该内切圆的纹理区域即为作为图像展示区域的圆形区域。需要说明的是，在其他实施例中，纹理区域也可以是该顶点坐标确定的2区域中包含的任意子区域，并不限定于内切的子区域。

在本实施例中，顶点坐标可由执行本方法的计算机程序根据程序中定义的像素坐标、配置文件中定义的像素坐标或用户输入的像素坐标获得。例如，开发人员可预先通过顶点坐标定义矩形区域或其他多边形区域，并记录在程序文件或配置文件中，当执行本方法的计算机程序在运行时，通过读取程序文件或配置文件即可得到顶点的位置。顶点坐标的作用是用于指示gpu对顶点坐标限定的区域进行坐标转换和像素渲染。

顶点坐标确定的矩形区域中的纹理区域也可由坐标来定义，如上例中，对于圆形的像素展示区域，可定义原点的坐标和半径，执行本方法的计算机程序通过该原点的坐标和半径即可确定纹理区域。

步骤s104：调用图形程序接口，将顶点坐标输入至图形处理器gpu的顶点着色器中。

步骤s106：获取与顶点着色器对应的像素着色器。

图形程序接口opengl(opengraphicslibrary)被当作客户端-服务器系统来实现的，应用程序是客户端，图形硬件厂商提供的opengl实现是服务器。如图5所示，客户端程序需要调用opengl的接口实现图形的渲染，那么opengl命令和数据会缓存在内存ram(randomaccessmemory)中，在一定条件下，会将这些命令和数据通过cpu时钟发送到显存vram(videorandomaccessmemory)，在gpu的控制下，使用vram中的数据和命令，完成图形的渲染，并将结果存入帧缓冲区中，帧缓冲区中的帧最终会被发送到显示器上，显示出结果。也就是说，opengl为应用程序访问gpu资源的调用接口。

着色器(shader)为opengl中定义的概念，主要包括顶点着色器(vertexshader)和像素着色器(pixelshader)。顶点着色器可以理解为如何处理顶点、法线等的数据的小程序；像素着色器可以理解为为如何处理光、阴影、遮挡、环境等等对物体表面的影响，最终生成一副图像的小程序。若需要渲染某个区域的图像，则需要先创建顶点着色器程序来确定渲染的区域的范围和空间变换后的形状(3d转2d)，然后再创建与该顶点着色器对应的像素着色器来对该区域中的光、阴影、遮挡、环境等纹理特征进行渲染。开发人员可通过opengl着色器语言glsl(openglshadinglanguage)来定义顶点着色器程序和像素着色器程序。

具体的参考图6所示，图6展示了调用opengl的渲染管线(graphicspipeline)的全过程，渲染管线为gpu进行图像渲染的一个流程，当gpu对显示界面上的一个独立区域进行图像渲染时，需要先将顶点坐标输入到顶点着色器中，确定图像渲染的范围，期间会经过图元装配(primitiveassembly)和光栅化(或称像素化，rasterization)的过程，然后生成与该渲染范围的像素着色器。然后再将纹理特征texture输入到像素着色器中，使得像素着色器根据该纹理特征对该渲染范围内的像素点进行渲染，最终生成图像帧，通过opengl接口返回给调用的应用程序。

也就是说，执行本方法的计算机程序可先调用opengl的顶点着色器程序确定需要gpu处理进行渲染的背景区域(可以是矩形的也可以是多边形的)，然后再通过调用与该顶点着色器对应的像素着色器程序根据前述确定的纹理区域进行渲染，而渲染的内容即为需要展示的图像。

步骤s108：采样目标图像中位置属于纹理区域的像素点的像素值，通过像素着色器将像素值渲染到纹理区域中相应的位置。

参考图4和图7所示，也就是说，先确定了需要对矩形abcd进行渲染，矩形abcd中有圆形的纹理区域，那么像素着色器在渲染矩形abcd中的像素点时，若像素点属于纹理区域，则将需要展示的目标图像中对应的像素点的像素值设置到该纹理区域中相应的位置处。而对于顶点坐标限定的区域中除了纹理区域以外的像素位置，可将其设置为透明。

具体的，可参考图8所示，通过像素着色器遍历顶点坐标划定的区域中的像素点，在遍历到的像素点属于纹理区域时，采集目标图像在该像素点的位置的像素值，将像素点的颜色设置为该像素值；在遍历到的像素点不属于纹理区域时，将遍历到的像素点设置为透明。

也就是说，在前例中，顶点坐标划定的区域为矩形abcd(正方形)，纹理区域为以矩形abcd的中点为圆心的内切圆，则着色器遍历矩形abcd中的像素点，当遍历到的像素点的位置属于内切圆时，则获取目标图像中相同的位置的像素值。如图7中，当遍历到像素位置e时，由于e位于内切圆的圆内，因此，可将目标图像对应位置e’的像素值设置到像素位置e处。当遍历到像素位置f时，由于f位于内切圆的圆外，因此，对于像素位置f，并不会将目标图像对应的f’的像素值设置到f处，像素位置f处即为透明的颜色。

按照上述方式渲染图像后，像素着色器只根据目标图像填充了顶点坐标限定的区域中的圆形的纹理区域，而对于顶点坐标限定的其他区域均为透明，视觉效果上即为圆形的图像展示区域。

进一步的，图像展示区域的形状还可以设置成任意形状，具体的，可获取输入的纹理图片，获取纹理图片的中的纹理区域，根据纹理区域确定顶点坐标。也就是说，若希望图像展示区域的形状为不规则图形，例如娃娃头形状，则可先输入一副具有娃娃头形状纹理的图片，例如背景为白色，娃娃头形状部分为黑色的图片，然后通过边缘检测或轮廓检测提取到该娃娃头形状的纹理区域，再根据该娃娃头形状的纹理区域确定顶点坐标，只需要该顶点坐标限定的矩形包含该娃娃头形状的纹理区域即可。优选的，在确定顶点坐标时，尽量使得娃娃头形状的纹理区域内切于顶点坐标限定的区域，这样可减少像素着色器遍历的像素点的数量。

进一步的，在对目标图像进行拉伸或缩放处理，以使目标图像覆盖顶点坐标确定的区域。

也就是说，若目标图像较小，则将其放大或拉伸，使得纹理区域能够充分展示目标图像，而不会出现像素着色器遍历像素点时，像素点位置超出了目标图像的情况，相应的，若目标图像较大，则将其缩小或拉伸，使得纹理区域能够展示目标图像中更多的内容。

进一步的，为了更好的减少图像展示区域边缘的锯齿效果，在通过所述像素着色器将所述像素值渲染到所述纹理区域中相应的位置之后还可确定与纹理区域对应的边缘区域；对所述边缘区域进行原色到透明的渐变处理。

参考图9所示，在上例的圆形的图像展示区域中，纹理区域定义为以abcd的中心为圆心，半径为r1的圆，在本实施例中，还可设置以abcd的中心为圆心，半径为r2的圆，r2和r1之间的环形区域即为于纹理区域r1对应的边缘区域，对该边缘区域进行原色到透明的渐变处理，即可将图像展示区域的边缘轮廓模糊化，从而使得锯齿效果变得不明显。渐变处理的方法可具体为alpha渐变采样处理，这样的实现带来的性能开销最低。

进一步的，在一个应用场景中，图像展示区域可用于展示视频帧，则在设置了顶点着色器和像素着色器之后，可依次提取目标视频中的视频帧，将提取的视频帧作为目标图像，对于一目标图像，执行采样目标图像中位置属于所述纹理区域的像素点的像素值，通过所述像素着色器将所述像素值渲染到所述纹理区域中相应的位置。

也就是说，在图像展示区域展示每一帧图像时，均可使用像素着色器提取图像与纹理区域映射的部分的像素点的像素值进行渲染，这样就实现了在不规则的图像展示区域中播放视频的功能。

此外，为了实现圆角矩阵的图像展示区域，或者实现任意形状的图像展示区域，并保证较低的处理器和内存的使用率，提高计算机资源的利用率，在一个实施例中，如图10所示，还提出了一种图像展示区域的形状设置装置，包括纹理区域确定模块102、顶点着色器处理模块104、像素着色器获取模块106以及图像渲染模块108，其中：

纹理区域确定模块102，用于获取图像待展示区域的纹理区域和顶点坐标；

顶点着色器处理模块104，用于调用图形程序接口，将所述顶点坐标输入至图形处理器gpu的顶点着色器中；

像素着色器获取模块106，用于获取与所述顶点着色器对应的像素着色器；

图像渲染模块108，用于采样目标图像中位置属于所述纹理区域的像素点的像素值，通过所述像素着色器将所述像素值渲染到所述纹理区域中相应的位置。

可选的，在一个实施例中，图像渲染模块108还用于通过所述像素着色器遍历所述顶点坐标划定的区域中的像素点，在遍历到的像素点属于所述纹理区域时，采集目标图像在该像素点的位置的像素值，将所述像素点的颜色设置为该像素值。

可选的，在一个实施例中，图像渲染模块108还用于对所述目标图像进行拉伸或缩放处理，以使所述目标图像覆盖所述顶点坐标确定的区域。

可选的，在一个实施例中，如图10所示，上述装置还包括边缘区域处理模块110，用于确定与所述纹理区域对应的边缘区域；对所述边缘区域进行原色到透明的渐变处理。

可选的，在一个实施例中，纹理区域确定模块102还用于获取输入的纹理图片，获取所述纹理图片的中的纹理区域，根据所述纹理区域确定顶点坐标。

实施本发明实施例，将具有如下有益效果：

采用了上述图像展示区域的形状设置方法及装置之后，可通过调用图形处理接口使得cpu向gpu发出指令，指示gpu利用顶点着色器和相应的像素着色器，在顶点坐标限定的区域中按照预输入的纹理区域对目标图像进行绘制，这样就使的gpu通过图形处理接口返回的图像具有与纹理区域对应的形状，从而对图像展示区域的形状进行了设置。上述过程中，图像处理过程由gpu分担，而不需要cpu生成多个三角形来逼近圆弧的曲线，因此降低了cpu的使用率，节省了计算资源。

另外，上述图像展示区域的形状设置方法也可适用于定义成任意形状的纹理区域，由于设置形状的方式并不是采用的多边形的直边近似的方式，因此抗锯齿的效果更加明显。

在上述实施例中，可以全部或部分的通过软件、硬件、固件或者其任意组合来实现。当使用软件程序实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或者数据中心通过有线(例如同轴电缆、光纤、数字用户线(dsl))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或者数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，dvd)、或半导体介质(例如固态硬盘solidstatedisk(ssd))等。

在一个实施例中，如图11所示，图11展示了一种运行上述图像展示区域的形状设置方法的基于冯诺依曼体系的计算机系统的终端。该计算机系统可以是智能手机、平板电脑、掌上电脑、笔记本电脑或个人电脑等终端设备。具体的，可包括通过系统总线连接的外部输入接口1001、处理器1002、存储器1003和输出接口1004。其中，外部输入接口1001可选的可至少包括网络接口10012。存储器1003可包括外存储器10032(例如硬盘、光盘或软盘等)和内存储器10034。输出接口1004可至少包括显示屏10042等设备。

在本实施例中，本方法的运行基于计算机程序，该计算机程序的程序文件存储于前述基于冯诺依曼体系的计算机系统的外存储器10032中，在运行时被加载到内存储器10034中，然后被编译为机器码之后传递至处理器1002中执行，从而使得基于冯诺依曼体系的计算机系统中形成逻辑上的纹理区域确定模块102、顶点着色器处理模块104、像素着色器获取模块106、图像渲染模块108边缘区域处理模块110。且在上述图像展示区域的形状设置方法执行过程中，输入的参数均通过外部输入接口1001接收，并传递至存储器1003中缓存，然后输入到处理器1002中进行处理，处理的结果数据或缓存于存储器1003中进行后续地处理，或被传递至输出接口1004进行输出。

具体的，上述处理器1002还用户执行如下操作：

获取图像待展示区域的纹理区域和顶点坐标；

调用图形程序接口，将所述顶点坐标输入至图形处理器gpu的顶点着色器中；

获取与所述顶点着色器对应的像素着色器；

采样目标图像中位置属于所述纹理区域的像素点的像素值，通过所述像素着色器将所述像素值渲染到所述纹理区域中相应的位置。

可选的，处理器1002还用于通过所述像素着色器遍历所述顶点坐标划定的区域中的像素点，在遍历到的像素点属于所述纹理区域时，采集目标图像在该像素点的位置的像素值，将所述像素点的颜色设置为该像素值。

可选的，处理器1002还用于对所述目标图像进行拉伸或缩放处理，以使所述目标图像覆盖所述顶点坐标确定的区域。

可选的，处理器1002还用于确定与所述纹理区域对应的边缘区域；

对所述边缘区域进行原色到透明的渐变处理。

可选的，处理器1002还用于获取输入的纹理图片，获取所述纹理图片的中的纹理区域，根据所述纹理区域确定顶点坐标。

可选的，处理器1002还用于依次提取目标视频中的视频帧，将提取的视频帧作为目标图像，对于一目标图像，执行所述：采样目标图像中位置属于所述纹理区域的像素点的像素值，通过所述像素着色器将所述像素值渲染到所述纹理区域中相应的位置。

以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。