使用UIBezierPath绘制圆圈

Question

我正在尝试使用UIBezierPath addArcWithCenter方法绘制一个圆圈:

UIBezierPath *bezierPath = 
  [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0., 0., 100., 100.)];

[bezierPath addArcWithCenter:center 
                      radius:0. 
                  startAngle:0 endAngle:2 * M_PI clockwise:YES];

CAShapeLayer *progressLayer = [[CAShapeLayer alloc] init];

[progressLayer setPath:bezierPath.CGPath];
[progressLayer setStrokeColor:[UIColor colorWithWhite:1. alpha:.2].CGColor];
[progressLayer setFillColor:[UIColor clearColor].CGColor];
[progressLayer setLineWidth:.3 * self.bounds.size.width];
[progressLayer setStrokeStart:_volumeValue/100.];
[progressLayer setStrokeEnd:volume/100.]; // between 0 and 100

[_circleView.layer addSublayer:progressLayer];

但我得到的是以下内容:

我尝试使用不同的参数,但没有运气

谢谢

更新:

如果我不解释我要做的事,我很抱歉:

*使用以下方式绘制背景圆圈:

[UIBezierPath bezierPathWithOvalInRect:CGRectMake(0., 0., 100., 100.)]

*我正在尝试使用两个值之间的bezierPathWithOvalInRect逐步绘制红色圆圈:_volumeValue和音量

但我无法得到一个完美的圆圈,相反,我得到了一定价值之后的水平部分.

Answer 1

好的,试试这个......

UIBezierPath *bezierPath = [UIBezierPath bezierPath];
[bezierPath addArcWithCenter:center radius:50 startAngle:0 endAngle:2 * M_PI clockwise:YES];

CAShapeLayer *progressLayer = [[CAShapeLayer alloc] init];
[progressLayer setPath:bezierPath.CGPath];
[progressLayer setStrokeColor:[UIColor colorWithWhite:1.0 alpha:0.2].CGColor];
[progressLayer setFillColor:[UIColor clearColor].CGColor];
[progressLayer setLineWidth:0.3 * self.bounds.size.width];
[progressLayer setStrokeEnd:volume/100];
[_circleView.layer addSublayer:progressLayer];

volume 应介于0到100之间.

此外,您正在创建一个带有椭圆的路径,然后为其添加一个弧.不要那样做.只需将弧添加到空路径即可.

如果要更改弧的起始位置startAngle,请endAngle在添加弧时更改和.不要更改行程起始值.

动画变化

[CATransaction begin];
CABasicAnimation *animateStrokeDown = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animateStrokeDown.toValue = [NSNumber numberWithFloat:volume/100.];
[progressLayer addAnimation:animateStrokeDown forKey:@"animateStrokeDown"];
[CATransaction commit];

好的,这将做的是动画strokeEnd路径的属性.你必须意识到,它的工作原理如下......

Begin state: start = 0, end = 6
0123456
-------

// increase volume
Animate to: end = 9
0123456789
----------

// decrease volume
Animate to: end = 1
01
--

一开始并没有动起来.结束了.你没有"填补"其余部分.你正在改变这条线.

这就是为什么开始应该始终为0并且您只需更改行程结束.