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

导语

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

本篇内容将介绍自定义button的实现。

需要用到的知识有：drawRect:, CGPathAddArcToPoint()

一、初始工作

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

CXZButton.h

#import 
    
     @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

二、绘制圆角矩形

我们已经可以画出一个直角矩形，只要在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为半径画弧。

参考：