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

另外，您正在创建一条带有椭圆的路径，然后向其添加弧线。不要那样做。只需将圆弧添加到空路径即可。

如果您想更改圆弧的起点，请在添加圆弧时更改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
--

起点没有移动。结局已经动了。您没有“填写”该行的其余部分。你正在换行。

这就是为什么 start 应该始终为 0 而您只需更改笔画 end。

Answer 2

startAngle:degreesToRadians(-90) endAngle:0 clockwise:YES

（原因是iOS默认坐标系x轴向右，y轴向下）

阅读这份文件 https://developer.apple.com/library/ios/documentation/uikit/reference/UIBezierPath_class/index.html

指定起始角为 0 弧度，结束角为 π 弧度，并将顺时针参数设置为 YES 绘制圆的下半部分。但是，指定相同的开始和结束角度但将顺时针参数设置为 NO 会绘制圆的上半部分。

Answer 3

我不知道您期望什么以及您的实际结果有什么问题 - 但是您的第二行代码中的 0 半径看起来很可疑。它只是将center 处的一个点添加到当前路径（其中已经包含一个圆圈）。