如何高效的为控件实现圆角

注意：因为在项目中会用到各种奇形怪状的控件，有时候设计切图也比较费劲，那就自己动手吧正好了解一下高效切割圆角的方法，Let`s do it

通常我们经常会习惯性的直接在控件的Layer层进行设置，这样设置一个控件也许没有多大的性能影响，但是如果控件多的话估计就不行了。

self.button.layer.cornerRadius = 20;
self.button.layer.masksToBounds = YES;

下面就介绍两种比较常见的设置圆角的方法

第一种方法：使用Quartz2D直接绘制图片

- (UIImage*)cropImageWithRect:(CGRect)cropRect 
{
    CGRect drawRect = CGRectMake(-cropRect.origin.x , -cropRect.origin.y, self.size.width * self.scale, self.size.height * self.scale);
    UIGraphicsBeginImageContext(cropRect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextClearRect(context, CGRectMake(0, 0, cropRect.size.width, cropRect.size.height));
    [self drawInRect:drawRect];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}

第二种方法：使用贝塞尔曲线（UIBezierPath）

self.button = [UIButton buttonWithType:UIButtonTypeCustom];
    self.button.frame = CGRectMake(10, 200, self.view.frame.size.width - 20, 40);
    self.button.backgroundColor = [UIColor brownColor];
    [self.view addSubview:self.button];
    
    /* 贝塞尔曲线切割 */
    /**
     *  @param UIRectCorner
     *  左上 UIRectCornerTopLeft     = 1 << 0,
     左下 UIRectCornerBottomLeft  = 1 << 2,
     右下 UIRectCornerBottomRight = 1 << 3,
     所有角 UIRectCornerAllCorners  = ~0UL
     */
    
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.button.bounds byRoundingCorners:UIRectCornerTopRight | UIRectCornerBottomRight cornerRadii:self.button.bounds.size];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    [self.button setTitle:@"type: UIRectCornerTopRight | UIRectCornerBottomRight" forState:UIControlStateNormal];
    self.button.titleLabel.font = [UIFont systemFontOfSize:14];
    //设置大小
    maskLayer.frame = self.button.bounds;
    //设置图形样子
    maskLayer.path = maskPath.CGPath;
    self.button.layer.mask = maskLayer;

• 下面是实现各种圆角的效果
  屏幕快照 2018-06-15 10.23.55.png

屏幕快照 2018-06-15 10.24.34.png

屏幕快照 2018-06-15 10.26.08.png

屏幕快照 2018-06-15 10.30.26.png

屏幕快照 2018-06-15 10.31.50.png

屏幕快照 2018-06-15 10.32.21.png

屏幕快照 2018-06-15 10.33.08.png

屏幕快照 2018-06-15 10.35.52.png

下次需要啥效果直接看看就知道了，因为平常实在是遇到的不多，多以记录一下，如果你觉得有用，留下您的脚印！