關(guān)于 UIBezierPath
UIBezierPath
這個類在UIKit中幕与, 是Core Graphics框架關(guān)于path的一個封裝穷吮,使用此類可以定義簡單的形狀宣增,比如我們常用到诲祸,矩形京办,圓形肖油,橢圓,弧臂港,或者不規(guī)則的多邊形
UIBezierPath 基本使用方法
UIBezierPath
對象是CGPathRef數(shù)據(jù)類型的封裝森枪。path如果是基于矢量形狀的,都用直線或曲線去創(chuàng)建审孽。我們一般使用UIBezierPath
都是在重寫view的drawRect
方法這種情形县袱。我們用直線去創(chuàng)建矩形或多邊形,使用曲線創(chuàng)建弧或者圓佑力。創(chuàng)建和使用path對象步驟:
1式散、 重寫View的drawRect
方法
2、 創(chuàng)建UIBezierPath
的對象
3打颤、 使用方法moveToPoint:
設(shè)置初始點
4暴拄、 根據(jù)具體要求使用UIBezierPath
類方法繪圖(比如要畫線漓滔、矩形、圓乖篷、幌炻俊?等)
5撕蔼、 設(shè)置UIBezierPath
對象相關(guān)屬性 (比如lineWidth
豁鲤、lineJoinStyle
、aPath.lineCapStyle
鲸沮、color
)
6琳骡、 使用stroke 或者 fill方法結(jié)束繪圖
比如我們想要畫一條線demo:
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set]; //設(shè)置線條顏色
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(10, 10)];
[path addLineToPoint:CGPointMake(200, 80)];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound; //線條拐角
path.lineJoinStyle = kCGLineJoinRound; //終點處理
[path stroke];
}
其他基本使用方法
在介紹其他使用方法之前,我們先來看一下 path
的幾個屬性讼溺,以便下面我進行設(shè)置楣号。
[color set];
設(shè)置線條顏色,也就是相當(dāng)于畫筆顏色path.lineWidth = 5.0;
這個很好理解了怒坯,就是劃線的寬度path.lineCapStyle
這個線段起點是終點的樣式竖席,這個樣式有三種:
3.1kCGLineCapButt
該屬性值指定不繪制端點, 線條結(jié)尾處直接結(jié)束敬肚。這是默認(rèn)值。
3.2kCGLineCapRound
該屬性值指定繪制圓形端點束析, 線條結(jié)尾處繪制一個直徑為線條寬度的半圓艳馒。
3.3kCGLineCapSquare
該屬性值指定繪制方形端點。 線條結(jié)尾處繪制半個邊長為線條寬度的正方形员寇。需要說明的是弄慰,這種形狀的端點與“butt”形狀的端點十分相似,只是采用這種形式的端點的線條略長一點而已*path.lineJoinStyle
這個屬性是用來設(shè)置兩條線連結(jié)點的樣式蝶锋,同樣它也有三種樣式供我們選擇
4.1kCGLineJoinMiter
斜接
4.2kCGLineJoinRound
圓滑銜接
4.3kCGLineJoinBevel
斜角連接[path stroke];
用 stroke 得到的是不被填充的 view 陆爽,[path fill];
用 fill 得到的內(nèi)部被填充的 view,這點在下面的代碼還有繪制得到的圖片中有扳缕,可以體會一下這兩者的不同慌闭。
繪制多邊形
繪制多邊形,實際上就是又一些直線條連成躯舔,主要使用moveToPoint:
和addLineToPoint:
方法去創(chuàng)建驴剔,moveToPoint:
這個方法是設(shè)置起始點,意味著從這個點開始粥庄,我們就可以使用addLineToPoint:
去設(shè)置我們想要創(chuàng)建的多邊形經(jīng)過的點丧失,也就是兩線相交的那個點,用``` addLineToPoint:``去創(chuàng)建一個形狀的線段惜互,我們可以連續(xù)創(chuàng)建line布讹,每一個line的起點都是先前的終點琳拭,終點就是指定的點,將線段連接起來就是我們想要創(chuàng)建的多邊形了描验。
#import "DrawPolygonView.h"
@implementation DrawPolygonView
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set]; //設(shè)置線條顏色
UIBezierPath* path = [UIBezierPath bezierPath];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound; //線條拐角
path.lineJoinStyle = kCGLineJoinRound; //終點處理
[path moveToPoint:CGPointMake(200.0, 50.0)];//起點
// Draw the lines
[path addLineToPoint:CGPointMake(300.0, 100.0)];
[path addLineToPoint:CGPointMake(260, 200)];
[path addLineToPoint:CGPointMake(100.0, 200)];
[path addLineToPoint:CGPointMake(100, 70.0)];
[path closePath];//第五條線通過調(diào)用closePath方法得到的
// [path stroke];//Draws line 根據(jù)坐標(biāo)點連線
[path fill];//顏色填充
}
在這里我們可以看到最后第五條線是用[path closePath];
得到的白嘁,closePath方法不僅結(jié)束一個shape的subpath表述,它也在最后一個點和第一個點之間畫一條線段挠乳,這個一個便利的方法我們不需要去畫最后一條線了权薯, 哈哈哈哈。這里我們用到的是[path fill];//顏色填充
進行坐標(biāo)連點睡扬,但是我們看見的是五邊形內(nèi)部被顏色填充了盟蚣, 如果我們使用[path stroke];
那我們得到的就是一個用線畫的五邊形。
畫矩形或者正方形
大家都知道正方形就是特殊的矩形咯卖怜,不多講屎开。只說矩形。
使用+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect
這個方法马靠,設(shè)置好坐標(biāo) frame 就好了奄抽,就像我們創(chuàng)建 view 一樣,好理解甩鳄。
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set]; //設(shè)置線條顏色
UIBezierPath* path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 80)];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound; //線條拐角
path.lineJoinStyle = kCGLineJoinRound; //終點處理
[path stroke];
}
創(chuàng)建圓形或者橢圓形
使用+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect
這個方法創(chuàng)建圓形或者橢圓形逞度。
傳入的rect矩形參數(shù)繪制一個內(nèi)切曲線,如果我們傳入的rect是矩形就得到矩形的內(nèi)切橢圓妙啃,如果傳入的是 正方形得到的就是正方形的內(nèi)切圓档泽。
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set];
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:90 startAngle:0 endAngle:TO_RADIAUS(120) clockwise:YES];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinRound;
[path stroke];
}
創(chuàng)建一段弧線
使用+ (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwis
這個方法創(chuàng)建一段弧線,介紹一下這個方法中的參數(shù):
ArcCenter: 原點
radius: 半徑
startAngle: 開始角度
endAngle: 結(jié)束角度
clockwise: 是否順時針方向
弧線的參考系:
繪制二次貝塞爾曲線
使用- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
這個方法繪制二次貝塞爾曲線揖赴。曲線段在當(dāng)前點開始馆匿,在指定的點結(jié)束,
一個控制點的切線定義燥滑。下圖顯示了兩種曲線類型的相似渐北,以及控制點和curve形狀的關(guān)系:
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set];
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinRound;
/*
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
Parameters
endPoint
The end point of the curve.
controlPoint
The control point of the curve.
*/
[path moveToPoint:CGPointMake(40, 150)];
[path addQuadCurveToPoint:CGPointMake(140, 200) controlPoint:CGPointMake(20, 40)];
[path stroke];
}
繪制三次貝塞爾曲線
使用這個方法繪制三次貝塞爾曲線
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
Parameters
這個方法繪制三次貝塞爾曲線。曲線段在當(dāng)前點開始铭拧,在指定的點結(jié)束赃蛛,兩個控制點的切線定義。下圖顯示了兩種曲線類型的相似搀菩,以及控制點和curve形狀的關(guān)系:
- (void)drawRect:(CGRect)rect {
/*
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
Parameters
endPoint
The end point of the curve.
controlPoint1
The first control point to use when computing the curve.
controlPoint2
The second control point to use when computing the curve.
*/
UIColor *color = [UIColor redColor];
[color set];
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinRound;
[path moveToPoint:CGPointMake(20, 200)];
[path addCurveToPoint:CGPointMake(260, 200) controlPoint1:CGPointMake(140, 0) controlPoint2:CGPointMake(140, 400)];
[path stroke];
}
畫帶圓角的矩形
使用+ (instancetype)bezierPathWithRect:(CGRect)rect;
這個方法繪制焊虏,這個方法和bezierPathWithRect:
類似,繪制一個帶內(nèi)切圓的矩形秕磷。
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set]; //設(shè)置線條顏色
UIBezierPath* path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 100, 80)];
path.lineWidth = 5.0;
path.lineCapStyle = kCGLineCapRound; //線條拐角
path.lineJoinStyle = kCGLineJoinRound; //終點處理
[path stroke];
}
指定矩形的某個角為圓角
使用+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
UIRectCornerTopLeft = 1 << 0,
UIRectCornerTopRight = 1 << 1,
UIRectCornerBottomLeft = 1 << 2,
UIRectCornerBottomRight = 1 << 3,
UIRectCornerAllCorners = ~0UL
}; UIRectCorner 用來指定需要設(shè)置的角诵闭。cornerRadii 圓角的半徑
- (void)drawRect:(CGRect)rect {
UIColor *color = [UIColor redColor];
[color set];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 100, 100) byRoundingCorners:UIRectCornerTopRight cornerRadii:CGSizeMake(20, 20)];
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinRound;
path.lineWidth = 5.0;
[path stroke];
}
總結(jié):- (void)drawRect:(CGRect)rect
有會導(dǎo)致內(nèi)存問題不建議使用,這里使用只是為了演示方便,實際開發(fā)中我們還要結(jié)合CAShapeLayer來生成自己想要的圖形疏尿。后續(xù)有時間會更新瘟芝,歡迎交流。