objective-c - 用 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 逐步绘制红色圆圈在 2 个值之间:_volumeValue 和 volume

但是我不能得到一个完美的圆，而是得到一定值后的水平部分。

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 之间。

此外，您还创建了一 strip 椭圆的路径，然后向其添加了一条圆弧。不要那样做。只需将圆弧添加到空路径即可。

如果您想更改圆弧的起始位置，请在添加圆弧时更改 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 而您只需更改笔划终点。