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

Question

我正在制作一个循环进度条,用于自定义游戏中心成就视图,我有点"碰壁".我正在为此奋斗超过两个小时仍然无法让它工作.

问题是,我需要一个循环进度条,在那里我可以设置(至少)轨道(填充)图像.因为我的进度填充是渐变的彩虹,我不能仅使用代码获得相同的结果.

我正在搞乱CALayers和drawRect方法,但是我没有成功.你能给我一点指导吗？

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

我只需要填充是一个蒙面图像,取决于进度.如果你甚至可以让它的工作进展动画,那真的很酷,但我不需要帮助:)

谢谢,尼克

Answer 1

您基本上只需要构建一个定义要填充区域的路径(例如使用CGPathAddArc),使用图形上下文剪切到该路径CGContextClip,然后只绘制图像.

以下是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);
}

为了简单起见,我对一些东西进行了硬编码 - 你显然需要在setter中添加一个属性progress并调用setNeedsDisplay它.这也假设您有一个RadialProgressFill在项目中命名的图像.

这是一个大致如下的例子:

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