文章来源:http://www.tuicool.com/articles/M3u6re
使用UIBezierPath类可以创建基于矢量的路径。此类是Core Graphics框架关于path的一个封装。使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状。
1.Bezier Path 基础
UIBezierPath对象是CGPathRef数据类型的封装。path如果是基于矢量形状的,都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形,使用曲线段去创建弧(arc),圆或者其他复杂的曲线形状。每一段都包括一个或者多个点,绘图命令定义如何去诠释这些点。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。
线和多边形是一些简单的形状,我们可以用moveToPoint:或者addLineToPoint:方法去构建。方法moveToPoint:设置我们想要创建形状的起点。从这点开始,我们可以用方法addLineToPoint:去创建一个形状的线段。我们可以连续的创建line,每一个line的起点都是先前的终点,终点就是指定的点。
下面的代码描述了如何用线段去创建一个五边形。第五条线通过调用closePath方法得到的,它连接了最后一个点(0,40)和第一个点(100,0)
<span style="font-size:14px;">UIBezierPath* aPath = [UIBezierPath bezierPath];
// Set the starting point of the shape.
[aPath moveToPoint:CGPointMake(100.0, 0.0)];
// Draw the lines
[aPath addLineToPoint:CGPointMake(200.0, 40.0)];
[aPath addLineToPoint:CGPointMake(160, 140)];
[aPath addLineToPoint:CGPointMake(40.0, 140)];
[aPath addLineToPoint:CGPointMake(0.0, 40.0)];
[aPath closePath];</span>
closePath方法不仅结束一个shape的subpath表述,它也在最后一个点和第一个点之间画一条线段,如果我们画多边形的话,这个一个便利的方法我们不需要去画最后一条线。
下面的小例子是一个环形的progress代码,有具体的使用方法
.h文件:
#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>
@interface KACircleProgressView : UIView {
CAShapeLayer *_trackLayer;
UIBezierPath *_trackPath;
CAShapeLayer *_progressLayer;
UIBezierPath *_progressPath;
}
@property (nonatomic, strong) UIColor *trackColor;
@property (nonatomic, strong) UIColor *progressColor;
@property (nonatomic) float progress;//0~1之间的数
@property (nonatomic) float progressWidth;
- (void)setProgress:(float)progress animated:(BOOL)animated;
@end
.m文件
#import "KACircleProgressView.h"
@implementation KACircleProgressView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
_trackLayer = [CAShapeLayer new];
[self.layer addSublayer:_trackLayer];
_trackLayer.fillColor = nil;
_trackLayer.frame = self.bounds;
_progressLayer = [CAShapeLayer new];
[self.layer addSublayer:_progressLayer];
_progressLayer.fillColor = nil;
_progressLayer.lineCap = kCALineCapRound;
_progressLayer.frame = self.bounds;
//默认5
self.progressWidth = 5;
}
return self;
}
- (void)setTrack
{
_trackPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:0 endAngle:M_PI * 2 clockwise:YES];;
_trackLayer.path = _trackPath.CGPath;
}
- (void)setProgress
{
_progressPath = [UIBezierPath bezierPathWithArcCenter:self.center radius:(self.bounds.size.width - _progressWidth)/ 2 startAngle:- M_PI_2 endAngle:(M_PI * 2) * _progress - M_PI_2 clockwise:YES];
_progressLayer.path = _progressPath.CGPath;
}
- (void)setProgressWidth:(float)progressWidth
{
_progressWidth = progressWidth;
_trackLayer.lineWidth = _progressWidth;
_progressLayer.lineWidth = _progressWidth;
[self setTrack];
[self setProgress];
}
- (void)setTrackColor:(UIColor *)trackColor
{
_trackLayer.strokeColor = trackColor.CGColor;
}
- (void)setProgressColor:(UIColor *)progressColor
{
_progressLayer.strokeColor = progressColor.CGColor;
}
- (void)setProgress:(float)progress
{
_progress = progress;
[self setProgress];
}
- (void)setProgress:(float)progress animated:(BOOL)animated
{
}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
// Drawing code
}
*/
@end
使用:
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
KACircleProgressView *progress = [[KACircleProgressView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
[self.view addSubview:progress];
progress.trackColor = [UIColor blackColor];
progress.progressColor = [UIColor orangeColor];
progress.progress = .7;
progress.progressWidth = 10;
}
效果图: