objective-c - 使用带有蒙版图像的圆形进度条？

Question

我正在为自定义游戏中心成就 View 制作一个圆形进度条，我有点“碰壁”。我为此苦苦挣扎了两个多小时，但仍然无法正常工作。

问题是，我需要一个圆形进度条，我可以在其中设置(至少)轨道(填充)图像。因为我的进度填充是彩虹般的渐变，我无法仅使用代码获得相同的结果。

我在搞乱 CALayers 和 drawRect 方法，但我没有成功。你能给我一些指导吗？

以下是循环进度条的示例: https://github.com/donnellyk/KDGoalBar https://github.com/danielamitay/DACircularProgress

我只需要填充成为蒙版图像，具体取决于进度。如果您甚至可以让进度动画化，那就太棒了，但我不需要这方面的帮助:)

谢谢，尼克

Answer 1

您基本上只需要构建一个路径来定义要填充的区域(例如使用 CGPathAddArc)，使用 CGContextClip 将图形上下文剪切到该路径，然后只需画出你的形象。

这是您可以在自定义 View 中使用的 drawRect: 方法的示例:

- (void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    CGFloat progress = 0.7f; //This would be a property of your view
    CGFloat innerRadiusRatio = 0.5f; //Adjust as needed

    //Construct the path:
    CGMutablePathRef path = CGPathCreateMutable();
    CGFloat startAngle = -M_PI_2;
    CGFloat endAngle = -M_PI_2 + MIN(1.0f, progress) * M_PI * 2;
    CGFloat outerRadius = CGRectGetWidth(self.bounds) * 0.5f - 1.0f;
    CGFloat innerRadius = outerRadius * innerRadiusRatio;
    CGPoint center = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
    CGPathAddArc(path, NULL, center.x, center.y, innerRadius, startAngle, endAngle, false);
    CGPathAddArc(path, NULL, center.x, center.y, outerRadius, endAngle, startAngle, true);
    CGPathCloseSubpath(path);
    CGContextAddPath(ctx, path);
    CGPathRelease(path);

    //Draw the image, clipped to the path:
    CGContextSaveGState(ctx);
    CGContextClip(ctx);
    CGContextDrawImage(ctx, self.bounds, [[UIImage imageNamed:@"RadialProgressFill"] CGImage]);
    CGContextRestoreGState(ctx);
}

为简单起见，我对一些内容进行了硬编码 - 您显然需要为 progress 添加一个属性并在 setter 中调用 setNeedsDisplay。这还假定您的项目中有一个名为 RadialProgressFill 的图像。

这是一个大致的例子:

我希望你有一个更好看的背景图片。 ;)