Quartz2D之渐变使用初步

上一篇—— Quartz2D之Path使用初步 我们谈到如何使用 Quartz2D 中的 Path 实现各种图形的绘制。本篇我们介绍 Quartz2D 提供的两种渐变填充方法。第一种是使用 Quartz 自带的 Gradient 填充方法；第二种是使用自定义的着色器。

这里将先描述如何使用 CGGradient 对象来做渐变填充。

// Drawing code
 
// 创建Quartz上下文
CGContextRef context = UIGraphicsGetCurrentContext();
 
// 创建色彩空间对象
CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
 
// 创建起点颜色
CGColorRef beginColor = CGColorCreate(colorSpaceRef, (CGFloat[]){0.01f, 0.99f, 0.01f, 1.0f});
 
// 创建终点颜色
CGColorRef endColor = CGColorCreate(colorSpaceRef, (CGFloat[]){0.99f, 0.99f, 0.01f, 1.0f});
 
// 创建颜色数组
CFArrayRef colorArray = CFArrayCreate(kCFAllocatorDefault, (const void*[]){beginColor, endColor}, 2, nil);
 
// 创建渐变对象
CGGradientRef gradientRef = CGGradientCreateWithColors(colorSpaceRef, colorArray, (CGFloat[]){
    0.0f,       // 对应起点颜色位置
    1.0f        // 对应终点颜色位置
});
 
// 释放颜色数组
CFRelease(colorArray);
 
// 释放起点和终点颜色
CGColorRelease(beginColor);
CGColorRelease(endColor);
 
// 释放色彩空间
CGColorSpaceRelease(colorSpaceRef);
 
CGContextDrawLinearGradient(context, gradientRef, CGPointMake(0.0f, 0.0f), CGPointMake(320.0f, 460.0f), 0);
 
// 释放渐变对象
CGGradientRelease(gradientRef);

上述代码效果将产生一个由绿到蓝的一个渐变填充矩形。

这里使用了 CGColor 和 CFArray 来作为设置渐变颜色的参数。另外， CGGradientCreateWithColors 的最后一个 locations 参数可以传空，这样默认为从0.0到1.0。

以上画的是两种颜色的渐变，是由绿到靛蓝。下面我们来看一下三层颜色的渐变：

// 创建Quartz上下文
CGContextRef context = UIGraphicsGetCurrentContext();
 
// 创建色彩空间对象
CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
 
// 创建渐变对象
CGGradientRef gradientRef = CGGradientCreateWithColorComponents(colorSpaceRef,
                                                                (CGFloat[]){
                                                                    0.01f, 0.99f, 0.01f, 1.0f,
                                                                    0.01f, 0.99f, 0.99f, 1.0f,
                                                                    0.99f, 0.99f, 0.01f, 1.0f
                                                                },
                                                                (CGFloat[]){
                                                                    0.0f,
                                                                    0.5f,
                                                                    1.0f
                                                                },
                                                                3);
 
 
// 释放色彩空间
CGColorSpaceRelease(colorSpaceRef);
 
// 填充渐变色
CGContextDrawLinearGradient(context, gradientRef, CGPointMake(0.0f, 0.0f), CGPointMake(320.0f, 460.0f), 0);
 
// 释放渐变对象
CGGradientRelease(gradientRef);

上述代码绘制了三种颜色的渐变色，由绿到靛蓝到黄色。并且在45度轴方向上的颜色都是一样的。

当然，我们也可以通过改变矩形两点坐标的位置来改变渐变轴的方向，并且也可以设置关键颜色的位置：

// 创建Quartz上下文
CGContextRef context = UIGraphicsGetCurrentContext();
 
// 创建色彩空间对象
CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
 
// 创建渐变对象
CGGradientRef gradientRef = CGGradientCreateWithColorComponents(colorSpaceRef,
                                                                (CGFloat[]){
                                                                    0.01f, 0.99f, 0.01f, 1.0f,
                                                                    0.01f, 0.99f, 0.99f, 1.0f,
                                                                    0.99f, 0.99f, 0.01f, 1.0f
                                                                },
                                                                (CGFloat[]){
                                                                    0.1f,
                                                                    0.5f,
                                                                    0.9f
                                                                },
                                                                3);
 
 
// 释放色彩空间
CGColorSpaceRelease(colorSpaceRef);
 
// 填充渐变色
CGContextDrawLinearGradient(context, gradientRef, CGPointMake(0.0f, 460.0f), CGPointMake(320.0f, 0.0f), 0);
 
// 释放渐变对象
CGGradientRelease(gradientRef);

运行上述代码后我们可以发现，渐变轴被旋转了90度。而且蓝色与黄色区域也有所增大，更靠近矩形的中心。