使用带有蒙版图像的圆形进度条？ [英] Using circular progress bar with masked image?

问题描述

我正在研究自定义游戏中心成就视图的圆形进度栏，并且有点撞墙。我为此付出了两个多小时的努力，但仍然无法正常工作。

I am working on a circular progress bar for custom game center achievements view and I have kind of "hit the wall". I am struggling with this for over two hours and still cannot get it to work.

问题是，我需要一个圆形的进度条，在那里我可以设置（至少）跟踪（填充）图像。因为我的进度填充是一个像渐变一样的彩虹，而且我仅使用代码就无法获得相同的结果。

The thing is, that I need a circular progress bar, where I would be able to set (at least) the track(fill) image. Because my progress fill is a rainbow like gradient and I am not able to achieve the same results using only code.

我搞砸了CALayers和drawRect方法，但是我没有成功。

I was messing with CALayers, and drawRect method, however I wasn't successful. Could you please give me a little guidance?

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

Here are examples of the circular progress bars: https://github.com/donnellyk/KDGoalBar https://github.com/danielamitay/DACircularProgress

根据进度，我只需要将填充填充为蒙版图像即可。如果您甚至可以使进度动画化，那真的很酷，但我不需要帮助：）

I just need the fill to be an masked image, depending on the progress. If you could even make it work that the progress would be animated, that would be really cool, but I don't require help with that :)

谢谢，尼克

推荐答案

您基本上只需要构造一条路径来定义要填充的区域（例如，使用 CGPathAddArc ），使用 CGContextClip 将图形上下文剪切到该路径，然后仅绘制图像。

You basically just need to construct a path that defines the area to be filled (e.g. using CGPathAddArc), clip the graphics context to that path using CGContextClip and then just draw your image.

下面是您可以在自定义视图中使用的 drawRect：方法的示例：

Here's an example of a drawRect: method you could use in a custom view:

- (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);
}

为简单起见，我已经硬编码了几件事–您显然需要为进度 添加一个属性，然后在设置器中调用 setNeedsDisplay 。这还假设您的项目中有一个名为 RadialProgressFill 的图像。

To keep it simple, I've hard-coded a few things – you obviously need to add a property for progress and call setNeedsDisplay in the setter. This also assumes that you have an image named RadialProgressFill in your project.

下面是一个大致示例。看起来像：

Here's an example of what that would roughly look like:

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

I hope you have a better-looking background image. ;)

这篇关于使用带有蒙版图像的圆形进度条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！