[发明专利]圆角方形框的渲染方法及设备、地图渲染方法

说明书

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

技术领域

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

背景技术

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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