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为半径画弧。