CN114723865A - 圆角方形框的渲染方法及设备、地图渲染方法 - Google Patents

Abstract

本公开实施例公开了一种圆角方形框的渲染方法及设备、地图渲染方法，所述方法包括：将待渲染的圆角方形框划分成多个区域，包括：圆角边沿区域、四边形边沿区域以及四边形中间区域；圆角边沿区域的形状是半径为预设圆半径值的圆的一部分、且小于或等于四分之一圆，四边形边沿区域位于两个圆角边沿区域之间，四边形中间区域被圆角边沿区域和四边形边沿区域所包围；对多个区域中的每一个区域进行三角剖分，得到剖分后的多个三角形顶点的渲染位置；基于三角形顶点距离四边形中间区域的边沿的最短距离对三角形顶点赋予像素半径值；将三角形顶点的渲染位置以及像素半径值传送至GPU，以便GPU基于三角形顶点的渲染位置以及像素半径值渲染圆角方形框。

Description

圆角方形框的渲染方法及设备、地图渲染方法

技术领域

本公开涉及图像技术领域，具体涉及一种圆角方形框的渲染方法及设备、地图渲染方法。

背景技术

随着技术的发展，应用软件的种类越来越多，而应用软件界面的可视化效果也越来越受重视。例如，在软件应用中展示文字或者图标时，会通过加上方形背景框来优化视觉效果。而方形背景框可以做各种样式设计，比如纯色填充、图案填充、加描边、圆角等。

已有技术对于圆角方形背景框的渲染过程，通常是事先准备好圆角背景框的图案(比如由美工人员利用画图软件画好)，并将该图案直接绘制为背景，然后再该图案上添加其他图案，比如文字或图标等。但是这种方案无法控制圆角半径值与背景框尺寸的比例，在圆角方形背景框的长宽被拉伸之后，圆角会变形，也即圆角变形后不再是正圆形的四分之一。

因此，针对上述技术问题，需要提出一种解决方案，能够灵活更改圆角方形背景框的尺寸、圆角大小等。

发明内容

本公开实施例提供一种圆角方形框的渲染方法及设备、地图渲染方法。

第一方面，本公开实施例中提供了一种圆角方形框的渲染方法，包括：

将待渲染的圆角方形框划分成多个区域，所述多个区域包括：圆角边沿区域、四边形边沿区域以及四边形中间区域；所述圆角边沿区域的形状是半径为预设圆半径值的圆的一部分、且小于或等于四分之一圆，所述四边形边沿区域位于两个圆角边沿区域之间，所述四边形中间区域被所述圆角边沿区域和所述四边形边沿区域所包围；

对所述多个区域中的每一个区域进行三角剖分，得到剖分后的多个三角形顶点的渲染位置；

基于所述三角形顶点距离所述四边形中间区域的边沿的最短距离对所述三角形顶点赋予像素半径值；其中，位于所述圆角方形框的边沿的所述三角形顶点的像素半径值为所述预设圆半径值，而位于所述四边形中间区域的边沿的所述三角形顶点的像素半径值为0；

将所述三角形顶点的所述渲染位置以及所述像素半径值传送至GPU，以便所述GPU基于所述三角形顶点的所述渲染位置以及所述像素半径值渲染所述圆角方形框。

进一步地，对所述多个区域中的每一个区域进行三角剖分，得到剖分后的多个三角形顶点的渲染位置，包括：

将所述四边形边沿区域和所述四边形中间区域分别剖分成两个直角三角形，得到所述两个直角三角形的三角形顶点的渲染位置；

将所述圆角边沿区域剖分成边长为所述预设圆半径值的多个等边三角形，得到所述多个等边三角形的三角形顶点的渲染位置。

进一步地，将所述三角形顶点的所述渲染位置以及所述像素半径值传送至GPU，包括：

将所述三角形顶点的渲染位置传送至所述GPU的三角形顶点着色器；

将所述三角形顶点的像素半径值传送至所述GPU的像素着色器。

进一步地，将所述三角形的三角形顶点以及所述像素半径值传送至GPU之后，所述方法还包括：

在所述GPU中启动图形优化程序，以使所述图形优化程序基于所述GPU输出的所述圆角方形框中每个像素的像素半径值，对所述圆角方形框边沿的所述像素进行柔性插值染色；所述像素的像素半径值为所述像素至所述四边形中间区域的边沿的最短距离。

进一步地，基于所述GPU输出的所述圆角方形框中每个像素的像素半径值，对所述圆角方形框边沿的所述像素进行柔性插值染色，包括：

基于所述像素半径值、内边沿半径值和外边沿半径值确定所述像素为内部像素的概率以及所述像素的透明度系数；所述内边沿半径值和所述外边沿半径值均小于所述像素半径值，所述内边沿半径值小于所述外边沿半径值；

基于所述内部像素的概率、所述像素的透明度系数调整渲染所述圆角方形框所使用的全局预设颜色，以便基于调整后的所述全局预设颜色对所述圆角方形框中的所述像素进行着色。

进一步地，基于所述像素半径值、内边沿半径值和外边沿半径值确定所述像素为内部像素的概率以及所述像素的透明度系数，包括：

基于所述像素半径值与所述内边沿半径值r1的大小关系确定所述像素为内部像素的概率；所述像素半径值小于或等于r1-delta时，所述像素为内部像素的概率为1，所述像素半径值大于或等于r1+delta时，所述像素为内部像素的概率为0，所述像素半径值位于(r1-delta，r1+delta)区间范围时，所述像素为内部像素的概率在(0，1)区间范围之内，其中，r1为小于所述预设圆半径值的正数，delta为小于一个像素宽度的正数；

基于所述像素半径值与外边沿半径值r2的大小关系确定所述像素的透明系数；所述像素半径值大于或等于r2-delta时，所述像素的透明系数为表示完全透明的系数0，所述像素半径值小于或等于r2-delta时，所述像素的透明系数为表示不透明的系数1，所述像素半径值位于(r2-delta，r2+delta)区间范围时，所述像素的透明系数在(0，1)区间范围之内，其中，r2为大于所述内边沿半径值且小于所述预设圆半径值的正数。

进一步地，所述全局预设颜色包括内部颜色以及描边颜色；基于所述内部像素的概率、所述像素的透明度系数调整渲染所述圆角方形框所使用的全局预设颜色，以便基于调整后的所述全局预设颜色对所述圆角方形框中的所述像素进行着色，包括：

基于所述像素为内部像素的概率、所述内部颜色以及所述描边颜色计算所述像素的处理后颜色；

基于所述像素的透明系数以及所述GPU输出的原始透明度计算所述像素的处理后透明度；

基于所述像素的处理后颜色以及所述像素的处理后透明度渲染所述圆角方形框中的所述像素。

第二方面，本发明实施例中提供了一种地图渲染方法，其中，包括：

获取地图渲染数据；

基于所述地图渲染数据渲染地图时，基于所述第一方面所述的方法为地图上的显示对象添加形状为圆角方形框的背景。

第三方面，本发明实施例中提供了一种圆角方形框的渲染设备，其中，包括：CPU和GPU；

所述CPU将待渲染的圆角方形框划分成多个区域，对所述多个区域中的每一个区域进行三角剖分，得到多个三角形的三角形顶点，对所述三角形中的各个三角形顶点赋予像素半径值，以及将所述三角形的三角形顶点以及所述像素半径值传送至GPU；其中所述多个区域包括：四个圆角边沿区域、位于所述四个圆角边沿区域两两之间的四个四边形边沿区域以及位于所述圆角方形框中间的一个四边形中间区域；所述圆角边沿区域的形状是半径为预设圆半径值的四分之一圆；所述三角形的三角形顶点分别位于所述圆角方形框的边沿以及所述四边形中间区域的边沿；位于所述圆角方形框的边沿的所述三角形顶点的半径值为预设圆半径值，位于所述四边形中间区域的边沿的所述三角形顶点的半径值为0；

所述GPU基于所述三角形的三角形顶点以及所述像素半径值绘制所述圆角方形框。

进一步地，所述GPU基于所述圆角方形框中每个像素的像素半径值，对所述圆角方形框边沿的所述像素进行柔性插值染色；所述像素的像素半径值为所述像素至所述四边形中间区域的边沿的最短距离。

第四方面，本发明实施例中提供了一种圆角方形框的渲染装置，其中，包括：

区域划分模块，被配置为将待渲染的圆角方形框划分成多个区域，所述多个区域包括：圆角边沿区域、四边形边沿区域以及四边形中间区域；所述圆角边沿区域的形状是半径为预设圆半径值的圆的一部分、且小于或等于四分之一圆，所述四边形边沿区域位于两个圆角边沿区域之间，所述四边形中间区域被所述圆角边沿区域和所述四边形边沿区域所包围；

三角剖分模块，被配置为对所述多个区域中的每一个区域进行三角剖分，得到剖分后的多个三角形顶点的渲染位置；

半径值赋予模块，被配置为基于所述三角形顶点距离所述四边形中间区域的边沿的最短距离对所述三角形顶点赋予像素半径值；其中，位于所述圆角方形框的边沿的所述三角形顶点的像素半径值为所述预设圆半径值，而位于所述四边形中间区域的边沿的所述三角形顶点的像素半径值为0；

传送模块，被配置为将所述三角形顶点的所述渲染位置以及所述像素半径值传送至GPU，以便所述GPU基于所述三角形顶点的所述渲染位置以及所述像素半径值渲染所述圆角方形框。

第五方面，本发明实施例中提供了一种地图渲染装置，其中，包括：

获取模块，被配置为获取地图渲染数据；

添加模块，被配置为基于所述地图渲染数据渲染地图时，基于所述第四方面所述的装置为地图上的显示对象添加形状为圆角方形框的背景。

所述功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。所述硬件或软件包括一个或多个与上述功能相对应的模块。

在一个可能的设计中，上述装置的结构中包括存储器和处理器，所述存储器用于存储一条或多条支持上述装置执行上述对应方法的计算机指令，所述处理器被配置为用于执行所述存储器中存储的计算机指令。上述装置还可以包括通信接口，用于上述装置与其他设备或通信网络通信。

第六方面，本公开实施例提供了一种电子设备，包括存储器、处理器以及存储在存储器上的计算机程序，其中，所述处理器执行所述计算机程序以实现上述任一方面所述的方法。

第七方面，本公开实施例提供了一种计算机可读存储介质，用于存储上述任一装置所用的计算机指令，该计算机指令被处理器执行时用于实现上述任一方面所述的方法。

第八方面，本公开实施例提供了一种计算机程序产品，其包含计算机指令，该计算机指令被处理器执行时用于实现上述任一方面所述的方法。

本公开实施例提供的技术方案可以包括以下有益效果：

本公开实施例在渲染圆角方形框时，基于待渲染的圆角方形框的尺寸将其划分成多个区域，该多个区域可以包括圆角边沿区域、四边形边沿区域和四边形中间区域；对每个区域进行三角形剖分，得到多个三角形的三角形顶点的渲染位置，为每个三角形的三角形顶点赋予像素半径值，每个三角形的三角形顶点以及像素半径值均传入GPU后，由GPU基于三角形的三角形顶点的渲染位置以及像素半径值渲染圆角方形框。

通过上述方式，将圆角方形框剖分成多个三角形的形式，进而送入GPU进行绘制，GPU可以基于接收到的三角形顶点的渲染位置以及像素半径值可以自动计算出各个三角形中各个像素的像素半径值，进而基于像素半径值在相应位置处渲染各个像素，最终绘制得到多个三角形，进而该多个三角形拼接形成了圆角方形框。通过这种方式，可以提高圆角方形框的渲染性能，并且能够灵活更改圆角方形框的尺寸。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

结合附图，通过以下非限制性实施方式的详细描述，本公开的其它特征、目的和优点将变得更加明显。在附图中：

图1示出根据本公开一实施方式的圆角方形框的渲染方法的流程图；

图2示出根据本公开一实施方式中圆角方形框被划分后的区域效果示意图；

图3示出根据本公开一实施方式中具有描边效果的圆角方形框的显示效果示意图；

图4示出了根据本公开一实施方式中GPU渲染的三角形存在边沿锯齿的效果示意图；

图5示出根据本公开一实施方式的地图渲染方法的流程图；

图6示出根据本公开一实施方式的圆角方形框作为地图上图标背景的效果示意图；

图7示出根据本公开一实施方式的圆角方形框的渲染设备的结构框图；

图8是适于用来实现根据本公开实施方式的圆角方形框的渲染方法和/或地图渲染方法的电子设备的结构示意图。

具体实施方式

下文中，将参考附图详细描述本公开的示例性实施方式，以使本领域技术人员可容易地实现它们。此外，为了清楚起见，在附图中省略了与描述示例性实施方式无关的部分。

在本公开中，应理解，诸如“包括”或“具有”等的术语旨在指示本说明书中所公开的特征、数字、步骤、行为、部件、部分或其组合的存在，并且不排除一个或多个其他特征、数字、步骤、行为、部件、部分或其组合存在或被添加的可能性。

另外还需要说明的是，在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本公开。

下面通过具体实施例详细介绍本公开实施例的细节。

图1示出根据本公开一实施方式的圆角方形框的渲染方法的流程图。如图1所示，该圆角方形框的渲染方法包括以下步骤：

在步骤S101中，将待渲染的圆角方形框划分成多个区域，所述多个区域包括：圆角边沿区域、四边形边沿区域以及四边形中间区域；所述圆角边沿区域的形状是半径为预设圆半径值的圆的一部分、且小于或等于四分之一圆，所述四边形边沿区域位于两个圆角边沿区域之间，所述四边形中间区域被所述圆角边沿区域和所述四边形边沿区域所包围；

在步骤S102中，对所述多个区域中的每一个区域进行三角剖分，得到剖分后的多个三角形顶点的渲染位置；

