在之前的文章中，由於用到過UIBezierPath這個類，所以這里就對這個類進行簡單的記錄一下，方便自己也方便他人。
使用UIBezierPath類可以創建基於矢量的路徑，這個類在UIKit中。它是基於Core Graphics對CGPathRef數據類型和path繪圖屬性的一個封裝，所以是需要圖形上下文的CGContextRef，所以一般UIBezierPath在drawRect中使用。使用此類可以定義簡單的形狀，如橢圓或者矩形，或者有多個直線和曲線段組成的形狀.下面就簡單介紹以下。
UIBezierPath常用方法及屬性
屬性
1.CGPath :
將UIBezierPath類轉換成CGPath，和UIColor的CGColor類似
2.currentPoint：
當前path的位置，可以理解為path的終點
3.lineWidth：
可以理解為路徑的寬度
4.lineCapStyle：
path端點樣式，有3種樣式
typedef CF_ENUM(int32_t, CGLineCap) {
kCGLineCapButt,//無端點
kCGLineCapRound,//圓形端點
kCGLineCapSquare//和無端點差不多，但是要長一點
};
見下圖 分別為三種方式
5.lineJoinStyle：
path拐角樣式，也有3種樣式
typedef CF_ENUM(int32_t, CGLineJoin) {
kCGLineJoinMiter,//尖角
kCGLineJoinRound,//圓角
kCGLineJoinBevel//切角
};
效果如下
6.miterLimit：
最大斜接長度，怎么理解呢？就是上圖中拐角處外面尖角和內部尖角的距離。但是這個只有在kCGLineJoinMiter情況下使用才有效果，如果這個miterLimit小於斜接長度，就成為了kCGLineJoinBevel類型
我測試的代碼為
//斷點樣式
switch (i) {
case 0:
{
//尖角
path.lineJoinStyle = kCGLineJoinMiter;
//這里設為1 因為斜接長度超過了1 所以就自動轉化為了kCGLineJoinBevel類型
//path.miterLimit = 1;
}
7.UIRectCorner
角 分為四種情況
typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
UIRectCornerTopLeft = 1 << 0,//左上
UIRectCornerTopRight = 1 << 1,//右上
UIRectCornerBottomLeft = 1 << 2,//左下
UIRectCornerBottomRight = 1 << 3,//右下
UIRectCornerAllCorners = ~0UL//全部
};
這個情況我會在后面的方法中運用展示出效果
方法
//在rect內創建矩形
+ (instancetype)bezierPathWithRect:(CGRect)rect;
//畫矩形
- (void)gl_bezierPathWithRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //設置線條顏色
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(10, 40, MIN(100, rect.size.width), MIN(100, rect.size.height))];
path.lineWidth = 5;
path.lineCapStyle = kCGLineCapButt;
path.lineJoinStyle = kCGLineJoinMiter;
[path stroke];
}
效果如下：
//創建在rect內的內切曲線
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
//在rect內創建內切的曲線
- (void)gl_bezierPathWithOvalInRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //設置線條顏色
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 40, MIN(100, rect.size.width), MIN(200, rect.size.height))];
path.lineWidth = 5;
path.lineCapStyle = kCGLineCapButt;
path.lineJoinStyle = kCGLineJoinMiter;
[path stroke];
}
效果如下
3.
//創建帶有圓角的矩形，cornerRadius為圓角，如果矩形為正方形切cornerRadius大於正方形的邊長的一半時，cornerRadius就不再有效果，矩形就成為圓形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
//創建帶有圓角的矩形
- (void)gl_bezierPathWithRoundedRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //設置線條顏色
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 40, MIN(100, rect.size.width), MIN(100, rect.size.height)) cornerRadius:10];
path.lineWidth = 2;
path.lineCapStyle = kCGLineCapButt;
path.lineJoinStyle = kCGLineJoinMiter;
[path stroke];
}
效果如下
//創建特定的角為圓角的矩形 corners 分別對應上面屬性中的類型，cornerRadii圓角的大小，已size中最大的為准，如果超過其鄰近最短邊的一半，則已最短邊一半為准
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii
//創建有特點圓角的矩形 可以分別設四個角
- (void)gl_speical_bezierPathWithRoundedRect:(CGRect)rect
{
UIColor *color = [UIColor redColor];
[color set]; //設置線條顏色
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 40, MIN(100, rect.size.width), MIN(200, rect.size.height)) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(100, 100)];
path.lineWidth = 2;
path.lineCapStyle = kCGLineCapButt;
path.lineJoinStyle = kCGLineJoinMiter;
[path stroke];
}
效果如下
//創建圓弧 center圓心 radius 半徑 startAngle 起始位置 endAngle終點 clockwise 是否順時針
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
//由於此方法和下面方法效果一樣所以就用其中一個進行效果展示
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);
//添加圓弧
- (void)gl_drawArc
{
[[UIColor redColor]set];
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 3.0;
//以下參數分別為圓弧的中心坐標 半徑 起點 終點 是否順時針
[path addArcWithCenter:CGPointMake(self.frame.size.width/2.0, self.frame.size.height/2.0) radius:50 startAngle:0 endAngle:3 * M_PI_2 clockwise:YES];
[path stroke];
}
效果如下
使用該方法的時候，弧度可以參考下面的圖片
在上述方法中，我們都用的是[path stroke]這個方法，查看API會發現還有一個方法fill，那么這兩個方法有什么區別呢？我這里就以上面的添加圓弧方法為例進行修改，其效果為下：
由此可見，fill方法應該是填充的意思
6.
//移動到某個位置 一般和其他方法配合使用
- (void)moveToPoint:(CGPoint)point;
//繪制一條線
- (void)addLineToPoint:(CGPoint)point
//下面是將方法6 和 方法7一起使用畫出本文第一張圖的代碼
//畫線條
- (void)gl_drawLine
{
//顏色設置
[[UIColor redColor]set];
for (NSInteger i = 0; i < 3; i++)
{
UIBezierPath *path = [UIBezierPath bezierPath];
//線條的寬度
path.lineWidth = 5.0;
[path moveToPoint:CGPointMake(10, (1+i)*40)];
[path addLineToPoint:CGPointMake(100, (1+i)*40)];
//斷點樣式
switch (i) {
case 0:
{
//無端點
path.lineCapStyle = kCGLineCapButt;
}
break;
case 1:
{
//圓形端點
path.lineCapStyle = kCGLineCapRound;
}
break;
case 2:
{
//方形端點 和無端點差不多 但是要長一點點
path.lineCapStyle = kCGLineCapSquare;
}
break;
default:
break;
}
[path stroke];
}
}
8
//創建三次貝塞爾曲線
//endPoint 終點坐標 controlPoint1 控制坐標1 controlPoint2 控制坐標2
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
//創建三次貝塞爾曲線
- (void)gl_drawThreeBezier
{
[[UIColor redColor]set];
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 3.0;
//起點坐標
[path moveToPoint:CGPointMake(10, 140)];
//下面三個點分別為 終點坐標 控制坐標1 控制坐標2
[path addCurveToPoint:CGPointMake(190, 100) controlPoint1:CGPointMake(100, 50) controlPoint2:CGPointMake(130, 190)];
[path stroke];
}
效果圖如下
參考圖如下
//創建二次貝塞爾曲線 endPoint 終點 控制坐標
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
//創建二次貝塞爾曲線
- (void)gl_drawBezier
{
[[UIColor redColor]set];
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 3.0;
//起點坐標
[path moveToPoint:CGPointMake(10, 140)];
//下面三個點分別為 終點坐標 控制坐標
[path addQuadCurveToPoint:CGPointMake(190, 100) controlPoint:CGPointMake(100, 50)];
[path stroke];
}
效果如下
參考圖如下
//將路徑閉合，即將起點和終點連起
- (void)closePath;
//清空所有路徑
- (void)removeAllPoints;
//顧名思義 應該是追加路徑的意思
- (void)appendPath:(UIBezierPath *)bezierPath
//繪制虛線
- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;
//pattern 線段數組 如：CGFloat dash[] = {1,1}; 代表實線和空白交替的長度 及先繪制1個長度再空1個，再繪制一個.....
//count數組長度 count值小於數組實際長度時，方法就會對相應長度的數組元素進行循環，而大於的時候 會有警告，沒有效果
//phase 循環數組時跳過的長度，如pattern為{2,6}，phase為1，則第一個元素畫1的時候就跳過直接畫6
//在上面畫線的方法中，添加以下代碼
CGFloat dash[] = {2,6};
[path setLineDash:dash count:2 phase:1];
效果最終如下
所有方法可以在下面這個地方進行使用，需要用就打開，不用就屏蔽
//BezierPathView.m
- (void)drawRect:(CGRect)rect {
// [self gl_bezierPathWithRect:rect];
[self gl_drawLine];
// [self gl_drawCorner];
// [self gl_drawThreeBezier];
// [self gl_drawBezier];
// [self gl_drawArc];
// [self gl_bezierPathWithOvalInRect:rect];
// [self gl_bezierPathWithRoundedRect:rect];
// [self gl_speical_bezierPathWithRoundedRect:rect];
}
項目文件截圖：
iOS 之UIBezierPath
注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權