IOS圖像處理（5）填充模式

之前我們設置過填充色，但是純色的填充色略顯單調，我們可以使用更加絢麗的填充模式，漸變填充以及模式填充

漸變填充

漸變有兩種：線性漸變以及圓形漸變

線性漸變

- (void)drawRect:(CGRect)rect
{
    //獲取圖像上下文對象
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //使用RGB模式的顏色空間（在Quartz 2D中凡是使用帶有Create或者Copy關鍵字方法創建的對象，在使用后一定要使用對應的方法釋放）
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    //顏色空間，如果使用了RGB顏色空間則4個數字一組表示一個顏色，下面的數組表示3個顏色
    CGFloat colors[] = {1,1,0,1,0,1,1,1,1,0,1,0};
    //locations代表3個顏色的分布區域（0~1），如果需要均勻分布只需要傳入NULL
    CGFloat locations[3]={0,0.3,1};
    
    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colors, locations, 3);
    
    //需要釋放顏色空間
    CGColorSpaceRelease(colorSpace);
    
    //第三個參數表示起始點，第四個參數表示結束點
    //最后一個參數如果設置kCGGradientDrawsAfterEndLocation表示結束點后面的區域使用漸變填充，設置kCGGradientDrawsBeforeStartLocation表示起始點前面的區域使用漸變填充，設置為0表示只填充起始點和結束點之間的區域
    CGContextDrawLinearGradient(context, gradient, CGPointMake(0, 100), CGPointMake(0, 150), 0);

      CGGradientRelease(gradient);

}

 

 

圓形漸變

- (void)drawRect:(CGRect)rect
{
    //獲取圖像上下文對象
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //使用RGB模式的顏色空間
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    //顏色空間，如果使用了RGB顏色空間則4個數字一組表示一個顏色，下面的數組表示3個顏色
    CGFloat colors[] = {1,1,0,1,0,1,1,1,1,0,1,0};
    //locations代表3個顏色的分布區域（0~1），如果需要均勻分布只需要傳入NULL
    CGFloat locations[3]={0,0.3,1};
    
    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colors, locations, 3);
    
    //需要釋放顏色空間
    CGColorSpaceRelease(colorSpace);
    
    //第三個參數表示起始中心點，第四個參數表示起始半徑
    //第五個參數表示結束中心點，第六個參數表示結束半徑
    //最后一個參數如果設置kCGGradientDrawsAfterEndLocation表示結束點后面的區域使用漸變填充，設置kCGGradientDrawsBeforeStartLocation表示起始點前面的區域使用漸變填充，設置為0表示只填充起始點和結束點之間的區域
    CGContextDrawRadialGradient(context, gradient, CGPointMake(160, 300), 50, CGPointMake(160, 300), 100, 0);
}

 

 

使用漸變色填充

- (void)drawRect:(CGRect)rect
{
    //獲取圖像上下文對象
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    UIRectClip(CGRectMake(20, 20, 250, 250));
    
    
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat colors[] = {1,1,0,1,0,1,1,1,1,0,1,0};
    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colors, NULL, 3);
    CGColorSpaceRelease(colorSpace);
    

    CGContextDrawLinearGradient(context, gradient, CGPointMake(0, 0), CGPointMake(300, 300), kCGGradientDrawsAfterEndLocation);
}

 

模式填充 

模式填充有兩種：有顏色填充以及無顏色填充

有顏色填充的主要步驟如下

1：創建一個符合CGPatternDrawPatternCallback(void *,CGContextRef)簽名的方法函數生產用來填充的瓷磚

2：使用CGPatternCreate創建CGPatterRef

3：使用CGColorSpaceCreatePattern創建顏色空間CGColorSpaceRef，這個顏色空間跟前面繪制漸變的顏色空間不太一樣，前面創建漸變使用的顏色空間是設備無關的，我們需要基於這個顏色空間創建一個顏色空間專門用於填充（注意對於有顏色填充創建填充顏色空間參數為NULL，不用基於設備無關的顏色空間創建）