在步骤S103中，基于所述三角形顶点距离所述四边形中间区域的边沿的最短距离对所述三角形顶点赋予像素半径值；其中，位于所述圆角方形框的边沿的所述三角形顶点的像素半径值为所述预设圆半径值，而位于所述四边形中间区域的边沿的所述三角形顶点的像素半径值为0；

在步骤S104中，将所述三角形顶点的所述渲染位置以及所述像素半径值传送至GPU，以便所述GPU基于所述三角形顶点的所述渲染位置以及所述像素半径值渲染所述圆角方形框。

本实施例中，该圆角方形框的渲染方法可以在客户端的CPU上执行。为了能够自动渲染圆角方形框，并且能够灵活更改圆角方形框的尺寸，本公开实施例中将待渲染的圆角方形框基于其尺寸划分成多个区域。

该多个区域包括边沿区域和中间区域，该边沿区域包括圆角边沿区域和四边形边沿区域，圆角方形框的每一个角可以分别对应一个或多个圆角边沿区域，圆角边沿区域的形状可以是半径为预设圆半径值的圆的一部分，在圆角方形框的一个角对应一个圆角边沿区域时，该圆角边沿区域是四分之一圆，且半径值为预设圆半径值。

四边形边沿区域位于两个圆角边沿区域之间，四边形边沿区域可以包括多个，每个四边形边沿区域与圆角边沿区域的半径值对应的边长为预设圆半径值，圆角边沿区域和四边形边沿区域包围中间区域。在一些实施例中，两个圆角边沿区域之间可以有一个或多个四边形边沿区域。

中间区域也可以是四边形，且该四边形中间区域为圆角方形框中除边沿区域之外的区域。中间区域可以是一个完整的区域，也可以是通过进一步划分后的多个区域。在一些实施例中，中间区域可以被划分成多个四边形中间区域。

在将圆角方形框划分成多个区域后，针对每个区域可以进行三角形剖分，一种剖分方式是：将圆角边沿区域剖分成多个三角形区域，以近似表示该圆角边沿区域对应的一部分圆，而四边形边沿区域和四边形中间区域中的每一个可以直接被剖分成两个三角形。当然，可以理解的是，四边形边沿区域和四边形中间区域中的每一个也可以被剖分为多于两个的三角形，具体可以根据实际需要而定，在此不做具体限制。

将圆角方形框进行区域划分，并将每个区域剖分成三角形后，可以获得每个三角形的三角形顶点的渲染位置，可以理解的是每个三角形有三个三角形顶点，且三角形顶点的渲染位置可以是在软件应用界面上的相对位置。可以理解的是，三角形顶点的渲染位置可以基于圆角方形框的尺寸、区域划分方式以及圆角方形框的渲染位置确定，圆角方形框和圆角方形框的渲染位置可以在渲染任务中通过参数指定。

在一些实施例中，经过三角剖分后，得到的三角形顶点位于圆角方形框的边沿和/或中间区域的边沿。

在一些实施例中，圆角边沿区域剖分后得到的三角形的其中两个三角形顶点位于圆角边沿区域的弧线边沿，且三角形为等边三角形，两条相等的边为预设圆半径值，因此三角形的另一个三角形顶点位于整个中间区域(如果中间区域被划分成一个四边形中间区域时，整个中间区域即为该四边形中间区域，如果中间区域被划分成多个四边形中间区域时，该整个中间区域为该多个四边形中间区域组成的完整区域)的边沿，在一些实施例中，另一个三角形顶点与中间区域的其中一个顶点重合。当然可以理解的是，圆角边沿区域也可以通过别的方式进行三角剖分，不限于上述方式。

在一些实施例中，四边形边沿区域的四个三角形顶点中的两个三角形顶点位于圆角方形框的边沿，而另外两个三角形顶点位于整个中间区域的边沿，四边形边沿区域中的一个或多个三角形顶点可以与中间区域中的一个或多个三角形顶点重合。因此四边形边沿区域的其中两条平行边的长度与预设圆半径值相等。当然可以理解的是，四边形边沿区域也可以通过别的方式进行三角剖分，不限于上述方式。

在一些实施例中，四边形中间区域的四个三角形顶点可以分别位于完整中间区域的边沿。当然可以理解的是，四边形中间区域也可以通过别的方式进行三角剖分，不限于上述方式。

图2示出根据本公开一实施方式中圆角方形框被划分后的区域效果示意图。如图2所示，圆角方形框被分为9个区域，包括8个边沿区域和一个中间区域，8个边沿区域包括4个圆角边沿区域和4个四边形边沿区域，四边形边沿区域位于两个圆角边沿区域之间，圆角方形框的四个角对应圆角边沿区域，每个圆角边沿区域对应一个四分之一圆。其中，边沿区域和中间区域中的实线表示将该多个区域分别进行三角剖分后得到的三角化方案，圆角边沿区域使用多个三角形来近似四分之一圆，而四边形边沿区域和四边形中间区域则分别被剖分为两个三角形。W表示圆角方形框的宽，H表示圆角方形框的高，R是预设圆半径值。

在获得剖分得到的三角形顶点的渲染位置后，还可以对三角形中的每个三角形顶点赋予像素半径值，该像素半径值即为该三角形顶点至完整中间区域边沿的最短距离。例如，圆角边沿区域中远离圆角方形框边沿也即位于完整中间区域边沿的三角形顶点的像素半径值为0，而圆角边沿区域中位于圆角方形框边沿的三角形顶点的像素半径值为预设圆半径值，同样，四边形边沿区域中远离圆角方形框边沿也即位于完整中间区域边沿的三角形顶点的像素半径值为0，而四边形边沿区域中位于圆角方形框边沿的三角形顶点的像素半径值为预设圆半径值；四边形中间区域中的三角形顶点的像素半径值为0。

在对圆角方形框进行了区域划分，进而对每个区域进行了三角剖分后，可以确定每个三角形顶点的渲染位置，基于三角形顶点距离中间区域边沿的最短距离可以为每个三角形顶点赋予像素半径值。

之后，可以将每个三角形顶点的渲染位置以及该三角形顶点的像素半径值传送至GPU，GPU可以依据三角形顶点的渲染位置以及像素半径值渲染三角形顶点对应像素以及三角形顶点定义的三角形内部的像素。

GPU在渲染过程中，会依据所传入的三角形顶点渲染位置以及像素半径值自动计算三角形内部每个像素的像素半径值，进而还可以基于每个像素的像素半径值确定每个像素的渲染位置，从而渲染出整个三角形。GPU将所传入三角形顶点定义的多个三角形渲染完成后，该多个三角形进行拼接形成了该圆角方形框的图形。

本公开实施例，在渲染圆角方形框时，基于待渲染的圆角方形框的尺寸将其划分成多个区域，该多个区域可以包括圆角边沿区域、四边形边沿区域和四边形中间区域；对每个区域进行三角形剖分，得到多个三角形的三角形顶点的渲染位置，为每个三角形的三角形顶点赋予像素半径值，每个三角形的三角形顶点以及像素半径值均传入GPU后，由GPU基于三角形的三角形顶点的渲染位置以及像素半径值渲染圆角方形框。

