Quartz2D之着色器使用初步

上一讲谈到了如何使用CGGradient来做线性渐变效果。那么本讲将介绍如何使用CGShader来做线性渐变效果。

使用着色器制作渐变的方法与直接用Quartz提供的CGGradient方法类似：

1、首先创建色彩空间

2、创建一个函数对象。该对象包含了输入范围信息以及输出范围信息。

3、创建着色器对象。创建着色器对象时也指定了所要绘制矩形的起点坐标与终点坐标。

4、绘制

代码如下：

//
//  MyQuartzView.m
//  QuartzTest
//
//  Created by zenny_chen on 12-2-21.
//  Copyright (c) 2012年 GreenGames Studio. All rights reserved.
//

#import "MyQuartzView.h"

// Quartz2D以及Core Animation所需要的头文件
#import <QuartzCore/QuartzCore.h>

@implementation MyQuartzView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

static void MyShaderProcedure(void *info, const CGFloat *in, CGFloat *out)
{
    CGFloat color;
    
    if(in[0] < 0.33f)
        color = 0.3f;
    else if(in[0] < 0.66f)
        color = 0.9f;
    else
        color = 0.6f;
    
    out[0] = color;
    out[1] = color;
    out[2] = color;
    out[3] = 1.0f;
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
    
    // 创建Quartz上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    const CGFunctionCallbacks callbacks = {
        .version = 0, .evaluate = &MyShaderProcedure, .releaseInfo = NULL
    };
    
    // 创建函数对象
    CGFunctionRef funcRef = CGFunctionCreate(NULL,  // 将info置空
                                             1,     // 1个输入元素（每个元素为2个分量来表示区间）
                                             (CGFloat[]){0.0f, 1.0f}, 
                                             4,     // 4个输出元素
                                             (CGFloat[]){0.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, 1.0f}, 
                                             &callbacks);
    
    // 创建色彩空间对象
    CGColorSpaceRef colorSpaceRef = CGColorSpaceCreateDeviceRGB();
    
    // 创建着色器对象
    CGShadingRef shadingRef = CGShadingCreateAxial(colorSpaceRef, 
                                                   CGPointMake(0.0f, 0.0f),         // 起点坐标
                                                   CGPointMake(320.0f, 460.0f),     // 终点坐标
                                                   funcRef, false, false);
    
    // 释放色彩空间对象
    CGColorSpaceRelease(colorSpaceRef);
    
    // 释放函数对象
    CGFunctionRelease(funcRef);
    
    // 绘制着色渐变
    CGContextDrawShading(context, shadingRef);
    
    // 释放着色器对象
    CGShadingRelease(shadingRef);
}

@end

从效果上我们可以看出，利用着色器做线性渐变仍然是以一个45度轴为基础进行渐变操作的。上述代码将产生一个从上到下的，暗灰、白到灰白的45度斜条。