iOS 使用贝塞尔曲线切大弧度圆角

今天UI小姐姐给了个这样的效果图：

UI效果图.jpg

我一看这不是很简单嘛，直接贝塞尔曲线切左上角的圆角就好了，然而，打脸来的如此突然，切出来的圆角并不符合预期效果......

使用的是常见的贝塞尔曲线切圆角的方法：

UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds byRoundingCorners:UIRectCornerTopLeft cornerRadii:CGSizeMake(13, 13)];
CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = view.bounds;
layer.path = bezierPath.CGPath;
view.layer.mask = layer;

结果是这个鬼样子：

这不科学.jpg

开始我以为可能是圆角的角度设置太小了，于是将角度设置为view的size: 26，结果依然是这样，没有任何改变，又尝试了将角度设置的更大，结果还是不变，原来如果设置的角度大于size的一半，都是只取size的一半作为角度。

既然不能这样绘制，那就用贝塞尔曲线绘制一个弧形，于是有了下边的代码：

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 25)];
[path addQuadCurveToPoint:CGPointMake(25, 0) controlPoint:CGPointMake(0, 0)];

CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = CGRectMake(0, 0, 26, 26);
layer.path = path.CGPath;
view.layer.mask = layer;

这不科学1.jpg

结果依然不对，但这个角度和弧度是没有问题的。

当CAShapLayer使用绘制的贝塞尔曲线时，如果添加了起点和终点，结束绘制的时候曲线会自动闭合，所以上图中的弧线变成了弧形

既然如此，那就自己动手绘制一个扇形区域，只需要为上边的贝塞尔曲线添加两个边线就可以了，于是修改代码为下面这样：

UIBezierPath *path = [UIBezierPath bezierPath];
// 绘制起点 - 右下角
[path moveToPoint:CGPointMake(26, 26)];
// 绘制底部线条
[path addLineToPoint:CGPointMake(0, 26)];
// 绘制终点 - 左上角圆弧
[path addQuadCurveToPoint:CGPointMake(26, 0) controlPoint:CGPointMake(0, 0)];

CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = CGRectMake(0, 0, 26, 26);
layer.path = path.CGPath;
view.layer.mask = layer;

success.jpg

最后，终于成功了！！！

这只是临时想出来的方案，如果你有更好的方法，请指教，感谢！
刚开始尝试写技术博客，如果有错误或遗漏的地方也请多多包涵！

Just do IT！！！