關(guān)于UIBezierPath基礎(chǔ)
UIBezierPath對(duì)象是CGPathRef數(shù)據(jù)類型的封裝铅乡。path如果是基于矢量形狀的愕够，都用直線和曲線段去創(chuàng)建。
我們使用直線段去創(chuàng)建矩形和多邊形抄淑，使用曲線段去創(chuàng)建挥摹（arc）遮咖，圓或者其他復(fù)雜的曲線形狀滩字。每一段都包括一個(gè)或者多個(gè)點(diǎn)，繪圖命令定義如何去詮釋這些點(diǎn)御吞。每一個(gè)直線段或者曲線段的結(jié)束的地方是下一個(gè)的開始的地方麦箍。每一個(gè)連接的直線或者曲線段的集合成為subpath。一個(gè)UIBezierPath對(duì)象定義一個(gè)完整的路徑包括一個(gè)或者多個(gè)subpaths陶珠。
*** 首先我們需要自定義一個(gè)View繼承UIView??,用來繪制曲線 ***
1.創(chuàng)建一個(gè)三角形
- (void)drawRect:(CGRect)rect {
// 1. 創(chuàng)建UIBezierPath對(duì)象
UIBezierPath *path = [UIBezierPath bezierPath];
// 2. 設(shè)置相關(guān)屬性
path.lineWidth = 3.0f; // 線條寬度
[[UIColor redColor] set]; // 線條顏色
path.lineCapStyle = kCGLineCapRound; // 線條拐角
path.lineJoinStyle = kCGLineCapRound;// 終點(diǎn)處理
// 3.通過moveToPoint:設(shè)置起點(diǎn)
[path moveToPoint:CGPointMake(200, 200)];
// 添加line為subPaths
[path addLineToPoint:(CGPointMake(100, 400))];
[path addLineToPoint:(CGPointMake(300, 400))];
[path closePath];
// 開始繪畫
[path stroke];
// 開始繪畫并填充
//[path fill];
}
關(guān)于stroke和fill的效果圖如下
stroke效果
fill效果.png
2.創(chuàng)建矩形,圓形,和一段弧線
- (void)drawRect:(CGRect)rect {
// 創(chuàng)建矩形
UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:(CGRectMake(50, 100, 100, 100))];
rectPath.lineWidth = 3.0f;
[[UIColor redColor] set];
rectPath.lineCapStyle = kCGLineCapRound;
rectPath.lineJoinStyle = kCGLineCapRound;
[rectPath stroke];
// 創(chuàng)建內(nèi)切圓
UIBezierPath *oval = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 300, 300, 300)];
oval.lineWidth = 3.0f;
[[UIColor greenColor] set];
oval.lineCapStyle = kCGLineCapRound;
oval.lineJoinStyle = kCGLineCapRound;
[oval stroke];
// 弧線
CGFloat endAngle = 120 *sinf(M_PI / 180);
UIBezierPath *arcPath = [UIBezierPath bezierPathWithArcCenter:(CGPointMake(300, 100)) radius:100 startAngle:0.0 endAngle:endAngle clockwise:YES];
arcPath.lineWidth = 5.0f;
[[UIColor purpleColor] set];
arcPath.lineCapStyle = kCGLineCapRound;
arcPath.lineJoinStyle = kCGLineCapRound;
[arcPath stroke];
}
附上效果圖:
CAShapeLayer和CAGradientLayer
- CAShapeLayer是一個(gè)通過矢量圖形而不是bitmap來繪制的圖層子類挟裂。可以指定顏色和線寬等屬性揍诽，用CGPath來描述繪制的圖形.
- CAGradientLayer,蘋果給出的官方描述是:一個(gè)可以用來進(jìn)行繪制##漸變背景色的layer
實(shí)戰(zhàn)一:寫一個(gè)環(huán)形的進(jìn)度條
1.先通過CAShapeLayer和BezierPath創(chuàng)建一個(gè)圓形的進(jìn)度條出來
- (void)viewDidLoad {
[super viewDidLoad];
// 創(chuàng)建曲線,繪制圓形path
UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.view.center.x, self.view.center.y) radius:100 startAngle:M_PI endAngle:-M_PI clockwise:NO];
// 創(chuàng)建shapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = self.view.bounds;// 設(shè)置圖層大小
shapeLayer.path = circlePath.CGPath;// 設(shè)置shapeLayer的cgPath
shapeLayer.opacity = 1.0f; //設(shè)置透明度0~1之間
shapeLayer.lineCap = kCALineCapRound;//制定線的邊緣是圓形
shapeLayer.lineWidth = 5.0f; // 設(shè)置線寬
shapeLayer.strokeColor = [UIColor lightGrayColor].CGColor;// 設(shè)置線條顏色
[shapeLayer setFillColor:[UIColor clearColor].CGColor]; // 清楚填充顏色
[self.view.layer addSublayer:shapeLayer];}
效果圖??
2.創(chuàng)建CAGradientLayer設(shè)置漸變顏色
// 創(chuàng)建顏色數(shù)組
NSMutableArray *colors = [NSMutableArray array];
for (NSInteger hue = 0; hue <= 360; hue += 5)
{
UIColor * color = [UIColor colorWithHue:1.0 * hue / 360
saturation:1.0
brightness:1.0
alpha:1.0];
[colors addObject:(id)[color CGColor]];
}
CAGradientLayer *grandient = [CAGradientLayer layer];
grandient.frame = self.view.bounds;//設(shè)置顏色漸變的layer的frame
grandient.colors = colors;//顏色數(shù)組
grandient.mask = shapeLayer;//設(shè)置mask圖層
//開始和結(jié)束點(diǎn)可以用來做隱式動(dòng)畫
grandient.startPoint = CGPointMake(0, 0);//開始點(diǎn)
grandient.endPoint = CGPointMake(1, 0);//結(jié)束點(diǎn)
[self.view.layer addSublayer:grandient];
效果圖??
關(guān)于隱式動(dòng)畫
shapeLayer.strokeStart =0.f;
shapeLayer.strokeEnd = 0.f;
__block CGFloat end = 0.0f;
[NSTimer scheduledTimerWithTimeInterval:0.2 repeats:YES block:^(NSTimer * _Nonnull timer) {
end += 0.1f;
if (end >= 1) {
[timer invalidate];
}
shapeLayer.strokeEnd = end;
}];
Tips:我自己寫了一個(gè)圖表的Demo,大神們不要嫌棄~先上個(gè)效果圖
ab.gif
GIT地址:https://github.com/candy7/Graphs
~~~ 給個(gè)?喜歡?吧,謝謝各位看官了.=￣ω￣=~~
