将圆角应用于使用 UIBezierPath 创建的圆弧 [英] Apply rounded corners to arc created with UIBezierPath
问题描述
我正在使用 UIBezierPath 创建一个圆形进度条.进度条如下图所示:
I am working on a circular progress bar that i've created using UIBezierPath. The progress bar looks like the following picture:
我的问题是:如何使圆弧的边缘变圆而不是矩形?
My question is: how to make the edge of the arc rounded and not rectangular?
我用来绘制弧线的代码如下:
The code i used to draw the arc looks like is:
// Draw the arc with bezier path
int radius = 100;
arc = [CAShapeLayer layer];
arc.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 50) radius:radius startAngle:M_PI endAngle:M_PI/150 clockwise:YES].CGPath;
arc.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius,
CGRectGetMidY(self.view.frame)-radius);
arc.fillColor = [UIColor clearColor].CGColor;
arc.strokeColor = [UIColor purpleColor].CGColor;
arc.cornerRadius = 0.5;
arc.lineWidth = 6;
[self.view.layer addSublayer:arc];
// Animation of the progress bar
drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.duration = 5.0; // "animate over 10 seconds or so.."
drawAnimation.repeatCount = 1.0; // Animate only once..
drawAnimation.removedOnCompletion = YES; // Remain stroked after the animation..
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue = [NSNumber numberWithFloat:10.0f];
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[arc addAnimation:drawAnimation forKey:@"drawCircleAnimation"];
我尝试使用 arc.cornerRadius
但它似乎什么也没返回.
I tried to use arc.cornerRadius
but it seemed to return nothing.
任何帮助将不胜感激.
先谢谢你!
花岗岩
推荐答案
Set lineCapStyle
为 kCGLineCapRound
(在贝塞尔路径上)以绘制带有圆边.
Set lineCapStyle
to kCGLineCapRound
(On the bezier path) to draw the ends of the lines with a round edge.
你也可以在形状图层上设置lineCap
来做同样的事情.
You can also set the lineCap
on the shape layer to do the same thing.
这篇关于将圆角应用于使用 UIBezierPath 创建的圆弧的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!