通过上述方式，将圆角方形框剖分成多个三角形的形式，进而送入GPU进行绘制，GPU可以基于接收到的三角形顶点的渲染位置以及像素半径值可以自动计算出各个三角形中各个像素的像素半径值，进而基于像素半径值在相应位置处渲染各个像素，最终绘制得到多个三角形，进而该多个三角形拼接形成了圆角方形框。通过这种方式，可以提高圆角方形框的渲染性能，并且在需要更改圆角方形框的尺寸时，只需要根据更改后的尺寸获得更改后的三角形顶点的渲染位置和/或像素半径值后，再次由GPU自动渲染，能够做到灵活更改圆角方形框的尺寸、圆角大小范围等。

在本实施例的一个可选实现方式中，步骤S102，即对所述多个区域中的每一个区域进行三角剖分，得到剖分后的多个三角形顶点的渲染位置的步骤，进一步包括以下步骤：

将所述四边形边沿区域和所述四边形中间区域分别剖分成两个直角三角形，得到所述两个直角三角形的三角形顶点的渲染位置；

将所述圆角边沿区域剖分成边长为所述预设圆半径值的多个等边三角形，得到所述多个等边三角形的三角形顶点的渲染位置。

该可选的实现方式中，在对四边形边沿区域和四边形边沿区域进行剖分时，可以直接将四边形的两个对角顶点相连的方式进行剖分，将其划分成两个直角三角形，每个直角三角形的三个顶点为四边形四个顶点中的其中三个，也即两个直角三角形的三角形顶点的渲染位置即为四边形的顶点位置。

对圆角边沿区域进行剖分时，可以从圆角边沿区域的弧线边沿选取多个点，将选取的多个点中两两相邻的点以及该圆角边沿区域对应的圆心作为剖分后的三个三角形顶点，且剖分后的三角形均为等边三角形，且相等边为预设圆半径值。在一些实施例中，从圆角边沿区域的弧形边沿所选取的多个点可以是等距离选取，也可以是非等距离选取，如果是等距离选取，则剖分得到的多个三角形大小相同。

在本实施例的一个可选实现方式中，步骤S104，即将所述三角形顶点的所述渲染位置以及所述像素半径值传送至GPU的步骤，进一步包括以下步骤：

将所述三角形顶点的渲染位置传送至所述GPU的三角形顶点着色器；

将所述三角形顶点的像素半径值传送至所述GPU的像素着色器。

该可选的实现方式中，每个三角形的三个三角形顶点作为一组顶点数据传送至三角形顶点着色器中，而该三角形的像素半径值作为属性数据传送至像素着色器，由GPU的三角形顶点着色器和像素着色器自动绘制三角形顶点以及三角形顶点限定的三角形上各点对应的像素，此外，GPU还可以计算每个像素的像素半径值，基于像素半径值以及三角形顶点的渲染位置可以确定每个像素相对于三角形顶点的相对位置，基于该相对位置可以基于参数设定等对每个像素赋予不同的颜色、透明度等，进而能够实现描边粗细的调整等。

在本实施例的一个可选实现方式中，步骤S104，即将所述三角形的三角形顶点以及所述像素半径值传送至GPU之后，所述方法进一步还包括以下步骤：

在所述GPU中启动图形优化程序，以使所述图形优化程序基于所述GPU输出的所述圆角方形框中每个像素的像素半径值，对所述圆角方形框边沿的所述像素进行柔性插值染色；所述像素的像素半径值为所述像素至所述四边形中间区域的边沿的最短距离。

该可选的实现方式中，GPU在基于三角形顶点的渲染位置以及像素半径值渲染三角形图形时，还会自动计算三角形中除三角形顶点之外的其他像素的像素半径值，其他像素的像素半径值亦为该其他像素至中间区域的边沿的最短距离。

为了达到边沿抗锯齿效果，本公开实施例在GPU中启动一图形优化程序，该图形优化程序获取GPU中的顶点着色器和像素着色器自动计算出的各像素的像素半径值，并基于该像素半径值对圆角方形框边沿的像素进行柔性插值染色。

图3示出根据本公开一实施方式中具有描边效果的圆角方形框的显示效果示意图。如图3所示，为了体现柔性插值染色方案的细节，图3中保留了图2中体现三角形剖分方案中各区域内的实线。可以看到填充颜色的范围比圆角方形框的完整区域有所收缩，这是为了实现边沿抗锯齿方案，下文中将会详细描述。

本公开实施例利用GPU来实现边沿抗锯齿和描边效果。可以将三角化剖分方案中的实线称为“三角化线段”，所有的三角化线段的端点作为三角形顶点传给GPU的顶点着色器，每一个三角形顶点除了包含在显示界面中的位置之外，包括一个像素半径值。该像素半径值是范围从0到1的浮点数。中间区域的四个顶点的像素半径值被设为0，其他顶点都在圆角方形框的外边沿上，其像素半径值被设为预设圆半径值R。将三角形顶点传递给GPU的顶点着色器(vertex shader)，而像素半径值输出到像素着色器(fragment shader)，经过光栅化后，每一个被着色的像素都拥有一个插值后的像素半径值，中间区域的每个像素的像素半径值均为0；而圆角边沿区域和四边形边沿区域的每个像素的像素半径值随着其与圆角方形框的外边沿的距离的缩小而线性增大，也即越接近中间区域，像素的像素半径值越接近0，越接近圆角方形框的外边沿，像素半径值越接近R。

为了描述方便，可以将中间区域的边沿称为参考边，图3将参考边用粗线做了突出。经过上述操作，圆角方形框中的每个像素都拥有一个像素半径值，对于圆角边沿区域和四边形边沿区域中像素的像素半径值，其含义是像素与参考边的最短距离，而中间区域中像素的像素半径值等于0。

可以利用GPU计算圆角方形框中每一个像素的颜色，并基于像素半径值来对像素进行归类。可以预先设定两个半径值值：描边的内边沿半径值r1和描边的外边沿半径值r2。

基于描边的内边沿半径值r1和外边沿半径值r2可以将像素划分为三类：第一类是半径值值小于r1的内部像素；第二类是半径值值介于r1与r2之间的描边像素；第三类是半径值大于r2的透明像素。由于像素个数有限，如果严格按照上述像素半径值与内边沿半径值和外边沿半径值的大小比较对像素归类，进而再对不同类的像素渲染不同颜色，则会在图形的边沿产生锯齿，为了达到抗锯齿效果，本公开实施例中对圆角方形框边沿的像素进行柔性插值染色，也即采用柔性插值的方式来对像素进行染色，使得边沿像素之间的颜色基于像素半径值的变化而缓慢变化，避免出现锯齿形状。

