由于本人比较懒,很少写博客,由于一个朋友公司需要实现下面这个等级效果,自己也闲来无聊,就用UIBezierPath实现了,并做个记录。直接上代码吧
//创建贝塞尔路径
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(centerX, centerY) radius:radius startAngle:(0.5f*M_PI) endAngle:2.5f*M_PI clockwise:YES];
//添加背景圆环
CAShapeLayer *backLayer = [CAShapeLayer layer];
backLayer.frame = self.bounds;
backLayer.fillColor = [[UIColor clearColor] CGColor];
backLayer.strokeColor = [UIColor colorWithRed:26.0/255.0f green:126.0/255.0f blue:255.0/255.0f alpha:1].CGColor;
backLayer.lineWidth = _lineWidth;
backLayer.path = [path CGPath];
backLayer.strokeEnd = 1;
[self.layer addSublayer:backLayer];
//设置渐变颜色
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = self.bounds;
[gradientLayer setColors:[NSArray arrayWithObjects:(id)[RGB(63, 204, 132) CGColor],(id)[RGB(98, 254, 52) CGColor], nil]];
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(0, 1);
[gradientLayer setMask:_proLayer]; //用progressLayer来截取渐变层
[self.layer addSublayer:gradientLayer];
//添加火柴棍
-(void)initTheLines
{
float radius = (self.bounds.size.width-30)/2.0f;
float sRadius = (self.bounds.size.width-20)/2.0f;
float bRadius = self.bounds.size.width/2.0f;
UIBezierPath *path = [[UIBezierPath alloc] init];
for (int i=1; i<20; i++)
{
[path moveToPoint:CGPointMake(15+radius-radius*sinf(i*2*M_PI/20),15+radius+radius*cosf(i*2*M_PI/20))];
if (i==5 || i==10 || i==15 || i==20)
{
[path addLineToPoint:CGPointMake(bRadius-bRadius*sinf(i*2*M_PI/20), bRadius+bRadius*cosf(i*2*M_PI/20))];
}
else
{
[path addLineToPoint:CGPointMake(10+sRadius-sRadius*sinf(i*2*M_PI/20), 10+sRadius+sRadius*cosf(i*2*M_PI/20))];
}
}
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor colorWithRed:26.0/255.0f green:126.0/255.0f blue:255.0/255.0f alpha:1].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 5;
shapeLayer.lineJoin = kCALineJoinRound;
shapeLayer.lineCap = kCALineCapRound;
shapeLayer.path = path.CGPath;
//add it to our view
[self.layer addSublayer:shapeLayer];
}