Quartz2D之漸變使用初步

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度。而且藍色與黃色區域也有所增大，更靠近矩形的中心。