使用CoreGraphics绘制圆形线性渐变（或扩展径向渐变）

Question

我想用CoreGraphics做一些自定义绘图。我的视图需要一个线性渐变，但事实是这个视图是一个圆角矩形，所以我希望我的渐变也是角度圆角。您可以在下图中看到我想要实现的目标：

那么可以在CoreGraphics或其他一些程序化和简单的方式中实现吗？ 谢谢。

Answer 1

我认为没有相应的API，但如果您首先在(N+1)x(N+1)大小的位图上下文中绘制径向渐变，然后从上下文转换图像，则可以获得相同的效果左侧和右侧大写设置为N的可调整大小的图片。

伪代码：

UIGraphicsBeginImageContextWithOptions(CGSizeMake(N+1,N+1), NO, 0.0f);
CGContextRef context = UIGraphicsGetCurrentContext();

// <draw the gradient into 'context'>

UIImage* gradientBase = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

UIImage* gradientImage = [gradientBase resizableImageWithCapInsets:UIEdgeInsetsMake(0,N,0,N)];

如果您希望图片也垂直缩放，则只需将大写设置为UIEdgeInsetsMake(N,N,N,N)。

Answer 2

我只想为此技术添加更多示例代码，因为有些事情并不明显。也许这对某些人有用：

所以，让我们说，我们有自定义视图类，并在其中使用drawRect:方法：

// Defining the rect in which to draw
CGRect drawRect=self.bounds;
Float32 gradientSize=drawRect.size.height;   // The size of original radial gradient
CGPoint center=CGPointMake(0.5f*gradientSize,0.5f*gradientSize);  // Center of gradient

// Creating the gradient
Float32 colors[4]={0.f,1.f,1.f,0.2f};  // From opaque white to transparent black
CGGradientRef gradient=CGGradientCreateWithColorComponents(CGColorSpaceCreateDeviceGray(), colors, nil, 2);

// Starting image and drawing gradient into it
UIGraphicsBeginImageContextWithOptions(CGSizeMake(gradientSize, gradientSize), NO, 1.f);
CGContextRef context=UIGraphicsGetCurrentContext();
CGContextDrawRadialGradient(context, gradient, center, 0.f, center, center.x, 0);  // Drawing gradient
UIImage* gradientImage=UIGraphicsGetImageFromCurrentImageContext();  // Retrieving image from context
UIGraphicsEndImageContext();  // Ending process
gradientImage=[gradientImage resizableImageWithCapInsets:UIEdgeInsetsMake(0.f, center.x-1.f, 0.f, center.x-1.f)];  // Leaving 2 pixels wide area in center which will be tiled to fill whole area

// Drawing image into view frame
[gradientImage drawInRect:drawRect];

这就是全部。此外，如果您在应用程序运行时不打算更改渐变，您可能希望在awakeFromNib方法中放置除最后一行之外的所有内容，然后在drawRect:中将gradientImage绘制到视图的框架中。另外，请不要忘记在这种情况下保留gradientImage。