4：使用CGPatternRef和CGColorSpaceRef，通過CGColorCreateWitPattern創建填充顏色CGColorRef

5：將填充色設置為之前獲得的CGColorRef然后進行繪制

void drawTile(void *info,CGContextRef context) {
    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
    CGContextFillRect(context, CGRectMake(0, 0, 30, 30));
    CGContextSetFillColorWithColor(context, [UIColor grayColor].CGColor);
    CGContextFillRect(context, CGRectMake(0, 30, 30, 30));
    CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);
    CGContextFillRect(context, CGRectMake(30, 0, 30, 30));
    CGContextSetFillColorWithColor(context, [UIColor purpleColor].CGColor);
    CGContextFillRect(context, CGRectMake(30, 30, 30, 30));
}

- (void)drawRect:(CGRect)rect
{
    //獲取圖像上下文對象
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    
    //填充模式回調函數結構體
    CGPatternCallbacks callback = {0,drawTile,NULL};
    //設置磚塊樣式
    //void *infoCGRect  瓷磚繪制函數的第一個參數
    //bounds    每塊瓷磚的大小
    //CGAffineTransform matrix     變換矩陣，如果不用變換可以傳入CGAffineTransformIdentity
    //CGFloat xStep, CGFloat yStep  指定瓷磚塊橫向和縱向的間距，如果大於瓷磚大小，瓷磚間會有間隙
    // CGPatternTiling tiling  平鋪模式
    //bool isColored    是否指定了顏色
    //const CGPatternCallbacks *callbacks   回調函數結構體
    CGPatternRef pattern = CGPatternCreate(NULL, CGRectMake(0, 0, 60, 60), CGAffineTransformMakeRotation(-45 * M_PI/180), 60, 60, kCGPatternTilingNoDistortion, true, &callback);
    
    
    //設置顏色空間
    //設備無關的顏色空間 CGColorSpaceCreateDeviceRGB();
    //模式填充顏色空間,注意對於有顏色填充模式，這里傳NULL
    CGColorSpaceRef colorSpace = CGColorSpaceCreatePattern(NULL);
    
    //通過前兩項設置顏色
    CGFloat alpha = 1;
    CGColorRef color = CGColorCreateWithPattern(colorSpace, pattern, &alpha);
    CGColorSpaceRelease(colorSpace);
    CGPatternRelease(pattern);
    
    //繪制
    CGContextSetFillColorWithColor(context, color);
    CGContextFillRect(context, CGRectMake(0, 20, 155, 155));
    
    CGContextSetStrokeColorWithColor(context, color);
    CGContextStrokeRectWithWidth(context, CGRectMake(165,20, 155, 155), 5);
    
}

 

 

也可以不創建CGColorRef，直接使用CGPatternRef和CGColorSpaceRef來進行有顏色填充

void drawTile(void *info,CGContextRef context) {
    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
    CGContextFillRect(context, CGRectMake(0, 0, 30, 30));
    CGContextSetFillColorWithColor(context, [UIColor grayColor].CGColor);
    CGContextFillRect(context, CGRectMake(0, 30, 30, 30));
    CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);
    CGContextFillRect(context, CGRectMake(30, 0, 30, 30));
    CGContextSetFillColorWithColor(context, [UIColor purpleColor].CGColor);
    CGContextFillRect(context, CGRectMake(30, 30, 30, 30));
}

