简单的用CAShapeLayer画个圈

来源:互联网 发布:老人打字软件 编辑:程序博客网 时间:2024/06/16 03:18

首先看一下效果图:


    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width / 2, self.bounds.size.width / 2) radius:RADIUS startAngle:M_PI_4 / 2 endAngle:M_PI * 2 - M_PI_4 / 2 clockwise:YES];    self.progressLayer = [CAShapeLayer layer];    self.progressLayer.frame = self.bounds;    self.progressLayer.path = bezierPath.CGPath;    self.progressLayer.strokeColor = [UIColor blackColor].CGColor;    self.progressLayer.fillColor = [UIColor clearColor].CGColor;    self.progressLayer.lineCap = kCALineCapRound;    self.progressLayer.lineWidth = LINE_WIDTH;    self.progressLayer.strokeStart = 0;    self.progressLayer.speed = 0.1;    [self.layer addSublayer:self.progressLayer];        self.gradentLayer = [CAGradientLayer layer];    self.gradentLayer.colors = @[                                 (id)[UIColor redColor].CGColor,                                 (id)[UIColor blueColor].CGColor,                                 ];    self.gradentLayer.frame = self.bounds;    self.gradentLayer.locations = @[@0.1, @0.9];    self.gradentLayer.startPoint = CGPointMake(0.5, 0);    self.gradentLayer.endPoint = CGPointMake(0.5, 1);        [self.gradentLayer setMask:self.progressLayer];    [self.layer addSublayer:self.gradentLayer];    
这里只需要两个图层。一个CAShapeLayer和一个CAGradientLayer对象。通过贝塞尔曲线画一个圆,并设置为shapeLayer的path。strokeColor表示填充颜色,fillColor表示边界的颜色。linewidth表示线宽。这里主要要设置起始点,这里区间为【0, 1】。

颜色渐变的效果需要依赖于gradientLayer。

其中colors属性是一个数组,里面存放的颜色,也就是需要渐变的颜色。

startPoint,endPoint (0,0)表示左上方开始,(0,1)表示右下方。默认值分别是(0.5,0),(0.5,1)。

locations表示区间分布。例如0.1,0.9之间的区间就是红蓝色渐变区间。

这里需要注意的是gradientLayer需要调用setMask方法,否则是整个视图在渐变,而不是想要的进度条。

0 0
原创粉丝点击