Quartz：无法使用渐变填充创建圆角矩形答案

【问题标题】：Quartz: can't create a rounded rectangle with gradient fillQuartz：无法使用渐变填充创建圆角矩形
【发布时间】：2011-09-04 16:16:31
【问题描述】：

我快要开始扯头发了。我正在尝试创建一个渐变填充，覆盖带圆角的矩形区域。这是我在drawRect: 中的代码：

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextClearRect(ctx, rect);

CGFloat c = BUBBLE_INSET + BUBBLE_CORNER_RADIUS;

CGContextMoveToPoint(ctx, BUBBLE_INSET, c);

CGContextAddArcToPoint(ctx, BUBBLE_INSET, BUBBLE_INSET, c, BUBBLE_INSET, BUBBLE_CORNER_RADIUS);    
CGContextAddLineToPoint(ctx, rect.size.width - c, BUBBLE_INSET);
CGContextAddArcToPoint(ctx, rect.size.width - BUBBLE_INSET, BUBBLE_INSET, rect.size.width - BUBBLE_INSET, c, BUBBLE_CORNER_RADIUS);
CGContextAddLineToPoint(ctx, rect.size.width - BUBBLE_INSET, rect.size.height - c);
CGContextAddArcToPoint(ctx, rect.size.width - BUBBLE_INSET, rect.size.height - BUBBLE_INSET, rect.size.width - c, rect.size.height - BUBBLE_INSET, BUBBLE_CORNER_RADIUS);
CGContextAddLineToPoint(ctx, c, rect.size.height - BUBBLE_INSET);
CGContextAddArcToPoint(ctx, BUBBLE_INSET, rect.size.height - BUBBLE_INSET, BUBBLE_INSET, rect.size.height - c, BUBBLE_CORNER_RADIUS);

CGContextClosePath(ctx);

CGContextClip(ctx);

CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
NSArray *colors = [NSArray arrayWithObjects:color1, color2, nil];

CGGradientRef gradient = CGGradientCreateWithColors(space, (CFArrayRef)colors, NULL);
CGColorSpaceRelease(space);

CGPoint p1 = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
CGPoint p2 = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

CGContextDrawLinearGradient(ctx, gradient, p1, p2, 0);
CGGradientRelease(gradient);

此代码绘制一个空白矩形。路径构建正确（我尝试调用CGContextFillPath()，结果很好地填充了纯色），color1 和color2 值正确（在调试器中看到）。这段代码有什么问题？

【问题讨论】：

您确定吗，color1 和 color2 是在 RGB 空间中定义的。即[[UIColor blackColor] CGColor] 返回单色间隔颜色。
原来color1和color2都是UIColor类型，完全错了。在需要的地方添加了CGColor 调用，现在一切正常

标签： iphone objective-c cocoa-touch core-graphics

【解决方案1】：

我不确定您的颜色是如何包装颜色数组的。

尝试使用

CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);

相反。

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextClearRect(ctx, rect);

CGFloat c = BUBBLE_INSET + BUBBLE_CORNER_RADIUS;

CGContextMoveToPoint(ctx, BUBBLE_INSET, c);

CGContextAddArcToPoint(ctx, BUBBLE_INSET, BUBBLE_INSET, c, BUBBLE_INSET, BUBBLE_CORNER_RADIUS);    
CGContextAddLineToPoint(ctx, rect.size.width - c, BUBBLE_INSET);
CGContextAddArcToPoint(ctx, rect.size.width - BUBBLE_INSET, BUBBLE_INSET, rect.size.width - BUBBLE_INSET, c, BUBBLE_CORNER_RADIUS);
CGContextAddLineToPoint(ctx, rect.size.width - BUBBLE_INSET, rect.size.height - c);
CGContextAddArcToPoint(ctx, rect.size.width - BUBBLE_INSET, rect.size.height - BUBBLE_INSET, rect.size.width - c, rect.size.height - BUBBLE_INSET, BUBBLE_CORNER_RADIUS);
CGContextAddLineToPoint(ctx, c, rect.size.height - BUBBLE_INSET);
CGContextAddArcToPoint(ctx, BUBBLE_INSET, rect.size.height - BUBBLE_INSET, BUBBLE_INSET, rect.size.height - c, BUBBLE_CORNER_RADIUS);

CGContextClosePath(ctx);

CGContextClip(ctx);

CGGradientRef gradient;
CGColorSpaceRef rgbColorspace;
size_t num_locations = 2;
CGFloat locations[2] = { 0.0, 1.0 };
CGFloat components[8] = { 1.0, 0.0, 0.0, 1.0,  // Start color
    1.0, 1.0, 1.0, 0.65 }; // End color

rgbColorspace = CGColorSpaceCreateDeviceRGB();
gradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);

CGPoint p1 = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
CGPoint p2 = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

CGContextDrawLinearGradient(ctx, gradient, p1, p2, 0);
CGGradientRelease(gradient);

你会得到这个：

偏移量为 5.0 半径为 10.0

【讨论】：

【解决方案2】：

原来 color1 和 color2 的类型是UIColor，这是完全错误的。换行了

NSArray *colors = [NSArray arrayWithObjects:color1, color2, nil];

到

NSArray *colors = [NSArray arrayWithObjects:[color1 CGColor], [color2 CGColor], nil];

得到了我期待的结果。

【讨论】：