- (void)drawRect:(CGRect)rect
{
    //獲取圖像上下文對象
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    
    //填充模式回調函數結構體
    CGPatternCallbacks callback = {0,drawTile,NULL};
    //設置磚塊樣式
    //void *infoCGRect  瓷磚繪制函數的第一個參數
    //bounds    每塊瓷磚的大小
    //CGAffineTransform matrix     變換矩陣，如果不用變換可以傳入CGAffineTransformIdentity
    //CGFloat xStep, CGFloat yStep  指定瓷磚塊橫向和縱向的間距，如果大於瓷磚大小，瓷磚間會有間隙
    // CGPatternTiling tiling  平鋪模式
    //bool isColored    是否指定了顏色
    //const CGPatternCallbacks *callbacks   回調函數結構體
    CGPatternRef pattern = CGPatternCreate(NULL, CGRectMake(0, 0, 60, 60), CGAffineTransformMakeRotation(-45 * M_PI/180), 60, 60, kCGPatternTilingNoDistortion, true, &callback);
    
    
    //設置顏色空間
    //設備無關的顏色空間 CGColorSpaceCreateDeviceRGB();
    //模式填充顏色空間,注意對於有顏色填充模式，這里傳NULL
    CGColorSpaceRef colorSpace = CGColorSpaceCreatePattern(NULL);
    CGContextSetFillColorSpace(context, colorSpace);
    CGContextSetStrokeColorSpace(context, colorSpace);
    
    
    float alpha = 1;
    ////最后一個參數對於有顏色瓷磚指定為透明度的參數地址，對於無顏色瓷磚則指定當前顏色空間對應的顏色數組
    CGContextSetFillPattern(context, pattern, &alpha);
    CGContextSetStrokePattern(context, pattern, &alpha);
    
    //繪制
    CGContextFillRect(context, CGRectMake(0, 20, 155, 155));
    CGContextStrokeRectWithWidth(context, CGRectMake(165,20, 155, 155), 5);
    
}

 

結果和前一個例子一樣

 

以上兩個例子都是有顏色填充，在創建瓷磚的同時已經確定了瓷磚的樣色，我們也可以創建瓷磚時只設定瓷磚的形狀而不設置瓷磚的顏色，當使用瓷磚填充時再設定顏色

void drawTile(void *info,CGContextRef context) {
    CGContextFillRect(context, CGRectMake(0, 0, 30, 30));
    CGContextFillRect(context, CGRectMake(30, 30, 30, 30));
}

- (void)drawRect:(CGRect)rect
{
    //獲取圖像上下文對象
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    
    //填充模式回調函數結構體
    CGPatternCallbacks callback = {0,drawTile,NULL};
    //設置磚塊樣式
    //void *infoCGRect  瓷磚繪制函數的第一個參數
    //bounds    每塊瓷磚的大小
    //CGAffineTransform matrix     變換矩陣，如果不用變換可以傳入CGAffineTransformIdentity
    //CGFloat xStep, CGFloat yStep  指定瓷磚塊橫向和縱向的間距，如果大於瓷磚大小，瓷磚間會有間隙
    // CGPatternTiling tiling  平鋪模式
    //bool isColored    是否指定了顏色
    //const CGPatternCallbacks *callbacks   回調函數結構體
    CGPatternRef pattern = CGPatternCreate(NULL, CGRectMake(0, 0, 60, 60), CGAffineTransformIdentity, 60, 60, kCGPatternTilingNoDistortion, false, &callback);
    
    
    //設備無關的顏色空間
    CGColorSpaceRef baseColorSpace = CGColorSpaceCreateDeviceRGB();
    //模式填充顏色空間
    CGColorSpaceRef colorSpace = CGColorSpaceCreatePattern(baseColorSpace);
    CGContextSetFillColorSpace(context, colorSpace);
    CGContextSetStrokeColorSpace(context, colorSpace);
    
    
    CGFloat components[]={250/255.0,100/255.0,150/255.0,1.0};
    ////最后一個參數對於無顏色填充模式指定為當前顏色空間顏色數據
    CGContextSetFillPattern(context, pattern, components);
    CGContextSetStrokePattern(context, pattern, components);
    
    //繪制
    CGContextFillRect(context, CGRectMake(0, 20, 155, 155));
    CGContextStrokeRectWithWidth(context, CGRectMake(165,20, 155, 155), 5);
    
    
}