图4示出了根据本公开一实施方式中GPU渲染的三角形存在边沿锯齿的效果示意图。如图4所示，传入GPU的三角形顶点分别为A1、A2、A3，每个三角形顶点对应一个像素，而两两顶点之间绘制多个像素，每个像素都是正方形形状，因此两两顶点之间的多个像素会产生锯齿形状。

在本实施例的一个可选实现方式中，基于所述GPU输出的所述圆角方形框中每个像素的像素半径值，对所述圆角方形框边沿的所述像素进行柔性插值染色的步骤，进一步包括以下步骤：

基于所述像素半径值、内边沿半径值和外边沿半径值确定所述像素为内部像素的概率以及所述像素的透明度系数；所述内边沿半径值和所述外边沿半径值均小于所述像素半径值，所述内边沿半径值小于所述外边沿半径值；

基于所述内部像素的概率、所述像素的透明度系数调整渲染所述圆角方形框所使用的全局预设颜色，以便基于调整后的所述全局预设颜色对所述圆角方形框中的所述像素进行着色。

该可选的实现方式中，可以预先设定内边沿半径值和外边沿半径值，外边沿半径值大于内边沿半径值，而像素是否为内部像素的概率与该像素的像素半径值相关，像素半径值小于内边沿半径值时，其为内部像素的概率为1，像素半径值大于外边沿半径值时，其为内部像素的概率为0，而像素半径值在内边沿半径值附近时，其为内部像素的概率在0-1之间。像素的透明度系数与像素半径值相关，像素的像素半径值小于外边沿半径值时透明系数为1，表示完全不透明，而像素半径值大于外边沿半径值时，也即其不为内部像素，为外部像素时的透明系数为0，表示其完全透明，而像素半径值在外边沿半径值附近时，其为透明度系数在0-1之间。

通过上述方式确定了像素为内部像素的概率以及透明系数后，可以基于该内部像素的概率以及透明系数调整在绘制任务中指定的全局预设颜色，进而利用调整后的全局预设颜对圆角方形框中的每个像素进行着色。通过这种方式，可以得到的抗锯齿效果的圆角方形框，内部像素的颜色为全局预设颜色，而外部像素为透明像素，位于内部像素和外部像素之间的一部分像素的颜色可以从内部像素的颜色平滑过渡到透明颜色，从而避免圆角方形框出现边沿锯齿。

在本实施例的一个可选实现方式中，基于所述像素半径值、内边沿半径值和外边沿半径值确定所述像素为内部像素的概率以及所述像素的透明度系数的步骤，进一步包括以下步骤：

基于所述像素半径值与所述内边沿半径值r1的大小关系确定所述像素为内部像素的概率；所述像素半径值小于或等于r1-delta时，所述像素为内部像素的概率为1，所述像素半径值大于或等于r1+delta时，所述像素为内部像素的概率为0，所述像素半径值位于(r1-delta，r1+delta)区间范围时，所述像素为内部像素的概率在(0，1)区间范围之内，其中，r1为小于所述预设圆半径值的正数，delta为小于一个像素宽度的正数；

基于所述像素半径值与外边沿半径值r2的大小关系确定所述像素的透明系数；所述像素半径值大于或等于r2-delta时，所述像素的透明系数为表示完全透明的系数0，所述像素半径值小于或等于r2-delta时，所述像素的透明系数为表示不透明的系数1，所述像素半径值位于(r2-delta，r2+delta)区间范围时，所述像素的透明系数在(0，1)区间范围之内，其中，r2为大于所述内边沿半径值且小于所述预设圆半径值的正数。

该可选的实现方式中，预先定义了一个正数delta，delta可以为小于一个像素宽度的数，例如为0.5个像素的宽度。像素半径值小于或等于r1-delta时，其为内部像素的概率为1，像素半径值大于或等于r1+delta时，其为内部像素的概率为0，而像素半径值在(r1-delta，r1+delta)之间时，其为内部像素的概率在0-1之间。需要说明的是，像素半径值、内边沿半径值r1、外边沿半径值r2以及预设圆半径值R均以像素为单位。

像素的像素半径值小于或等于r2-delta时透明系数为1，表示完全不透明，而像素半径值大于或等于r2+delta时，其透明系数为0，表示其完全透明，而像素半径值在r1-delta和r1+delta之间时，其为透明系数在0-1之间。

在本实施例的一个可选实现方式中，所述全局预设颜色包括内部颜色以及描边颜色；基于所述内部像素的概率、所述像素的透明度系数调整渲染所述圆角方形框所使用的全局预设颜色，以便基于调整后的所述全局预设颜色对所述圆角方形框中的所述像素进行着色的步骤，进一步包括以下步骤：

基于所述像素为内部像素的概率、所述内部颜色以及所述描边颜色计算所述像素的处理后颜色；

基于所述像素的透明系数以及所述GPU输出的原始透明度计算所述像素的处理后透明度；

基于所述像素的处理后颜色以及所述像素的处理后透明度渲染所述圆角方形框中的所述像素。

该可选的实现方式中，在圆角方形框的渲染任务中，可以由人工或者其他方式预先设置全局预设颜色，该全局预设颜色可以包括但不限于内部颜色以及描边颜色。GPU在渲染圆角方形框时(实际上是分别渲染组成圆角方形框的各个三角形)。

为了实现防锯齿以及描边效果，本公开实施例基于上文中提到的方式，基于每个像素的像素半径值计算得到每个像素对应的为内部像素的概率以及透明系数。为了实现描边效果，以及避免圆角方形框外边沿的像素出现边沿锯齿，本公开实施例基于该为内部像素的概率、内部颜色、边界颜色可以计算每个像素的处理后颜色，同时还基于上述透明系数对GPU自动计算出的原始透明度进行处理得到处理后透明度，在渲染时采用处理后颜色对各个像素进行着色，并将每个像素的透明度设置为相应的处理后透明度。

下面举例说明本公开实施例中对于像素进行柔性插值染色的一种实现方式。

设置全局参数，该全局参数可以是在渲染任务中设定的，并且由CPU传入GPU的，全局参数包括：color_inner(内部颜色)、color_border(描边颜色)、r1(描边的内边沿半径值)、r2(描边的外边沿半径值)。

像素参数：r(像素半径值，GPU基于CPU传入的三角形顶点的半径值值自动计算得到)、gl_FragColor(像素颜色，GPU渲染的各个三角形中像素的实际显示颜色，包括上文中的处理后颜色和处理后透明度)。像素颜色可以四位向量表示，前三位表示RGB颜色，第四位表示透明度。

float delta＝0.5；//柔性渐变量，表示0.5个像素

float is_inner＝1.0-smoothstep(r1-delta,r1+delta,r)；//内部像素的概率

float transparency＝1.0-smoothstep(r2-delta,r2+delta,r)；//透明度系数

gl_FragColor＝color_inner*is_inner+color_border*(1.0-is_inner)；//像素颜色基于内部颜色、描边颜色以及内部像素的概率计算得到

gl_FragColor.a*＝transparency；//像素透明度，基于GPU自动计算得到的原始透明度a以及透明度系数计算得到。

