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

有结果: