我正在为自定义游戏中心成就 View 制作一个圆形进度条,我有点“碰壁”。我为此苦苦挣扎了两个多小时,但仍然无法正常工作。
问题是,我需要一个圆形进度条,我可以在其中设置(至少)轨道(填充)图像。因为我的进度填充是彩虹般的渐变,我无法仅使用代码获得相同的结果。
我在搞乱 CALayers 和 drawRect 方法,但我没有成功。你能给我一些指导吗?
以下是循环进度条的示例: https://github.com/donnellyk/KDGoalBar https://github.com/danielamitay/DACircularProgress
我只需要填充成为蒙版图像,具体取决于进度。如果您甚至可以让进度动画化,那就太棒了,但我不需要这方面的帮助:)
谢谢,尼克
最佳答案
您基本上只需要构建一个路径来定义要填充的区域(例如使用 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
的图像。
这是一个大致的例子:
我希望你有一个更好看的背景图片。 ;)
关于objective-c - 使用带有蒙版图像的圆形进度条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16498390/