其中，smoothstep是平滑的阶跃函数，smoothstep(edge0,edge1,x)的计算过程如下：

令t＝clamp((x-edge0)/(edge1-edge0),0.0,1.0),有smoothstep(edge0,edge1,x)＝t*t*(3.0-2.0*t)；

其中截断函数clamp(x,a,b)

＝a,if x<a；

＝x,if a<＝x<b；

＝b,if x>＝b。

本实施例中利用smoothstep的特性，对像素的颜色做插值，避免了非0即1的计算所导致的边沿锯齿。

本公开实施例利于用GPU做计算，能提高渲染性能，此外通过更改圆角方形框的参数如上文中的W、H、r1、r2的值，可以灵活更改圆角方形框的尺寸、圆角大小以及描边的粗细；同时本公开实施例还具有良好的边沿抗锯齿能力(边沿表现平滑)。

图5示出根据本公开一实施方式的地图渲染方法的流程图。如图5所示，该地图渲染方法包括以下步骤：

在步骤S501中，获取地图渲染数据；

在步骤S502中，基于所述地图渲染数据渲染地图时，基于所述圆角方形框的渲染方法为地图上的显示对象添加形状为圆角方形框的背景。

本实施例中，在地图渲染过程中，在适当位置可能会需要显示文字、图标等，而为了优化显示效果，可能需要对文字和图标等加上圆角方形框作为背景，并且该圆角方形框还可以做描边等效果处理。

本公开实施例中，可以利用上文中圆角方形框的渲染方法在地图上渲染圆角方形框，具体细节可以参见上文中对圆角方形框的渲染方法的描述，在此不再赘述。

图6示出根据本公开一实施方式的圆角方形框作为地图上图标背景的效果示意图。如图6所示，在地图上显示有文字五元桥，而五元桥上通过添加背景框也即圆角方形框优化其视觉效果，该圆角方形框还进行了描边处理，突显了其显示效果。

图7示出根据本公开一实施方式的圆角方形框的渲染设备的结构框图。如图7所示，该圆角方形框的渲染设备包括：CPU 701和GPU 702；

所述CPU 701将待渲染的圆角方形框划分成多个区域，对所述多个区域中的每一个区域进行三角剖分，得到多个三角形的三角形顶点，对所述三角形中的各个三角形顶点赋予像素半径值，以及将所述三角形的三角形顶点以及所述像素半径值传送至GPU 702；其中所述多个区域包括：四个圆角边沿区域、位于所述四个圆角边沿区域两两之间的四个四边形边沿区域以及位于所述圆角方形框中间的一个四边形中间区域；所述圆角边沿区域的形状是半径为预设圆半径值的四分之一圆；所述三角形的三角形顶点分别位于所述圆角方形框的边沿以及所述四边形中间区域的边沿；位于所述圆角方形框的边沿的所述三角形顶点的半径值为预设圆半径值，位于所述四边形中间区域的边沿的所述三角形顶点的半径值为0；

所述GPU 702基于所述三角形的三角形顶点以及所述像素半径值绘制所述圆角方形框。

本实施例中的具体细节可以参见上文中对圆角方形框的渲染方法的描述在此不再赘述。

在本实施例的一个可选实现方式中，对所述多个区域中的每一个区域进行三角剖分，得到剖分后的多个三角形顶点的渲染位置，包括：

将所述四边形边沿区域和所述四边形中间区域分别剖分成两个直角三角形，得到所述两个直角三角形的三角形顶点的渲染位置；

将所述圆角边沿区域剖分成边长为所述预设圆半径值的多个等边三角形，得到所述多个等边三角形的三角形顶点的渲染位置。

在本实施例的一个可选实现方式中，将所述三角形顶点的所述渲染位置以及所述像素半径值传送至GPU 702，包括：

将所述三角形顶点的渲染位置传送至所述GPU 702的三角形顶点着色器；

将所述三角形顶点的像素半径值传送至所述GPU 702的像素着色器。

在本实施例的一个可选实现方式中，所述GPU 702基于所述像素半径值计算所述圆角方形框中每个像素的像素半径值，并基于所述像素半径值对所述圆角方形框中的所述像素进行柔性插值染色；所述像素的像素半径值为所述像素距离所述四边形中间区域的边沿的最近距离。

在本实施例的一个可选实现方式中，所述GPU 702基于所述像素半径值计算所述圆角方形框中每个像素的像素半径值，并基于所述像素半径值对所述圆角方形框中的所述像素进行柔性插值染色，包括：

所述GPU 702基于所述像素半径值、内边沿半径值和外边沿半径值确定所述像素为内部像素的概率以及所述像素的透明度系数；所述内边沿半径值和所述外边沿半径值均小于所述像素半径值，所述内边沿半径值小于所述外边沿半径值；

所述GPU 702基于所述内部像素的概率、所述像素的透明度系数调整渲染所述圆角方形框所使用的全局预设颜色，以便基于调整后的所述全局预设颜色对所述圆角方形框中的所述像素进行着色。

在本实施例的一个可选实现方式中，所述GPU 702基于所述像素半径值、内边沿半径值和外边沿半径值确定所述像素为内部像素的概率以及所述像素的透明度系数，包括：

所述GPU 702基于所述像素半径值与所述内边沿半径值r1的大小关系确定所述像素为内部像素的概率；所述像素半径值小于或等于r1-delta时，所述像素为内部像素的概率为1，所述像素半径值大于或等于r1+delta时，所述像素为内部像素的概率为0，所述像素半径值位于(r1-delta，r1+delta)区间范围时，所述像素为内部像素的概率在(0，1)区间范围之内，其中，r1为小于所述预设圆半径值的正数，delta为小于一个像素宽度的正数；

所述GPU 702基于所述像素半径值与外边沿半径值r2的大小关系确定所述像素的透明系数；所述像素半径值大于或等于r2-delta时，所述像素的透明系数为表示完全透明的系数0，所述像素半径值小于或等于r2-delta时，所述像素的透明系数为表示不透明的系数1，所述像素半径值位于(r2-delta，r2+delta)区间范围时，所述像素的透明系数在(0，1)区间范围之内，其中，r2为大于所述内边沿半径值且小于所述预设圆半径值的正数。

在本实施例的一个可选实现方式中，所述全局预设颜色包括内部颜色以及描边颜色；所述GPU 702基于所述内部像素的概率、所述像素的透明度系数调整渲染所述圆角方形框所使用的全局预设颜色，以便基于调整后的所述全局预设颜色对所述圆角方形框中的所述像素进行着色，包括：

基于所述像素为内部像素的概率、所述内部颜色以及所述描边颜色计算所述像素的处理后颜色；

基于所述像素的透明系数以及所述GPU 702输出的原始透明度计算所述像素的处理后透明度；

基于所述像素的处理后颜色以及所述像素的处理后透明度渲染所述圆角方形框中的所述像素。

上述实施例中的具体细节可以参见上文中对圆角方形框的渲染方法的描述，在此不再赘述。

下述为本公开装置实施例，可以用于执行本公开方法实施例。

根据本公开一实施方式的圆角方形框的渲染装置，该装置可以通过软件、硬件或者两者的结合实现成为电子设备的部分或者全部。该圆角方形框的渲染装置包括：

区域划分模块，被配置为将待渲染的圆角方形框划分成多个区域，所述多个区域包括：圆角边沿区域、四边形边沿区域以及四边形中间区域；所述圆角边沿区域的形状是半径为预设圆半径值的圆的一部分、且小于或等于四分之一圆，所述四边形边沿区域位于两个圆角边沿区域之间，所述四边形中间区域被所述圆角边沿区域和所述四边形边沿区域所包围；

三角剖分模块，被配置为对所述多个区域中的每一个区域进行三角剖分，得到剖分后的多个三角形顶点的渲染位置；

半径值赋予模块，被配置为基于所述三角形顶点距离所述四边形中间区域的边沿的最短距离对所述三角形顶点赋予像素半径值；其中，位于所述圆角方形框的边沿的所述三角形顶点的像素半径值为所述预设圆半径值，而位于所述四边形中间区域的边沿的所述三角形顶点的像素半径值为0；

传送模块，被配置为将所述三角形顶点的所述渲染位置以及所述像素半径值传送至GPU，以便所述GPU基于所述三角形顶点的所述渲染位置以及所述像素半径值渲染所述圆角方形框。

在本实施例的一个可选实现方式中，所述三角剖分模块，包括：

第一剖分子模块，被配置为将所述四边形边沿区域和所述四边形中间区域分别剖分成两个直角三角形，得到所述两个直角三角形的三角形顶点的渲染位置；

第二剖分子模块，被配置为将所述圆角边沿区域剖分成边长为所述预设圆半径值的多个等边三角形，得到所述多个等边三角形的三角形顶点的渲染位置。

在本实施例的一个可选实现方式中，所述传送模块，包括：

第一传送子模块，被配置为将所述三角形顶点的渲染位置传送至所述GPU的三角形顶点着色器；

第二传送子模块，被配置为将所述三角形顶点的像素半径值传送至所述GPU的像素着色器。

在本实施例的一个可选实现方式中，所述传送模块之后，所述装置还包括：

启动模块，被配置为在所述GPU中启动图形优化程序，以使所述图形优化程序基于所述GPU输出的所述圆角方形框中每个像素的像素半径值，对所述圆角方形框边沿的所述像素进行柔性插值染色；所述像素的像素半径值为所述像素至所述四边形中间区域的边沿的最短距离。

在本实施例的一个可选实现方式中，所述启动模块，包括：

第一确定子模块，被配置为基于所述像素半径值、内边沿半径值和外边沿半径值确定所述像素为内部像素的概率以及所述像素的透明度系数；所述内边沿半径值和所述外边沿半径值均小于所述像素半径值，所述内边沿半径值小于所述外边沿半径值；

调整子模块，被配置为基于所述内部像素的概率、所述像素的透明度系数调整渲染所述圆角方形框所使用的全局预设颜色，以便基于调整后的所述全局预设颜色对所述圆角方形框中的所述像素进行着色。

在本实施例的一个可选实现方式中，所述第一确定子模块，包括：

第二确定子模块，被配置为基于所述像素半径值与所述内边沿半径值r1的大小关系确定所述像素为内部像素的概率；所述像素半径值小于或等于r1-delta时，所述像素为内部像素的概率为1，所述像素半径值大于或等于r1+delta时，所述像素为内部像素的概率为0，所述像素半径值位于(r1-delta，r1+delta)区间范围时，所述像素为内部像素的概率在(0，1)区间范围之内，其中，r1为小于所述预设圆半径值的正数，delta为小于一个像素宽度的正数；

第三确定子模块，被配置为基于所述像素半径值与外边沿半径值r2的大小关系确定所述像素的透明系数；所述像素半径值大于或等于r2-delta时，所述像素的透明系数为表示完全透明的系数0，所述像素半径值小于或等于r2-delta时，所述像素的透明系数为表示不透明的系数1，所述像素半径值位于(r2-delta，r2+delta)区间范围时，所述像素的透明系数在(0，1)区间范围之内，其中，r2为大于所述内边沿半径值且小于所述预设圆半径值的正数。

在本实施例的一个可选实现方式中，所述全局预设颜色包括内部颜色以及描边颜色；所述调整子模块，包括：

第一计算子模块，被配置为基于所述像素为内部像素的概率、所述内部颜色以及所述描边颜色计算所述像素的处理后颜色；

第二计算子模块，被配置为基于所述像素的透明系数以及所述GPU输出的原始透明度计算所述像素的处理后透明度；

渲染子模块，被配置为基于所述像素的处理后颜色以及所述像素的处理后透明度渲染所述圆角方形框中的所述像素。

本实施例中的圆角方形框的渲染装置与上文中的圆角方形框的渲染方法对应一致，具体细节可以参见上文中对圆角方形框的渲染方法的描述，在此不再赘述。

根据本公开一实施方式的地图渲染装置，该装置可以通过软件、硬件或者两者的结合实现成为电子设备的部分或者全部。该地图渲染装置包括：

获取模块，被配置为获取地图渲染数据；

添加模块，被配置为基于所述地图渲染数据渲染地图时，基于上述圆角方形框的渲染装置为地图上的显示对象添加形状为圆角方形框的背景。

本实施例中的地图渲染装置与上文中的地图渲染方法对应一致，具体细节可以参见上文中对地图渲染方法的描述，在此不再赘述。

图8是适于用来实现根据本公开实施方式的圆角方形框的渲染方法和/或地图渲染方法的电子设备的结构示意图。

如图8所示，电子设备800包括处理单元801，其可实现为CPU、GPU、FPGA、NPU等处理单元。处理单元801可以根据存储在只读存储器(ROM)802中的程序或者从存储部分808加载到随机访问存储器(RAM)803中的程序而执行本公开上述任一方法的实施方式中的各种处理。在RAM803中，还存储有电子设备800操作所需的各种程序和数据。处理单元801、ROM802以及RAM803通过总线804彼此相连。输入/输出(I/O)接口805也连接至总线804。

以下部件连接至I/O接口805：包括键盘、鼠标等的输入部分806；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分807；包括硬盘等的存储部分808；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分809。通信部分809经由诸如因特网的网络执行通信处理。驱动器810也根据需要连接至I/O接口805。可拆卸介质811，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器810上，以便于从其上读出的计算机程序根据需要被安装入存储部分808。

特别地，根据本公开的实施方式，上文参考本公开实施方式中的任一方法可以被实现为计算机软件程序。例如，本公开的实施方式包括一种计算机程序产品，其包括有形地包含在机器可读介质上的计算机程序，所述计算机程序包含用于执行本公开实施方式中任一方法的程序代码。在这样的实施方式中，该计算机程序可以通过通信部分809从网络上被下载和安装，和/或从可拆卸介质811被安装。

