轉(zhuǎn)其他博主文章
UIBezierPath可以繪制矢量路徑，而CAShapeLayer是Layer的子類，可以在屏幕進(jìn)行繪制，本文主要思想是：CAShapeLayer按照UIBezierPath的矢量路徑進(jìn)行繪制。
效果圖如圖：
方法如下：
[objc]view plaincopy
@interfaceViewController?(){
CAShapeLayer*shapeLayer;
NSTimer*timer;
}
@end
@implementationViewController
-?(void)viewDidLoad?{
[superviewDidLoad];
//第一步，通過UIBezierPath設(shè)置圓形的矢量路徑
UIBezierPath*circle?=?[UIBezierPathbezierPathWithOvalInRect:CGRectMake(0,0,200,200)];
//第二步，用CAShapeLayer沿著第一步的路徑畫一個完整的環(huán)（顏色灰色，起始點(diǎn)0，終結(jié)點(diǎn)1）
CAShapeLayer*bgLayer?=?[CAShapeLayerlayer];
bgLayer.frame=?CGRectMake(0,0,200,200);//設(shè)置Frame
bgLayer.position=self.view.center;//居中顯示
bgLayer.fillColor=?[UIColorclearColor].CGColor;//填充顏色=透明色
bgLayer.lineWidth=2.f;//線條大小
bgLayer.strokeColor=?[UIColorgrayColor].CGColor;//線條顏色
bgLayer.strokeStart=0.f;//路徑開始位置
bgLayer.strokeEnd=1.f;//路徑結(jié)束位置
bgLayer.path=?circle.CGPath;//設(shè)置bgLayer的繪制路徑為circle的路徑
[self.view.layeraddSublayer:bgLayer];//添加到屏幕上
//第三步，用CAShapeLayer沿著第一步的路徑畫一個紅色的環(huán)形進(jìn)度條，但是起始點(diǎn)=終結(jié)點(diǎn)=0，所以開始不可見
shapeLayer?=?[CAShapeLayerlayer];
shapeLayer.frame=?CGRectMake(0,0,200,200);
shapeLayer.position=self.view.center;
shapeLayer.fillColor=?[UIColorclearColor].CGColor;
shapeLayer.lineWidth=2.f;
shapeLayer.strokeColor=?[UIColorredColor].CGColor;
shapeLayer.strokeStart=0;
shapeLayer.strokeEnd=0;
shapeLayer.path=?circle.CGPath;
[self.view.layeraddSublayer:shapeLayer];
//第四步，用一個定時器進(jìn)行測試，每一秒，進(jìn)度加10%
timer?=?[NSTimerscheduledTimerWithTimeInterval:1.ftarget:selfselector:@selector(animate)userInfo:nilrepeats:YES];
}
-(void)animate{
shapeLayer.strokeEnd+=0.1;
}
我們可以對以上代碼封裝為一個CircleView，繼承自View，封裝后代碼如下：
CircleView.h文件
[objc]view plaincopy
#import?
@interfaceCircleView?:?UIView
@property(assign,nonatomic)CGFloat?startValue;
@property(assign,nonatomic)CGFloat?lineWidth;
@property(assign,nonatomic)CGFloat?value;
@property(strong,nonatomic)UIColor*lineColr;
@end
CircleView.m文件
[objc]view plaincopy
#import?"CircleView.h"
@interfaceCircleView()
@property(strong,nonatomic)UIBezierPath*path;
@property(strong,nonatomic)CAShapeLayer*shapeLayer;
@property(strong,nonatomic)CAShapeLayer*bgLayer;
@end
@implementationCircleView
-?(instancetype)initWithFrame:(CGRect)frame
{
self=?[superinitWithFrame:frame];
if(self)?{
_path?=?[UIBezierPathbezierPathWithOvalInRect:self.bounds];
_bgLayer?=?[CAShapeLayerlayer];
_bgLayer.frame=self.bounds;
_bgLayer.fillColor=?[UIColorclearColor].CGColor;
_bgLayer.lineWidth=2.f;
_bgLayer.strokeColor=?[UIColorgrayColor].CGColor;
_bgLayer.strokeStart=0.f;
_bgLayer.strokeEnd=1.f;
_bgLayer.path=?_path.CGPath;
[self.layeraddSublayer:_bgLayer];
_shapeLayer?=?[CAShapeLayerlayer];
_shapeLayer.frame=self.bounds;
_shapeLayer.fillColor=?[UIColorclearColor].CGColor;
_shapeLayer.lineWidth=2.f;
_shapeLayer.lineCap=?kCALineCapRound;
_shapeLayer.strokeColor=?[UIColorredColor].CGColor;
_shapeLayer.strokeStart=0.f;
_shapeLayer.strokeEnd=0.f;
_shapeLayer.path=?_path.CGPath;
[self.layeraddSublayer:_shapeLayer];
}
returnself;
}
@synthesizevalue?=?_value;
-(void)setValue:(CGFloat)value{
_value?=?value;
_shapeLayer.strokeEnd=?value;
}
-(CGFloat)value{
return_value;
}
@synthesizelineColr?=?_lineColr;
-(void)setLineColr:(UIColor*)lineColr{
_lineColr?=?lineColr;
_shapeLayer.strokeColor=?lineColr.CGColor;
}
-(UIColor*)lineColr{
return_lineColr;
}
@synthesizelineWidth?=?_lineWidth;
-(void)setLineWidth:(CGFloat)lineWidth{
_lineWidth?=?lineWidth;
_shapeLayer.lineWidth=?lineWidth;
_bgLayer.lineWidth=?lineWidth;
}
-(CGFloat)lineWidth{
return_lineWidth;
}
@end
在需要使用的ViewContrller中使用以下代碼調(diào)用即可
[objc]view plaincopy
CircleView*view?=?[[CircleViewalloc]initWithFrame:CGRectMake(0,0,200,200)];
[self.viewaddSubview:view];
view.center=self.view.center;
[viewsetLineWidth:6.f];
[viewsetLineColr:[UIColorredColor]];
另外默認(rèn)的坐標(biāo)如下圖（圖來自http://justsee.iteye.com/blog/1972853）
有時候我們需要開始點(diǎn)在頂部，即（3/2）π 處，其中一個思路是將整個View逆時針旋轉(zhuǎn)90度即可，在CircleView.m的initWithFrame中添加以下代碼即可：
[objc]view plaincopy
CGAffineTransform?transform?=?CGAffineTransformIdentity;
self.transform=?CGAffineTransformRotate(transform,?-M_PI?/2);
