一、效果演示
二、如何获取
1、https://gitee.com/szrpf/RoundBox
2、解压，导入cocos creator（版本2.4.13），可以直接运行Demo演示
3、单独复制Demo中的RoundBox.ts到自己项目中
新建一个空节点并添加RoundBox组件，拖一张图片到SpriteFrame里就可以使用了，和cc.Sprite差不多。
三、算法思路
默认情况下，一张图片4个角，每个角1个顶点。
如上图，增加顶点数量，并且等间距圆弧分布，就可以实现圆角效果。
顶点数越多，圆角弧度越平滑，但计算量也越大，具体看项目需求。
属性面板设计如下：
可以单独设置每个圆角的可见性。
为了方便计算，可以把矩形拆成5块：中间、左下、右下、左上、右上
假设：
圆角半径 ：R
线段数量：S
有几个角可见：N
1）计算顶点数量和三角形数量
中间的顶点数 = 12，三角形数量 = 6
每个角顶点数 = S - 1（其余顶点都在中间的结构上，已经算过了）
三角形数量 = S
如果该角不可见，那么这个角：
顶点数 = 0（只是把中间结构的点移出去，并没有增加顶点数）
三角形数 = 0
因此，顶点数量 = 12 + N * (S - 1)
三角形数量 = 6 + N * S
2）计算顶点坐标
Step 1：计算图片左下、右下、左上、右上4个边缘
根据图片宽高、锚点很容易计算
Step 2：计算中间结构的顶点坐标
根据Step 1的结果，以及圆角半径，计算4个圆角圆心坐标
然后算出其余点坐标。
Step 3：计算圆角顶点坐标
由于每个圆角顶点均匀分布在90度圆弧上，因此夹角α = 90 / S
每个顶点坐标 = 上一个顶点绕圆心转α角度
根据任意点P绕O旋转的公式，计算圆角顶点坐标。
3）计算顶点UV
根据UV的定义，UV坐标系的原点O是图片左上角，坐标（Ox, Oy）UV（0, 0）
任意顶点P坐标（Px, Py）UV（Pu, Pv）
Pu = (Px - Ox) / 图片宽度
Pv = （图片高度 - Py - Oy) / 图片高度
4）计算顶点颜色
所有顶点颜色都 = 节点颜色就可以
5）计算顶点顺序
中间结构的点序是固定的，在纸上画一下就可以得到，不需要计算。
4个角的点序：从圆心开始逆时针排序
点序没有固定的规则，看个人喜好，但尽量有规律性，方便计算。
其余模块比较公式化，之前的教程已经实现过了，照搬过来就可以。
四、结束语
有不明白的，或者优化建议，可以留言评论，或给我发邮件！
包教包会，你会了吗？
创作不易，请多留言讨论，这样我会有动力发更多好玩的东西上来。
Gitee地址：https://gitee.com/szrpf
EMail地址：27185709@qq.com
推荐链接：
1、【包教包会】操控顶点的大师——CocosCreator Assembler保姆级教程
2、【包教包会】CocosCreator Assembler经典案例第一期——2D实现3D透视翻转（附Demo源码）
3、权重随机算法，解决游戏中一切可控随机（刷怪、掉宝、转盘、抽卡等等）
4、【包教包会】对CocosCreator拖尾组件MotionStreak做了全面优化
5、【包教包会】重写CocosCreator的按钮Button组件，动画、音效、回调逻辑优化
标记收藏 == 学会 