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

  

在先前文章基本調色盤的製作方式（上）一文中，已經成功製作出調色盤區域的 UIImage，接下來本篇示範將著重於透過點擊面的互動方式從 UIImage 中選擇對應的顏色並做設定，其方法如下。

下面是本範例所涉獵的相關文章。

• 關於 UIView 圓角的二三事
• Touch Panel / 觸碰螢幕 / 壓力感應器的基本使用方式
• 取得點擊特定 View 時的相對座標
• UIImage 內 Pixel / 像素的 RGBA 值取得方式

首先是確認顏色的 View 屬性設定，我們要將其設定成圓角黑邊。

[[colorView layer] setCornerRadius:10.0];
[[colorView layer] setBorderColor:[UIColor blackColor].CGColor];
[[colorView layer] setBorderWidth:2.0];
[[colorView layer] setMasksToBounds:YES];

接下來是畫面觸碰事件內的寫法，我們將在觸碰事件中呼叫一個自行定義的函式，此函式會透過觸碰畫面時所取得的座標從 UIImage 中取得對應的顏色並做設定，其程式瑪如下。

float x, y;

//分別針對在一定時間量內所點擊的所有點做運算
for (UITouch *touch in touches) {

//取得相對應的座標
x = [touch locationInView:imageView].x;
y = [touch locationInView:imageView].y;

//設定在view的範圍內才呼叫自行定義的函式
if ((x >= 0) && (x <= imageView.frame.size.width) && (y >= 0) && (y <= imageView.frame.size.height)) {
    [self getRGBAFromImage:imageView.image atX:x andY:y];
    }
}

上述程式碼可以置入任何的觸碰事件中，像是點擊畫面時觸發的事件、拖曳畫面時所觸發的事件或是連點畫面時所觸發的事件等等。

最後也就是本範例中最重要的部份，取得 UIImage 中 RGB 的顏色參數，這裡我將沿用 UIImage 內 Pixel / 像素的 RGBA 值取得方式一文內的程式碼，並做些許的修改，程式瑪如下。

//自行定義的函式，取得影像座標上的RGBA值
- (void)getRGBAFromImage:(UIImage *)image atX:(int)xx andY:(int)yy {

    CGImageRef imageRef = [image CGImage];
    int width = CGImageGetWidth(imageRef);
    int height = CGImageGetHeight(imageRef);

    //從image的data buffer中取得影像，放入格式化後的rawData中
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    unsigned char *rawData = malloc(height * width * 4);
    NSUInteger bytesPerPixel = 4;
    NSUInteger bytesPerRow = bytesPerPixel * width;
    NSUInteger bitsPerComponent = 8;
    CGContextRef context = CGBitmapContextCreate(rawData,
                                                 width,
                                                 height,
                                                 bitsPerComponent,
                                                 bytesPerRow,
                                                 colorSpace,
                                                 kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
    CGColorSpaceRelease(colorSpace);

    CGContextDrawImage(context, CGRectMake(0, 0, width, height), imageRef);
    CGContextRelease(context);

    //將XY座標轉成一維陣列
    int byteIndex = (bytesPerRow * yy) + (bytesPerPixel * xx);

    //取得RGBA位元的資料並轉成0~1的格式
    float red = (float)(rawData[byteIndex]) / 255;
    float green = (float)rawData[byteIndex + 1] / 255;
    float blue = (float)rawData[byteIndex + 2] / 255;

    //輸出至colorView上
    [[colorView layer] setBackgroundColor:[UIColor colorWithRed:red green:green blue:blue alpha:1.0].CGColor];

    free(rawData);
}

在完成上述程式碼之後，就可以從確認顏色的 colorView 上看到所選取的顏色，我們可以在調色盤區域之內做點擊或是拖曳畫面的動作來選取想要的顏色。

ps:關於調色盤區域的 UIImage，若是怕麻煩也可以直接使用擷圖的方式，擷取繪圖軟體的中的調色盤來使用。