附图中的流程图和框图，图示了按照本公开各种实施方式的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，路程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本公开实施方式中所涉及到的单元或模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元或模块也可以设置在处理器中，这些单元或模块的名称在某种情况下并不构成对该单元或模块本身的限定。

作为另一方面，本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施方式中所述装置中所包含的计算机可读存储介质；也可以是单独存在，未装配入设备中的计算机可读存储介质。计算机可读存储介质存储有一个或者一个以上程序，所述程序被一个或者一个以上的处理器用来执行描述于本公开的方法。

以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离所述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (10)

1.一种圆角方形框的渲染方法，其中，包括：

将待渲染的圆角方形框划分成多个区域，所述多个区域包括：圆角边沿区域、四边形边沿区域以及四边形中间区域；所述圆角边沿区域的形状是半径为预设圆半径值的圆的一部分、且小于或等于四分之一圆，所述四边形边沿区域位于两个圆角边沿区域之间，所述四边形中间区域被所述圆角边沿区域和所述四边形边沿区域所包围；

对所述多个区域中的每一个区域进行三角剖分，得到剖分后的多个三角形顶点的渲染位置；

基于所述三角形顶点距离所述四边形中间区域的边沿的最短距离对所述三角形顶点赋予像素半径值；其中，位于所述圆角方形框的边沿的所述三角形顶点的像素半径值为所述预设圆半径值，而位于所述四边形中间区域的边沿的所述三角形顶点的像素半径值为0；

将所述三角形顶点的所述渲染位置以及所述像素半径值传送至GPU，以便所述GPU基于所述三角形顶点的所述渲染位置以及所述像素半径值渲染所述圆角方形框。

2.根据权利要求1所述的方法，其中，对所述多个区域中的每一个区域进行三角剖分，得到剖分后的多个三角形顶点的渲染位置，包括：

将所述四边形边沿区域和所述四边形中间区域分别剖分成两个直角三角形，得到所述两个直角三角形的三角形顶点的渲染位置；

将所述圆角边沿区域剖分成边长为所述预设圆半径值的多个等边三角形，得到所述多个等边三角形的三角形顶点的渲染位置。

3.根据权利要求1或2所述的方法，其中，将所述三角形顶点的所述渲染位置以及所述像素半径值传送至GPU，包括：

将所述三角形顶点的渲染位置传送至所述GPU的三角形顶点着色器；

将所述三角形顶点的像素半径值传送至所述GPU的像素着色器。

4.根据权利要求1或2所述的方法，其中，将所述三角形的三角形顶点以及所述像素半径值传送至GPU之后，所述方法还包括：

在所述GPU中启动图形优化程序，以使所述图形优化程序基于所述GPU输出的所述圆角方形框中每个像素的像素半径值，对所述圆角方形框边沿的所述像素进行柔性插值染色；所述像素的像素半径值为所述像素至所述四边形中间区域的边沿的最短距离。

5.根据权利要求4所述的方法，其中，基于所述GPU输出的所述圆角方形框中每个像素的像素半径值，对所述圆角方形框边沿的所述像素进行柔性插值染色，包括：

基于所述像素半径值、内边沿半径值和外边沿半径值确定所述像素为内部像素的概率以及所述像素的透明度系数；所述内边沿半径值和所述外边沿半径值均小于所述像素半径值，所述内边沿半径值小于所述外边沿半径值；

基于所述内部像素的概率、所述像素的透明度系数调整渲染所述圆角方形框所使用的全局预设颜色，以便基于调整后的所述全局预设颜色对所述圆角方形框中的所述像素进行着色。

6.根据权利要求5所述的方法，其中，基于所述像素半径值、内边沿半径值和外边沿半径值确定所述像素为内部像素的概率以及所述像素的透明度系数，包括：

基于所述像素半径值与所述内边沿半径值r1的大小关系确定所述像素为内部像素的概率；所述像素半径值小于或等于r1-delta时，所述像素为内部像素的概率为1，所述像素半径值大于或等于r1+delta时，所述像素为内部像素的概率为0，所述像素半径值位于(r1-delta，r1+delta)区间范围时，所述像素为内部像素的概率在(0，1)区间范围之内，其中，r1为小于所述预设圆半径值的正数，delta为小于一个像素宽度的正数；

基于所述像素半径值与外边沿半径值r2的大小关系确定所述像素的透明系数；所述像素半径值大于或等于r2-delta时，所述像素的透明系数为表示完全透明的系数0，所述像素半径值小于或等于r2-delta时，所述像素的透明系数为表示不透明的系数1，所述像素半径值位于(r2-delta，r2+delta)区间范围时，所述像素的透明系数在(0，1)区间范围之内，其中，r2为大于所述内边沿半径值且小于所述预设圆半径值的正数。

7.根据权利要求5或6所述的方法，其中，所述全局预设颜色包括内部颜色以及描边颜色；基于所述内部像素的概率、所述像素的透明度系数调整渲染所述圆角方形框所使用的全局预设颜色，以便基于调整后的所述全局预设颜色对所述圆角方形框中的所述像素进行着色，包括：

基于所述像素为内部像素的概率、所述内部颜色以及所述描边颜色计算所述像素的处理后颜色；

基于所述像素的透明系数以及所述GPU输出的原始透明度计算所述像素的处理后透明度；

基于所述像素的处理后颜色以及所述像素的处理后透明度渲染所述圆角方形框中的所述像素。

8.一种地图渲染方法，其中，包括：

获取地图渲染数据；

基于所述地图渲染数据渲染地图时，基于所述权利要求1-7任一项所述的方法为地图上的显示对象添加形状为圆角方形框的背景。

9.一种圆角方形框的渲染设备，其中，包括：CPU和GPU；

所述CPU将待渲染的圆角方形框划分成多个区域，对所述多个区域中的每一个区域进行三角剖分，得到多个三角形的三角形顶点，对所述三角形中的各个三角形顶点赋予像素半径值，以及将所述三角形的三角形顶点以及所述像素半径值传送至GPU；其中所述多个区域包括：四个圆角边沿区域、位于所述四个圆角边沿区域两两之间的四个四边形边沿区域以及位于所述圆角方形框中间的一个四边形中间区域；所述圆角边沿区域的形状是半径为预设圆半径值的四分之一圆；所述三角形的三角形顶点分别位于所述圆角方形框的边沿以及所述四边形中间区域的边沿；位于所述圆角方形框的边沿的所述三角形顶点的半径值为预设圆半径值，位于所述四边形中间区域的边沿的所述三角形顶点的半径值为0；

所述GPU基于所述三角形的三角形顶点以及所述像素半径值绘制所述圆角方形框。

10.根据权利要求9所述的设备，其中，所述GPU基于所述圆角方形框中每个像素的像素半径值，对所述圆角方形框边沿的所述像素进行柔性插值染色；所述像素的像素半径值为所述像素至所述四边形中间区域的边沿的最短距离。

Images