圆形图上的圆形末端？ iOS版？

Question

我试图在圆形图上重现圆形末端，但这对我自己来说并不适用。

我试过谷歌，找不到确切的术语来重新创建它。

任何人都可以引导我走向正确的方向或告诉我我在寻找什么吗？

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

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

如果有一个我可以设计的辅助库，那就更好了

干杯！

Answer 1

不确定你有什么困难？如果只是绘图，那么有一种方法：

@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

结果是：