[發明專利]圓角方形框的渲染方法及設備、地圖渲染方法

在審

• 申請號: 202210195627.1
• 申請日: 2022-03-01
• 公開（公告）號: CN114723865A
• 公開（公告）日: 2022-07-08
• 發明（設計）人: 白高成
• 申請（專利權）人: 阿里巴巴（中國）有限公司
• 主分類號: G06T15/00
• 分類號: G06T15/00;G06T15/04;G06T17/05;G06T17/20;G06T19/20;G06T7/62
• 代理公司: 北京智信四方知識產權代理有限公司 11519
• 代理人: 鐘文芳

本公開實施例公開了一種圓角方形框的渲染方法及設備、地圖渲染方法，所述方法包括：將待渲染的圓角方形框劃分成多個區域，包括：圓角邊沿區域、四邊形邊沿區域以及四邊形中間區域；圓角邊沿區域的形狀是半徑為預設圓半徑值的圓的一部分、且小于或等于四分之一圓，四邊形邊沿區域位于兩個圓角邊沿區域之間，四邊形中間區域被圓角邊沿區域和四邊形邊沿區域所包圍；對多個區域中的每一個區域進行三角剖分，得到剖分后的多個三角形頂點的渲染位置；基于三角形頂點距離四邊形中間區域的邊沿的最短距離對三角形頂點賦予像素半徑值；將三角形頂點的渲染位置以及像素半徑值傳送至GPU，以便GPU基于三角形頂點的渲染位置以及像素半徑值渲染圓角方形框。

技術領域

本公開涉及圖像技術領域，具體涉及一種圓角方形框的渲染方法及設備、地圖渲染方法。

背景技術

隨著技術的發展，應用軟件的種類越來越多，而應用軟件界面的可視化效果也越來越受重視。例如，在軟件應用中展示文字或者圖標時，會通過加上方形背景框來優化視覺效果。而方形背景框可以做各種樣式設計，比如純色填充、圖案填充、加描邊、圓角等。

已有技術對于圓角方形背景框的渲染過程，通常是事先準備好圓角背景框的圖案(比如由美工人員利用畫圖軟件畫好)，并將該圖案直接繪制為背景，然后再該圖案上添加其他圖案，比如文字或圖標等。但是這種方案無法控制圓角半徑值與背景框尺寸的比例，在圓角方形背景框的長寬被拉伸之后，圓角會變形，也即圓角變形后不再是正圓形的四分之一。

因此，針對上述技術問題，需要提出一種解決方案，能夠靈活更改圓角方形背景框的尺寸、圓角大小等。

發明內容

本公開實施例提供一種圓角方形框的渲染方法及設備、地圖渲染方法。

第一方面，本公開實施例中提供了一種圓角方形框的渲染方法，包括：

將待渲染的圓角方形框劃分成多個區域，所述多個區域包括：圓角邊沿區域、四邊形邊沿區域以及四邊形中間區域；所述圓角邊沿區域的形狀是半徑為預設圓半徑值的圓的一部分、且小于或等于四分之一圓，所述四邊形邊沿區域位于兩個圓角邊沿區域之間，所述四邊形中間區域被所述圓角邊沿區域和所述四邊形邊沿區域所包圍；

對所述多個區域中的每一個區域進行三角剖分，得到剖分后的多個三角形頂點的渲染位置；

基于所述三角形頂點距離所述四邊形中間區域的邊沿的最短距離對所述三角形頂點賦予像素半徑值；其中，位于所述圓角方形框的邊沿的所述三角形頂點的像素半徑值為所述預設圓半徑值，而位于所述四邊形中間區域的邊沿的所述三角形頂點的像素半徑值為0；

將所述三角形頂點的所述渲染位置以及所述像素半徑值傳送至GPU，以便所述GPU基于所述三角形頂點的所述渲染位置以及所述像素半徑值渲染所述圓角方形框。

進一步地，對所述多個區域中的每一個區域進行三角剖分，得到剖分后的多個三角形頂點的渲染位置，包括：

將所述四邊形邊沿區域和所述四邊形中間區域分別剖分成兩個直角三角形，得到所述兩個直角三角形的三角形頂點的渲染位置；

將所述圓角邊沿區域剖分成邊長為所述預設圓半徑值的多個等邊三角形，得到所述多個等邊三角形的三角形頂點的渲染位置。

進一步地，將所述三角形頂點的所述渲染位置以及所述像素半徑值傳送至GPU，包括：

將所述三角形頂點的渲染位置傳送至所述GPU的三角形頂點著色器；

將所述三角形頂點的像素半徑值傳送至所述GPU的像素著色器。

進一步地，將所述三角形的三角形頂點以及所述像素半徑值傳送至GPU之后，所述方法還包括：