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