Quartz 2D学习（三）自定义圆角按钮

Quartz 2D学习（三）自定义圆角按钮

导语

Quartz 2D是一个二维图形绘制引擎，它支持iOS环境和Mac OS X环境，为开发者提供了很多方便，它在绘图上的功能十分强大，如基于路径的绘图、透明度、阴影、颜色管理、反锯齿、PDF文档生成等。Quartz 2D作为Core Graphics框架的一部分，其中的很多数据类型和方法都是以CG为前缀的。

本篇内容将介绍自定义button的实现。
需要用到的知识有：drawRect:, CGPathAddArcToPoint()

一、初始工作

1.新建一个类继承自UIButton，命名为CXZButton。

CXZButton.h

#import <UIKit/UIKit.h>

@interface CXZButton : UIButton

@property (nonatomic, strong) UIColor *defaultColor;

@end  

CXZButton.m

#import "CXZButton.h"

@implementation CXZButton 

- (id)initWithCoder:(NSCoder *)aDecoder {
    if ((self = [super initWithCoder:aDecoder])) {
          //初始化
        self.opaque = NO;
        self.backgroundColor = [UIColor clearColor];
        [self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, self.defaultColor.CGColor);
    //画一个矩形
    CGContextFillRect(context, self.bounds);
}

- (void) setDefaultColor:(UIColor *)defaultColor {
     //设置默认颜色
    _defaultColor = defaultColor;
    [self setNeedsDisplay];
}

2.main.storyboard设置

添加一个Button，然后设置Contraints，并将Button的类设置为CXZButton
如图

3.在ShowViewController.m中添加代码，运行查看结果

#import "ShowViewController.h"
#import "Test.h"

@interface ShowViewController ()

@property (weak, nonatomic) IBOutlet CXZButton *button;

@end

@implementation ShowViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.button.defaultColor = [UIColor colorWithRed:105.0/255.0 green:179.0/255.0 blue:216.0/255.0 alpha:1.0];

}

@end

我们可以得到一个直角的button。

二、绘制圆角矩形

我们已经可以画出一个直角矩形，只要在drawRect：中稍微修改代码就可以绘制出圆角矩形。

#import "CXZButton.h"

@implementation CXZButton 

- (id)initWithCoder:(NSCoder *)aDecoder {
    if ((self = [super initWithCoder:aDecoder])) {
        self.opaque = NO;
        self.backgroundColor = [UIColor clearColor];
        [self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGMutablePathRef path = [self creatRoundedRectForRect:rect radius:8.0];

    CGContextSetFillColorWithColor(context, self.defaultColor.CGColor);
    CGContextAddPath(context, path);
    CGContextFillPath(context);
}

- (void) setDefaultColor:(UIColor *)defaultColor {
    _defaultColor = defaultColor;
    [self setNeedsDisplay];
}

- (CGMutablePathRef)creatRoundedRectForRect:(CGRect)rect radius:(CGFloat)radius {
    //申请路径
    CGMutablePathRef path = CGPathCreateMutable();

    //将起始点移动到点0
    CGPathMoveToPoint(path, NULL, CGRectGetMidX(rect), CGRectGetMinY(rect));
    //绘制曲线1
    CGPathAddArcToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMinY(rect), CGRectGetMaxX(rect), CGRectGetMaxY(rect), radius);
    //绘制曲线2
    CGPathAddArcToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMaxY(rect), radius);
    //绘制曲线3
    CGPathAddArcToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMinY(rect), radius);
    //绘制曲线4
    CGPathAddArcToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect), CGRectGetMaxX(rect), CGRectGetMinY(rect), radius);
    //闭合path，绘制直线5
    CGPathCloseSubpath(path);

    return path;
}

@end

---

结果图，圆角按钮：

大功告成，哈哈！！！！！

三、CGContextAddArcToPoint

1.CGContextAddArcToPoint

void CGPathAddArcToPoint (
   CGMutablePathRef _Nullable path,
   const CGAffineTransform * _Nullable m,
   CGFloat x1,
   CGFloat y1,
   CGFloat x2,
   CGFloat y2,
   CGFloat radius
);

P1为path的起始点，这个弧线会以两条直线为切线，radius为半径画弧。

---

参考：
苹果官方文档
stackoverflow
raywenderlich