objective-c - 使用 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在这种情况下也不要忘记保留。