複数の画像を合成させて新しいUIImageオブジェクトを生成したい

本記事では、すでに画像(UIImageオブジェクト)が複数枚用意されていて、それらのすべての画像を合成させてみましょう。

ここでは例として「わーっ」と描かれたセリフ画像と「滑っているネコ」が描かれている画像を1つの画像として合成させてみます。

- (UIImage *)compositeImages:(NSArray *)array size:(CGSize)size
{
    UIImage *image = nil;
    
    // ビットマップ形式のグラフィックスコンテキストの生成
    UIGraphicsBeginImageContextWithOptions(size, 0.f, 0);
    
    // 塗りつぶす領域を決める
    CGRect rect = CGRectMake(0, 0, size.width, size.height);
    
    for (id item in array) {
        if (![item isKindOfClass:[UIImage class]]) {
            continue;
        }
        UIImage *img = item;
        [img drawInRect:rect];
    }
    
    // 現在のグラフィックスコンテキストの画像を取得する
    image = UIGraphicsGetImageFromCurrentImageContext();
    
    // 現在のグラフィックスコンテキストへの編集を終了
    // (スタックの先頭から削除する)
    UIGraphicsEndImageContext();
    
    return image;
}

呼び出し元はこんな感じ。

- (IBAction)tappedButton:(id)sender
{
    // ImageViewのサイズを取得する
    CGSize size = self.imageView.frame.size;

    // 重ねて描画したい画像の配列を作成します
    NSArray *images = @[[UIImage imageNamed:@"neko1"],
                        [UIImage imageNamed:@"neko2"]];
    
    // 合成したUIImageオブジェクトを生成する
    UIImage *image = [self compositeImages:images size:size];
    
    // 生成したUIImageオブジェクトをImageViewに設定する
    self.imageView.image = image;
}

上記のコードを実行すると下記のような画像が生成することが可能です。