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

(19)国家知识产权局(12)发明专利申请(10)申请公布号CN114723865A(43)申请公布日2022.07.08(21)申请号202210195627.1G06T7/62(2017.01)(22)申请日2022.03.01(71)申请人阿里巴巴（中国）有限公司地址310052浙江省杭州市滨江区长河街道网商路699号4号楼5楼508室(72)发明人白高成(74)专利代理机构北京智信四方知识产权代理有限公司11519专利代理师钟文芳(51)Int.Cl.G06T15/00(2011.01)G06T15/04(2011.01)G06T17/05(2011.01)G06T17/20(2006.01)G06T19/20(2011.01)权利要求书2页说明书16页附图4页(54)发明名称圆角方形框的渲染方法及设备、地图渲染方法(57)摘要本公开实施例公开了一种圆角方形框的渲染方法及设备、地图渲染方法，所述方法包括：将待渲染的圆角方形框划分成多个区域，包括：圆角边沿区域、四边形边沿区域以及四边形中间区域；圆角边沿区域的形状是半径为预设圆半径值的圆的一部分、且小于或等于四分之一圆，四边形边沿区域位于两个圆角边沿区域之间，四边形中间区域被圆角边沿区域和四边形边沿区域所包围；对多个区域中的每一个区域进行三角剖分，得到剖分后的多个三角形顶点的渲染位置；基于三角形顶点距离四边形中间区域的边沿的最短距离对三角形顶点赋予像素半径值；将三角形顶点的渲染位置以及像素半径值传送至GPU，以便GPU基于三角形顶点的渲染位置以及像素半径值渲染圆角方形框。CN114723865ACN114723865A权利要求书1/2页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，所述像素2CN114723865A权利要求书2/2页半径值大于或等于r1+delta时，