使用OpenGL实现圆角效果

圆角因为其平滑的四边而容易将用户的视线过渡到图形中心，直角矩形因为尖锐的特性导致人眼在图形识别上容易发散

（图片来自参考1）

因此，圆角更容易获得设计师的青睐。在日常的各类App和网页中，圆角矩形的设计更是随处可见于各类头像、按钮等元素上

（图片来自参考1）

接下来的文章我们基于之前的播放器项目，添加OpenGL实现的圆角效果，最终效果如下图所示（播放器叠加了灰度滤镜和圆角滤镜）

实现思路

矩形圆角的一种实现思路是按照设定的圆角半径在矩形四个角画圆，这样一个完整的圆角矩形拆解为四个角上四分之一圆+中间的十字形图形

先看看shader是如何绘制圆的：先将纹理坐标系转为图片原始的坐标系，然后根据圆的数学公式判断即可

判断十字区域并进行绘制

四个角弧形区域

最终将两者结合并去掉hard code，圆角半径为50px的效果如下

代码实现

在librender模块中新建RadiusCornerFilter类并添加Drawer实现

添加filter到RenderManager即可

参考

1.【你对圆角的所有困惑，这里都帮你解答了】

https://www.woshipm.com/pd/4241302.html

完整代码可以点击文末的"阅读原文"获取，欢迎各位大佬提issue和PR

~~END~~