基本調色盤的製作方式（上）

  

調色盤的製作示範，將分成上下兩部份來說明，分別是使用 Gradient 方法製作出調色區域的 UIImage （上），與透過點擊和拖曳畫面從 UIImage 取得顏色並做設定（下），所以在這部份，只針對如何製作出調色區域的 UIImage 做示範，方法如下。

首先，下列是本範例有涉獵到的幾篇教學文章。

• 繪製漸層顏色 Gradient 的方法
• 簡單改變 UIImage 色調的方法

綜合上面兩篇文章，我們會先對影像繪製一個由左至右的 R-G-B-R 漸層，以確保此漸層能涵蓋更多色域，在最後端（最右邊）繪製一個白色矩形，這個白色矩形將會在之後轉變成白色到黑色的灰階漸層。下面是  R-G-B-R 漸層與白色矩形的程式碼示範。

//製作rgbr水平漸層的條盤
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();

CGFloat components[] = {1.0, 0.0, 0.0, 1.0,
                        1.0, 1.0, 0.0, 1.0,
                        0.0, 1.0, 0.0, 1.0,
                        0.0, 1.0, 1.0, 1.0,
                        0.0, 0.0, 1.0, 1.0,
                        1.0, 0.0, 1.0, 1.0,
                        1.0, 0.0, 0.0, 1.0};

CGFloat locations[] = {0.0, 0.16, 0.33, 0.50, 0.66, 0.82, 1.0};
size_t count = 7;

CGGradientRef gradient = CGGradientCreateWithColorComponents(rgb, components, locations, count);
CGColorSpaceRelease(rgb);

//設定整個調色盤區域的大小與位置
imageView = [[UIImageView alloc] initWithFrame:CGRectMake(60.0, 200.0, 200.0, 200.0)];

UIGraphicsBeginImageContext(imageView.frame.size);
CGContextRef context = UIGraphicsGetCurrentContext();

//漸層繪製保留最後10個像素來製作白色矩形
CGContextDrawLinearGradient(context, gradient, CGPointMake(0.0, 0.0), CGPointMake(190.0, 0.0), 0);

//補上白色矩形
[[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0] set];
CGContextFillRect(context, CGRectMake(190.0, 0, 10.0, 200.0));
CGContextSaveGState(context);

//rgbr水平漸層的條盤
UIImage *paletteImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

上述程式碼在製作 R-G-B-R 漸層上，雖說只有四個關鍵顏色，但是實際在製作上我們是設定 7 個關鍵色，多加上了 RG、GB 與 BR，此目的是為求色盤上得部份顏色更為明顯，如果只做 R-G-B-R 四個關鍵顏色的漸層，則 RG、GB 與 BR 這三個顏色會非常不明顯。

在製作完 R-G-B-R 漸層之後，我們還要製作一個垂直的白色到黑色的漸層，並將這兩個漸層做結合，以完成色調上的轉換。

//製作白黑垂直漸層的遮罩
CGFloat GrayComponents[] = {1.0, 1.0, 1.0, 1.0,
                            0.5, 0.5, 0.5, 1.0,
                            0.0, 0.0, 0.0, 1.0};

CGFloat GrayLocations[] = {0.0, 0.5, 1.0};
count = 3;

gradient = CGGradientCreateWithColorComponents(rgb, GrayComponents, GrayLocations, count);
CGColorSpaceRelease(rgb);

UIGraphicsBeginImageContext(imageView.frame.size);
context = UIGraphicsGetCurrentContext();

//以垂直方式繪製此漸層
CGContextDrawLinearGradient(context, gradient, CGPointMake(0.0, 0.0), CGPointMake(0.0, 200.0), 0);

//將兩者合成
CGContextSetBlendMode(context, kCGBlendModeMultiply);
CGRect drawRect = CGRectMake(0.0, 0.0, imageView.frame.size.width, imageView.frame.size.height);
CGContextDrawImage(context, drawRect, paletteImage.CGImage);
CGContextSaveGState(context);

//將合成結果顯示於畫面上
imageView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

[self.view addSubview:imageView];

在製作白黑漸層部份，我們同樣多增加一個灰色的關鍵顏色，目的同樣是讓色域能更加平均，在完成上述程式碼之後，已經可以在畫面上顯示一個基本的調色盤，而且此調色盤能包含絕大多數色域。

ps:本範例的調色區域並未包含所有色域，尚缺少 R-G-B-R 漸層往白色方向的色域，若要解決此問題，可以在之後將所選取顏色重新製作的往黑白方向的漸層。