iOS - 带圆角的饼形进度条

Question

我需要根据这个设计实现进度条：

如您所见，酒吧本身有一个角半径。

这就是我现在使用的代码：

那么，该怎么做？ 这是我目前的代码：

- (void)animateProgressBarToPercent:(float)percent
{
    if (percent > 1.0f) return;

    int radius = 42.7f;
    int strokeWidth = 7.f;
    CGColorRef color = [UIColor someColor].CGColor;
    int timeInSeconds = percent * 5;

    CGFloat startAngle = 0;
    CGFloat endAngle = percent;

    CAShapeLayer *circle = [CAShapeLayer layer];
    circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius].CGPath;
    circle.position = CGPointMake(self.center.x - radius, self.center.y + strokeWidth);
    circle.fillColor = [UIColor clearColor].CGColor;
    circle.strokeColor = color;
    circle.lineWidth = strokeWidth;
    circle.strokeEnd = endAngle;

    [self.layer addSublayer:circle];

    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    drawAnimation.duration            = timeInSeconds;
    drawAnimation.repeatCount         = 1.0;
    drawAnimation.removedOnCompletion = NO;

    drawAnimation.fromValue = [NSNumber numberWithFloat:startAngle];
    drawAnimation.toValue   = [NSNumber numberWithFloat:endAngle];

    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    [circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];
}

Answer 1

Morris.Area({
   element: 'hero-area',
   data: [
       { day: "Thu", Reward: 0, Redeem: 0 },
       { day: "Fri", Reward: 2, Redeem: 0 },
       { day: "Sat", Reward: 1, Redeem: 0 },
       { day: "Sun", Reward: 0, Redeem: 0 },
       { day: "Mon", Reward: 0, Redeem: 0 },
       { day: "Tue", Reward: 1, Redeem: 2 },
       { day: "Wed", Reward: 0, Redeem: 0 }
   ],
   xkey: 'day',
   ykeys: ['Reward', 'Redeem'],
   labels: ['Reward', 'Redeem'],
   // later on
   parseTime: false,
   hideHover: 'auto',
   lineWidth: 1,
   pointSize: 5,
   lineColors: ['#4a8bc2', '#ff6c60'],
   fillOpacity: 0.5,
   smooth: false
});

只需设置circle.lineCap = kCALineCapRound

的此属性即可