用UIBezierPath画圆 [英] Draw circle with UIBezierPath

问题描述

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

I'm trying to draw a circle using UIBezierPath addArcWithCenter method :

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];

但是我得到的是以下内容:

but what I get is the following :

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

I tried to play with the different parameters but no luck

谢谢

更新:

很抱歉，如果我不解释我要做什么:

I'm sorry if I didn't explain what I'm trying to do:

*背景圆是使用:

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

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

*I'm trying to draw the red circle step by step using bezierPathWithOvalInRect between 2 values : _volumeValue and volume

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

But I can't get a perfect circle, instead I get the horizontale part after certain value.

推荐答案

好的，尝试一下...

OK, try this...

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

volume should be between 0 and 100.

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

Also, you were creating a path with an ellipse and then adding an arc to it. Don't do that. Just add the arc to the empty path.

如果要更改弧的起始位置，请在添加弧时更改startAngle和endAngle.不要更改笔画的开始值.

If you want to change where the arc starts from then change the startAngle and endAngle when adding the arc. Don't change the stroke start value.

动画更改

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

好的，这将使路径的strokeEnd属性具有动画效果.但是，您必须意识到，它的工作原理是这样的……

OK, what this will do is animate the strokeEnd property of the path. You have to realise though, it works like this...

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

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

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

开始没有移动.结束了.您没有填写"该行的其余部分.您正在更改线路.

The start has not moved. The end has moved. You are not "filling in" the rest of the line. You are changing the line.

这就是为什么起点应始终为0，而​​只需更改笔划终点的原因.

This is why the start should always be 0 and you just change the stroke end.

这篇关于用UIBezierPath画圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！