渐变

使用Quartz提供的CGContextDrawRadialGradient或者CGContextDrawLinearGradient创建渐变。

如何创建渐变

  • 创建CGGradient对象,提供颜色空间
  • 使用CGContextDrawRadialGradient或者CGContextDrawLinearGradient来绘制渐变

创建CGGradient

创建CGGradient提供了两个函数,CGGradientCreateWithColorComponentsCGGradientCreateWithColors

使用CGGradientCreateWithColorComponents创建CGGradient

1
2
3
4
5
6
7
8
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
CGFloat colors[] = {
204.0 / 255.0, 224.0 / 255.0, 244.0 / 255.0, 1.00,
29.0 / 255.0, 156.0 / 255.0, 215.0 / 255.0, 1.00,
0.0 / 255.0, 50.0 / 255.0, 126.0 / 255.0, 1.00,
};
_gradient = CGGradientCreateWithColorComponents(rgb, colors, NULL, 3 * 4));
CGColorSpaceRelease(rgb);

使用CGGradientCreateWithColors创建CGGradient

1
2
3
4
5
CFMutableArrayRef array = CFArrayCreateMutable(NULL, 0, NULL);
CFArrayAppendValue(array, [UIColor redColor].CGColor);
CFArrayAppendValue(array, [UIColor blueColor].CGColor);
_gradient = CGGradientCreateWithColors(rgb, array, NULL);
CFRelease(array);

注意手动管理内存,需要手动释放。

CGContextDrawLinearGradient

CGContextDrawLinearGradient是线性渐变,由两个端点连接的轴线渐变。

参数 类型 描述
c CGContextRef 上下文
gradient CGGradientRef 提供颜色空间
startPoint CGGradientRef 开始点颜色
endPoint CGGradientRef 结束点颜色
options CGGradientDrawingOptions kCGGradientDrawsBeforeStartLocation或者kCGGradientDrawsBeforeStartLocation

kCGGradientDrawsBeforeStartLocation 填充超出起始位置,延伸超过终点的颜色由CGGradient对象限定在位置0的颜色。

1
2
3
4
5
CGContextDrawLinearGradient(context,
self.gradient,
startPoint(self.bounds),
endPoint(self.bounds),
kCGGradientDrawsBeforeStartLocation);

gradients

kCGGradientDrawsAfterEndLocation 填充应超出结束位置。延伸超过终点的颜色由CGGradient对象限定在位置1的颜色

1
2
3
4
5
CGContextDrawLinearGradient(context,
self.gradient,
startPoint(self.bounds),
endPoint(self.bounds),
kCGGradientDrawsAfterEndLocation);

gradients

因为这个是options,所以可以同时设两个值,那么会同时超过起点与结束点。

1
2
3
4
5
6
CGContextDrawLinearGradient(context,
self.gradient,
startPoint(self.bounds),
endPoint(self.bounds),
kCGGradientDrawsBeforeStartLocation
| kCGGradientDrawsAfterEndLocation);

gradients

CGContextDrawRadialGradient

CGContextDrawRadialGradient径向渐变,也是连个端口连接的轴线渐变,但是渐变路径是两个圆半径提供。

1
2
3
4
5
6
7
CGContextDrawRadialGradient(context,
self.gradient,
startCenter(self.bounds),
startRadius(self.bounds),
endCenter(self.bounds),
endRadius(self.bounds),
kCGGradientDrawsBeforeStartLocation);
参数 类型 描述
c CGContextRef 上下文
gradient CGGradientRef 提供颜色空间
startCenter CGPoint 开始圆的中心
startRadius CGFloat 开始圆半径
endCenter CGPoint 结束圆的中心
endRadius CGFloat 结束圆半径
options CGGradientDrawingOptions 同CGContextDrawLinearGradient中的options一样

gradients

坚持原创技术分享,您的支持将鼓励我继续创作!