UIBezierPath
UIBezierPath是 UIKit 中的一個(gè)類，繼承于NSObject,是Core Graphics框架關(guān)于path的一個(gè)封裝。主要用于定義一個(gè)由直線/曲線組合而成的路徑, 并且可以在自定義視圖中渲染該路徑. 在使用的過程中, 我們只需要先指定好路徑的結(jié)構(gòu), 可以是直線呼寸、曲線退个、各種形狀, 然后使用系統(tǒng)為我們提供的方法將構(gòu)建好的路徑渲染出來即可提澎。
使用步驟
- 自定義視圖,重寫View的drawRect方法（ 或者使用view添加CAShapeLayer
- 初始化創(chuàng)建UIBezierPath的對(duì)象
- 設(shè)置起始點(diǎn)，繪制path路徑
- 設(shè)置UIBezierPath對(duì)象相關(guān)屬性 （比如lineWidth歇父、lineJoinStyle、aPath.lineCapStyle再愈、color）
- 使用stroke(線)或者 fill(填充)方法結(jié)束繪圖
初始化方法
直接就可以在初始化的時(shí)候,利用封裝好的方法確定路徑
+ (instancetype)bezierPath
//矩形路徑
+ (instancetype)bezierPathWithRect:(CGRect)rect
//矩形內(nèi)切橢圓路徑
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect
//圓角矩形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius
//以"圓弧路徑"初始化一個(gè)UIBezierPath對(duì)象
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
使用以上的初始化方法榜苫，即可繪制部分圖形（矩形、圓弧等）
繪制屬性和方法
繪制方法
利用當(dāng)前設(shè)置的屬性填充路徑的封閉范圍
- (void)fill
- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha
利用當(dāng)前設(shè)置的屬性根據(jù)路徑繪制圖形
- (void)stroke
- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha
顏色設(shè)置
//[[UIColor blackColor] setFill];
- (void)setFill
//[[UIColor blackColor] setStroke];
- (void)setStroke
繪制屬性
//路徑寬度
@property(nonatomic) CGFloat lineWidth
//路徑的終點(diǎn)形狀翎冲，該屬性適用于開放路徑的起點(diǎn)和終點(diǎn)
@property(nonatomic) CGLineCap lineCapStyle
//路徑的連接點(diǎn)形狀, 默認(rèn)為kCGLineJoinMiter(全部連接), 其他可選項(xiàng)為kCGLineJoinRound(圓形連接)和kCGLineJoinBevel(斜角連接)
@property(nonatomic) CGLineJoin lineJoinStyle
路徑設(shè)置
//封閉曲線 連接起始點(diǎn)和結(jié)束點(diǎn)
- (void)closePath
//添加另一個(gè)路徑
- (void)appendPath:(UIBezierPath *)bezierPath;
//判斷是否包含某個(gè)點(diǎn)
- (BOOL)containsPoint:(CGPoint)point;
路徑繪制
使用CGContext畫圓
使用沒有封裝的Core Graphic繪圖
//一個(gè)不透明的Quartz 2D繪畫環(huán)境垂睬，相當(dāng)于一個(gè)畫布
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);//畫筆的顏色
CGContextSetLineWidth(context, 1.0);//線寬
CGContextAddArc(context,
100, 20, 15, 0, M_PI * 2.0, 0);//添加圓
CGContextDrawPath(context, kCGPathStroke);//繪制路徑
使用UIBezierPat初始化方法繪制圓弧
UIBezierPath就是針對(duì)Core Graphics庫中的CGPathRef的封裝，降低繪圖的難度
- (void)drawRect:(CGRect)rect
{
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(rect.size.width / 2, rect.size.height /2) radius:rect.size.width/2.0 startAngle:0 endAngle:2*M_PI clockwise:YES];;
[path stroke];
// [path fill];
}
基本圖形
使用點(diǎn)構(gòu)造路徑
設(shè)置初始點(diǎn)
- (void)moveToPoint:(CGPoint)point
增加一個(gè)點(diǎn)構(gòu)成一條線的路徑
- (void)addLineToPoint:(CGPoint)point
添加弧線的路線
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
繪制三角形
- (void)drawRect:(CGRect)rect {
UIBezierPath *path = [[UIBezierPath alloc] init];
//path移動(dòng)到開始畫圖的位置
[path moveToPoint:CGPointMake(rect.origin.x, rect.origin.y)];
[path addLineToPoint:CGPointMake(rect.origin.x + rect.size.width, rect.origin.y)];
[path addLineToPoint:CGPointMake(rect.origin.x + rect.size.width/2, rect.origin.y + rect.size.height)];
//關(guān)閉path
[path closePath];
[path fill];
}
使用UIBezierPath與CALayer配合使用，不需重寫drawRect方法
CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = CGRectMake(100, 400, 200, 200);
layer.lineWidth = 3.0f;
layer.strokeColor = [UIColor orangeColor].CGColor;
layer.fillColor = [UIColor yellowColor].CGColor;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 100)];
[path addLineToPoint:CGPointMake(150, 100)];
[path addLineToPoint:CGPointMake(100, 50)];
[path stroke];
[path closePath];
layer.path = path.CGPath;
[view.layer addSublayer:layer];
繪制五角星
UIBezierPath *path2 = [UIBezierPath bezierPath];
[path2 moveToPoint:CGPointMake(100, 400)];
[path2 addLineToPoint:CGPointMake(300, 400)];
[path2 addLineToPoint:CGPointMake(150, 550)];
[path2 addLineToPoint:CGPointMake(200, 300)];
[path2 addLineToPoint:CGPointMake(250, 550)];
[path2 closePath];
// path2.lineWidth = 10;
// [path2 stroke];
[[UIColor redColor] setFill];
[path2 fill];
二階羔飞、三階貝塞爾曲線
底下有控制點(diǎn)算法的文章肺樟，有興趣可以研究下
二階貝塞爾曲線
// endPoint: 曲線的終點(diǎn)位置
// controlPoint: 控制點(diǎn)
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
繪制二階曲線
二階動(dòng)畫
- (void)drawRect:(CGRect)rect
{
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint currentPoint = CGPointMake(100, rect.size.height / 2.0);
CGPoint endPoint = CGPointMake(300, rect.size.height / 2.0);
[path moveToPoint:currentPoint];
if (_touchPoint.y == 0) {
_touchPoint.x = 200;
_touchPoint.y = rect.size.height / 2.0 - 100;
}
[path addQuadCurveToPoint:endPoint controlPoint:_touchPoint];
[path stroke];
//起始點(diǎn)
UIBezierPath *dot1 = [UIBezierPath bezierPathWithArcCenter:currentPoint radius:2 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[dot1 fill];
//結(jié)束點(diǎn)
UIBezierPath *dot2 = [UIBezierPath bezierPathWithArcCenter:endPoint radius:2 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[dot2 fill];
//控制點(diǎn)
UIBezierPath *dot3 = [UIBezierPath bezierPathWithArcCenter:_touchPoint radius:2 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[[UIColor redColor] setFill];
[dot3 fill];
//控制線點(diǎn)
UIBezierPath *path2 = [UIBezierPath bezierPath];
CGFloat dashPattern[] = {3,1};// 3實(shí)線，1空白
[path2 setLineDash:dashPattern count:1 phase:1];
[path2 moveToPoint:currentPoint];
[path2 addLineToPoint:_touchPoint];
[path2 addLineToPoint:endPoint];
[path2 stroke];
}
三階貝塞爾曲線
// endPoint: 曲線的終點(diǎn)位置
// controlPoint1: 第一控制點(diǎn)
// controlPoint2: 第二控制點(diǎn)
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
繪制三階貝塞爾曲線
三階動(dòng)畫
- (void)drawRect:(CGRect)rect
{
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint currentPoint = CGPointMake(10, rect.size.height / 2.0);
CGPoint endPoint = CGPointMake(300, rect.size.height / 2.0);
[path moveToPoint:currentPoint];
if (_controlPoint1.y == 0) {
_controlPoint1.x = 100;
_controlPoint1.y = rect.size.height / 2.0 - 100;
}
if (_controlPoint2.y == 0) {
_controlPoint2.x = 200;
_controlPoint2.y = rect.size.height / 2.0 + 100;
}
// [path addQuadCurveToPoint:endPoint controlPoint:_touchPoint];
[path addCurveToPoint:endPoint controlPoint1:_controlPoint1 controlPoint2:_controlPoint2];
[path stroke];
//起始點(diǎn)
UIBezierPath *dot1 = [UIBezierPath bezierPathWithArcCenter:currentPoint radius:2 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[dot1 fill];
//結(jié)束點(diǎn)
UIBezierPath *dot2 = [UIBezierPath bezierPathWithArcCenter:endPoint radius:2 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[dot2 fill];
//控制點(diǎn)1
UIBezierPath *dot3 = [UIBezierPath bezierPathWithArcCenter:_controlPoint1 radius:2 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[[UIColor redColor] setFill];
[dot3 fill];
//控制點(diǎn)2
UIBezierPath *dot4 = [UIBezierPath bezierPathWithArcCenter:_controlPoint2 radius:2 startAngle:0 endAngle:2 * M_PI clockwise:YES];
[[UIColor redColor] setFill];
[dot4 fill];
//控制線點(diǎn)
UIBezierPath *path2 = [UIBezierPath bezierPath];
CGFloat dashPattern[] = {3,1};// 3實(shí)線逻淌，1空白
[path2 setLineDash:dashPattern count:1 phase:1];
[path2 moveToPoint:currentPoint];
[path2 addLineToPoint:_controlPoint1];
[path2 addLineToPoint:_controlPoint2];
[path2 addLineToPoint:endPoint];
[path2 stroke];
}
