ios - 圆图上的圆头？ iOS？

我试图在圆图上重现圆角，但圆角并不适合我自己。

我尝试了google，但找不到确切的术语来重新创建它。

谁能引导我朝正确的方向或告诉我我在寻找什么？

我想要一个看起来像这样的圆形图

https://www.punchkickinteractive.com/content/uploads/2014/10/apple-watch-activity-app.jpeg

如果有一个我可以样式化的辅助库，那就更好了

干杯!

最佳答案

不确定您遇到什么样的困难？如果仅使用绘图，那么有一种方法：

@interface ArcView ()

@property (nonatomic) double arcAngel;

@end

@implementation ArcView

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];

    CGPoint center = CGPointMake(CGRectGetWidth(self.bounds) / 2, CGRectGetHeight(self.bounds) / 2);
    double lineWidth = 10;
    double radius = center.x - lineWidth / 2;

    UIBezierPath *backCircle = [UIBezierPath bezierPathWithArcCenter:center
                                                              radius:radius
                                                          startAngle:0
                                                            endAngle:2 * M_PI
                                                           clockwise:YES];
    backCircle.lineCapStyle = kCGLineCapRound;
    backCircle.lineWidth = lineWidth;
    [[UIColor colorWithRed:0.0f green:1.0f blue:0.0f alpha:0.3f] setStroke];
    [backCircle stroke];

    UIBezierPath *highlightCircle = [UIBezierPath bezierPathWithArcCenter:center
                                                                   radius:radius
                                                               startAngle:-M_PI_2
                                                                 endAngle:self.arcAngel
                                                                clockwise:YES];
    highlightCircle.lineCapStyle = kCGLineCapRound;
    highlightCircle.lineWidth = lineWidth;
    [[UIColor colorWithRed:0.0f green:1.0f blue:0.0f alpha:1.0f] setStroke];
    [highlightCircle stroke];
}

- (void)updateCircle {
    self.arcAngel += M_PI_2;
    [self setNeedsDisplay];
}

@end

UPD：将lineCapStyle属性设置为kCGLineCapRound

结果是：