渐变颜色到 CGContextRef

Question

我正在使用 CGContextRef 绘制 4 条弧线。我可以填充颜色，但现在我想为该弧线设置渐变颜色。我做到了。它工作正常。现在我想为每个弧线设置不同的颜色。有没有怎么做？请帮帮我。我附上了我的代码和那个弧的屏幕截图。代码：

CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();

CGFloat comps[] = {1.0,1.0,1.0,1.0,0.0,1.0,1.0,1.0};
CGFloat locs[] = {0,1};
CGGradientRef g = CGGradientCreateWithColorComponents(space, comps, locs, 2);

CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat startAngle = 0;
CGFloat endAngle = 90;
CGFloat radius = 100.0;
CGFloat levelWidth = 50;
for (int i = 0; i < 4; i++) {
    CGContextMoveToPoint(context, self.bounds.size.width/2, self.bounds.size.height/2);
    CGContextAddArc(context, self.bounds.size.width/2, self.bounds.size.height/2, radius, DEGREES_RADIANS(startAngle), DEGREES_RADIANS(endAngle), NO);
    CGContextAddArc(context, self.bounds.size.width/2, self.bounds.size.height/2, radius - levelWidth, DEGREES_RADIANS(endAngle),DEGREES_RADIANS(startAngle), YES);
    startAngle = endAngle;
    endAngle = endAngle + 90;
    CGContextClosePath(context);

}


//CGContextClosePath(context);
CGContextClip(context);
CGContextDrawRadialGradient(context, g, CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2), 1.0f, CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2), 150, 0);

还有截图：

Answer 1

您想在剪辑、剪辑和绘制圆弧之前用CGContextSaveGState 保存上下文，然后在绘制下一个圆弧之前用CGContextRestoreGState 恢复上下文。你显然想要一个CGGradientRef 的数组。因此：

CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();

CGGradientRef g[4];

CGFloat comps0[] = {1.0,1.0,1.0,1.0,0.0,1.0,1.0,1.0};
CGFloat locs[] = {0,1};
g[0] = CGGradientCreateWithColorComponents(space, comps0, locs, 2);

CGFloat comps1[] = {1.0,1.0,1.0,1.0,1.0,0.0,1.0,1.0};
g[1] = CGGradientCreateWithColorComponents(space, comps1, locs, 2);

CGFloat comps2[] = {1.0,1.0,1.0,1.0,1.0,1.0,0.0,1.0};
g[2] = CGGradientCreateWithColorComponents(space, comps2, locs, 2);

CGFloat comps3[] = {1.0,1.0,1.0,1.0,0.5,0.0,0.5,1.0};
g[3] = CGGradientCreateWithColorComponents(space, comps3, locs, 2);

CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat startAngle = 0;
CGFloat endAngle = 90;
CGFloat radius = 100.0;
CGFloat levelWidth = 50;
for (int i = 0; i < 4; i++) {
    CGContextSaveGState(context);
    CGContextMoveToPoint(context, self.bounds.size.width/2, self.bounds.size.height/2);
    CGContextAddArc(context, self.bounds.size.width/2, self.bounds.size.height/2, radius, DEGREES_RADIANS(startAngle), DEGREES_RADIANS(endAngle), NO);
    CGContextAddArc(context, self.bounds.size.width/2, self.bounds.size.height/2, radius - levelWidth, DEGREES_RADIANS(endAngle),DEGREES_RADIANS(startAngle), YES);
    startAngle = endAngle;
    endAngle = endAngle + 90;
    CGContextClosePath(context);
    CGContextClip(context);
    CGContextDrawRadialGradient(context, g[i], CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2), 1.0f, CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2), 150, 0);
    CGContextRestoreGState(context);
    CGGradientRelease(g[i]);         // don't forget to release the gradient
}