UIBezierPath是UIKit中Core Graphics框架中的一個(gè)類根资，使用UIBezierPath可以繪制各種簡(jiǎn)單的圖形岁歉。
iOS-貝塞爾曲線(UIBezierPath)的基本使用
iOS-貝塞爾曲線(UIBezierPath)詳解(CAShapeLayer)
iOS-UIBezierPath動(dòng)畫之果凍動(dòng)畫
iOS-CGContextRef開啟上下文繪圖
我在上一篇文章中簡(jiǎn)單介紹了一下在UIView的- (void)drawRect:(CGRect)rect方法里面繪制圖形拂封。但是在實(shí)際使用的時(shí)候往往用的不多。本篇文章主要介紹一個(gè)關(guān)于CAShapeLayer的使用
我們會(huì)繪制一些常用的圖形，以及圖形動(dòng)畫晤斩。
今天我們將UIBezierPath結(jié)合CAShapeLayer使用餐弱。
CAShapeLayer和UIView里面的drawRect方法不一樣宴霸，稍微有點(diǎn)麻煩，我們要先了解一些概念：
?? ?? ?? ?? ?? ??
CAShapeLayer
先簡(jiǎn)單介紹一些CAShapeLayer：
- CAShapeLayer繼承自CALayer膏蚓，因此瓢谢，它具有CALayer的所有特性。但是驮瞧，CAShapeLayer需要和貝塞爾曲線配合使用才有意義氓扛。
CAShapeLayer和drawRect比較：
- CAShapeLayer：屬于CoreAnimation框架，通過(guò)GPU來(lái)渲染圖形论笔，不耗費(fèi)性能采郎。
- drawRect：屬于Core Graphics框架愛，占用大量CPU狂魔，耗費(fèi)性能尉剩。
CAShapeLayer屬性列表簡(jiǎn)介
-
path: CGPathRef對(duì)象，圖像形狀的路徑 -
fillColor：CGColorRef對(duì)象毅臊，圖像填充顏色理茎，默認(rèn)黑色 -
strokeColor：邊線的顏色 -
strokeStart,strokeEnd：CGFloat類型黑界，表示畫邊線的起點(diǎn)和終點(diǎn)，范圍是[0,1]皂林。 -
lineWidth：邊線的寬度 -
miterLimit：描邊時(shí)使用的斜接限制朗鸠。默認(rèn)為10。 -
lineCap：線條終點(diǎn)的樣式 -
lineJoin：線條拐點(diǎn)的樣式 -
lineDashPhase：邊線的起始位置础倍，表現(xiàn)是一段空白 -
lineDashPattern：這是一個(gè)數(shù)組烛占，表示設(shè)置邊線的樣式，默認(rèn)是實(shí)線沟启，數(shù)組中的數(shù)值依次表示虛線中忆家，單個(gè)線段長(zhǎng)度，一段空白長(zhǎng)度德迹，比如：@[2,3,4,5]表示：長(zhǎng)度為2的線芽卿，后面長(zhǎng)度為3的空白，后面長(zhǎng)度為4的線胳搞，卸例，長(zhǎng)度為5的空白，以此類推肌毅，不斷循環(huán)筷转。
CAShapeLayer與UIBezierPath的關(guān)系
- 貝塞爾曲線給CAShapeLayer提供路徑，CAShapeLayer在提供的路徑中進(jìn)行渲染悬而。路徑會(huì)閉環(huán)呜舒，繪制出shape。
- 貝塞爾曲線可以創(chuàng)建適量路徑笨奠，UIBezierPath是一個(gè)CGPathRef的封裝
- 用于CAShapeLayer的貝塞爾曲線作為path袭蝗，其path是一個(gè)首尾相接的閉環(huán)的曲線，即使該貝塞爾曲線不是一個(gè)閉環(huán)的曲線
也就是說(shuō)：將UIBezierPath對(duì)象轉(zhuǎn)化為CGPathRef對(duì)象艰躺，賦值給CAShapeLayer的path屬性呻袭，即可畫出各種圖形眨八。
下面我們寫幾個(gè)常用的例子：
更詳細(xì)的可以參考iOS-貝塞爾曲線(UIBezierPath)的使用(一)
折線
使用方法：
//折線
- (void)test1{
// 創(chuàng)建一個(gè)路徑對(duì)象
UIBezierPath *linePath = [UIBezierPath bezierPath];
// 起點(diǎn)
[linePath moveToPoint:CGPointMake(100, 100)];
// 其他點(diǎn)
[linePath addLineToPoint:CGPointMake(200,200)];
[linePath addLineToPoint:CGPointMake(230,130)];
// 設(shè)置路徑畫布
CAShapeLayer *lineLayer = [CAShapeLayer layer];
lineLayer.bounds = CGRectMake(0, 0, 300, 300);
lineLayer.position = CGPointMake(kScreenWidth/2, kScreenWidth/2);
lineLayer.lineWidth = 3.0;
lineLayer.strokeColor = [UIColor redColor].CGColor; // 邊線顏色
lineLayer.path = linePath.CGPath;
lineLayer.fillColor = nil; // 默認(rèn)是black
[self.bgView.layer addSublayer:lineLayer];
}
效果圖如下：
多邊形
使用方法：
- (void)test2{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 100)];
[path addLineToPoint:CGPointMake(150, 50)];
[path addLineToPoint:CGPointMake(250, 100)];
[path addLineToPoint:CGPointMake(250, 200)];
[path addLineToPoint:CGPointMake(100, 200)];
[path closePath]; // 最后一根線條,可以直接調(diào)此方法
// 設(shè)置路徑畫布
CAShapeLayer *lineLayer = [CAShapeLayer layer];
lineLayer.bounds = CGRectMake(0, 0, 300, 300);
lineLayer.position = CGPointMake(kScreenWidth/2, kScreenWidth/2);
lineLayer.lineWidth = 3.0;
lineLayer.strokeColor = [UIColor redColor].CGColor; // 邊線顏色
lineLayer.path = path.CGPath;
lineLayer.fillColor = [UIColor yellowColor].CGColor; // 默認(rèn)是black
[self.bgView.layer addSublayer:lineLayer];
}
效果圖如下：
圓弧
使用方法
- (void)test3{
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 200) radius:100 startAngle:1.25 * M_PI endAngle:1.75 * M_PI clockwise:YES];
[path addLineToPoint:CGPointMake(200, 200)];
[path closePath];
// 設(shè)置路徑畫布
CAShapeLayer *lineLayer = [CAShapeLayer layer];
lineLayer.bounds = CGRectMake(0, 0, 300, 300);
lineLayer.position = CGPointMake(kScreenWidth/2, kScreenWidth/2);
lineLayer.lineWidth = 3.0;
lineLayer.strokeColor = [UIColor redColor].CGColor; // 邊線顏色
lineLayer.path = path.CGPath;
lineLayer.fillColor = [UIColor yellowColor].CGColor; // 默認(rèn)是black
lineLayer.lineCap = kCALineCapRound;
lineLayer.lineJoin = kCALineJoinRound; //線條拐角
[self.bgView.layer addSublayer:lineLayer];
}
效果圖如下：
小結(jié)：
大家可以看出來(lái)CAShapeLayer的使用基本和UIView里面的drawRect使用類似腺兴，首選創(chuàng)建UIBezierPath，將path賦值給CAShapeLayer即可廉侧。
所以其他的例子：園页响，橢圓，矩形段誊，曲線等等闰蚕，就不再一一距離了。
下面我們介紹一下mask
為已有視圖畫圓角
在項(xiàng)目中經(jīng)常會(huì)有切圓角的情況连舍，我們使用masksToBounds即可没陡，結(jié)果就會(huì)給視圖切四個(gè)圓角。
但是，當(dāng)我們只需要切其中一個(gè)盼玄，或者兩個(gè)圓角的時(shí)候怎么切呢贴彼？
關(guān)鍵在于：self.testView.layer.mask = lineLayer;
使用方法如下：
self.testView.backgroundColor = [UIColor orangeColor];
self.testView.frame = CGRectMake(100, 100, 200, 200);
[self.view addSubview:self.testView];
- (void)test4{
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:self.testView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(25, 25)];
// 設(shè)置路徑畫布
CAShapeLayer *lineLayer = [[CAShapeLayer alloc] init];
lineLayer.frame = self.testView.bounds;
lineLayer.path = path.CGPath;
[self.testView.layer addSublayer:lineLayer];
self.testView.layer.mask = lineLayer;
}
效果如下：
動(dòng)畫
我們什么時(shí)候會(huì)用到貝塞爾曲線呢？
最常見的是走勢(shì)圖埃儿，比如：記錄最近一周的溫度變化器仗，每年度NBA排名趨勢(shì)，等等童番。精钮。。
比如：
一般就是換一個(gè)折線即可剃斧。如果我們加上動(dòng)畫轨香，那就更好看了，下面我們舉個(gè)簡(jiǎn)單的例子：
先看效果圖：
使用方法：
.h文件
@interface JJBezierAnimationView : UIView
- (void)setItemValues:(NSArray *)items;
@end
.m文件
#import "JJBezierAnimationView.h"
@interface JJBezierAnimationView()
@end
@implementation JJBezierAnimationView
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
}
return self;
}
- (void)setItemValues:(NSArray *)items{
UIBezierPath *pAxisPath = [UIBezierPath bezierPath];
CGFloat margin = 50;
CGFloat w = 30;
CGFloat h = 20;
for (int i = 0; i < items.count; i ++) {
NSString *str = items[i];
CGFloat value = [str floatValue];
CGPoint point = CGPointMake(margin + i * w, h * value+100);
if (i == 0) {
[pAxisPath moveToPoint:point];
} else {
[pAxisPath addLineToPoint:point];
}
}
CAShapeLayer *pAxisLayer = [CAShapeLayer layer];
pAxisLayer.lineWidth = 3;
pAxisLayer.strokeColor = [UIColor redColor].CGColor;
pAxisLayer.fillColor = [UIColor clearColor].CGColor;
pAxisLayer.path = pAxisPath.CGPath;
[self.layer addSublayer:pAxisLayer];
CABasicAnimation *anmi = [CABasicAnimation animation];
anmi.keyPath = @"strokeEnd";
anmi.fromValue = [NSNumber numberWithFloat:0];
anmi.toValue = [NSNumber numberWithFloat:1.0f];
anmi.duration = 5;
anmi.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
anmi.autoreverses = NO;
[pAxisLayer addAnimation:anmi forKey:@"stroke"];
}
@end
調(diào)用方法：
JJBezierAnimationView *bezierView = [[JJBezierAnimationView alloc] init];
[bezierView setItemValues:@[@"1",@"4",@"3",@"2",@"8",@"6",@"2",@"8",@"5",@"7",@"4",@"6"]];
[self.bgView addSubview:bezierView];
總結(jié)
本文簡(jiǎn)單介紹了CAShapeLayer的使用悯衬。
iOS-貝塞爾曲線(UIBezierPath)的基本使用和本篇文章介紹的都是很基礎(chǔ)的使用弹沽，后面我們做一些小demo。
