Quartz2D之渐变使用初步
Quartz2D提供了两种渐变填充方法。第一种是使用Quartz自带的Gradient填充方法；第二种是使用自定义的着色器。
这里将先描述如何使用CGGradient对象来做渐变填充。
1 // Drawing code 2 3 // 创建Quartz上下文 4 CGContextRef context = UIGraphicsGetCurrentContext(); 5 6 // 创建色彩空间对象 7 CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB(); 8 9 // 创建起点颜色 10 CGColorRef beginColor = CGColorCreate(colorSpaceRef, (CGFloat[]){0.01f, 0.99f, 0.01f, 1.0f}); 11 12 // 创建终点颜色 13 CGColorRef endColor = CGColorCreate(colorSpaceRef, (CGFloat[]){0.99f, 0.99f, 0.01f, 1.0f}); 14 15 // 创建颜色数组 16 CFArrayRef colorArray = CFArrayCreate(kCFAllocatorDefault, (const void*[]){beginColor, endColor}, 2, nil); 17 18 // 创建渐变对象 19 CGGradientRef gradientRef = CGGradientCreateWithColors(colorSpaceRef, colorArray, (CGFloat[]){ 20 0.0f, // 对应起点颜色位置 21 1.0f // 对应终点颜色位置 22 }); 23 24 // 释放颜色数组 25 CFRelease(colorArray); 26 27 // 释放起点和终点颜色 28 CGColorRelease(beginColor); 29 CGColorRelease(endColor); 30 31 // 释放色彩空间 32 CGColorSpaceRelease(colorSpaceRef); 33 34 CGContextDrawLinearGradient(context, gradientRef, CGPointMake(0.0f, 0.0f), CGPointMake(320.0f, 460.0f), 0); 35 36 // 释放渐变对象 37 CGGradientRelease(gradientRef);
上述代码效果将产生一个由绿到蓝的一个渐变填充矩形。
这里使用了CGColor和CFArray来作为设置渐变颜色的参数。另外， CGGradientCreateWithColors的最后一个locations参数可以传空，这样默认为从0.0到1.0。
以上画的是两种颜色的渐变，是由绿到靛蓝。下面我们来看一下三层颜色的渐变：
1 // 创建Quartz上下文 2 CGContextRef context = UIGraphicsGetCurrentContext(); 3 4 // 创建色彩空间对象 5 CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB(); 6 7 // 创建渐变对象 8 CGGradientRef gradientRef = CGGradientCreateWithColorComponents(colorSpaceRef, 9 (CGFloat[]){ 10 0.01f, 0.99f, 0.01f, 1.0f, 11 0.01f, 0.99f, 0.99f, 1.0f, 12 0.99f, 0.99f, 0.01f, 1.0f 13 }, 14 (CGFloat[]){ 15 0.0f, 16 0.5f, 17 1.0f 18 }, 19 3); 20 21 22 // 释放色彩空间 23 CGColorSpaceRelease(colorSpaceRef); 24 25 // 填充渐变色 26 CGContextDrawLinearGradient(context, gradientRef, CGPointMake(0.0f, 0.0f), CGPointMake(320.0f, 460.0f), 0); 27 28 // 释放渐变对象 29 CGGradientRelease(gradientRef);
上述代码绘制了三种颜色的渐变色，由绿到靛蓝到黄色。并且在45度轴方向上的颜色都是一样的。
当然，我们也可以通过改变矩形两点坐标的位置来改变渐变轴的方向，并且也可以设置关键颜色的位置：
1 // 创建Quartz上下文 2 CGContextRef context = UIGraphicsGetCurrentContext(); 3 4 // 创建色彩空间对象 5 CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB(); 6 7 // 创建渐变对象 8 CGGradientRef gradientRef = CGGradientCreateWithColorComponents(colorSpaceRef, 9 (CGFloat[]){ 10 0.01f, 0.99f, 0.01f, 1.0f, 11 0.01f, 0.99f, 0.99f, 1.0f, 12 0.99f, 0.99f, 0.01f, 1.0f 13 }, 14 (CGFloat[]){ 15 0.1f, 16 0.5f, 17 0.9f 18 }, 19 3); 20 21 22 // 释放色彩空间 23 CGColorSpaceRelease(colorSpaceRef); 24 25 // 填充渐变色 26 CGContextDrawLinearGradient(context, gradientRef, CGPointMake(0.0f, 460.0f), CGPointMake(320.0f, 0.0f), 0); 27 28 // 释放渐变对象 29 CGGradientRelease(gradientRef);
运行上述代码后我们可以发现，渐变轴被旋转了90度。而且蓝色与黄色区域也有所增大，更靠近矩形的中心。
