【iOS】画像からテキストの輪郭を切り抜く①

2015.01.15
iOS iPad iPhone Objective-C

毎日フルーツがある生活に憧れています。
見習いプログラマーの naopon です！

前回からの続きになってしまいますが、
実際にテキストの輪郭パスを画像から切り取る実装です。

※一部コードに前回の「テキストの輪郭パスを取得する」で紹介したカテゴリーを使っています

【画像からテキストの輪郭を切り抜く】

#import &lt;UIKit/UIKit.h&gt;

@interface UIImage (Punching)

- (UIImage *)imageByPunchingText:(NSString *)text
                        fontSize:(float)fontSize
                        fontName:(NSString *)fontName
                       fontColor:(UIColor *)fontColor
                     lineSpacing:(CGFloat)lineSpacing
                   textAlignment:(NSTextAlignment /* center or left or right */)textAlignment;

@end

#import <UIKit/UIKit.h>

@interface UIImage (Punching)

- (UIImage *)imageByPunchingText:(NSString *)text

fontSize:(float)fontSize

fontName:(NSString *)fontName

fontColor:(UIColor *)fontColor

lineSpacing:(CGFloat)lineSpacing

textAlignment:(NSTextAlignment /* center or left or right */)textAlignment;

@end

#import &quot;UIImage+Punching.h&quot;
#import &quot;UIBezierPath+TextPath.h&quot;

@implementation UIImage (Punching)

/**
 *  画像からテキストの輪郭を切り抜く
 *  @param text          切り抜くテキスト
 *  @param fontSize      フォントサイズ
 *  @param fontName      フォント名
 *  @param fontColor     フォント色
 *  @param lineSpacing   行間
 *  @param textAlignment 配置
 *  @return テキストで切り抜いた画像
 */
- (UIImage *)imageByPunchingText:(NSString *)text
                        fontSize:(float)fontSize
                        fontName:(NSString *)fontName
                       fontColor:(UIColor *)fontColor
                     lineSpacing:(CGFloat)lineSpacing
                   textAlignment:(NSTextAlignment /* center or left or right */)textAlignment
{
    //テキストの輪郭パスを取得
    UIBezierPath *textPath = [UIBezierPath fromText:text fontSize:fontSize fontName:fontName lineSpacing:lineSpacing textAlignment:textAlignment];
    
    //テキストパスを中心かつ上下反転
    CGFloat tx = self.size.width/2 - textPath.bounds.size.width/2;
    CGFloat ty = self.size.height/2 + textPath.bounds.size.height/2;
    CGAffineTransform affine = CGAffineTransformMake(1, 0, 0, -1, tx, ty);
    [textPath applyTransform:affine];
    
    //切り抜き
    return [self imageByPunchingPath:textPath punchingColor:fontColor];
}


/**
 *  画像からパスを取り除く
 *  @param punchingPath  切り抜くパス
 *  @param punchingColor 切り抜いたパスに描画する色
 *  @return 切り抜き画像
 */
- (UIImage *)imageByPunchingPath:(UIBezierPath *)punchingPath punchingColor:(UIColor *)punchingColor
{
    //画像加工開始
    UIGraphicsBeginImageContextWithOptions([self size], NO, [self scale]);
    
    //画像初期ポイント設定
    [self drawAtPoint:CGPointZero];
    
    //パスを描画
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetAllowsAntialiasing(context, true);
    CGContextSetShouldAntialias(context, true);
    
    //パス除外
    CGContextSetBlendMode(context, kCGBlendModeDestinationOut);
    [punchingPath fill];
    
    //色付け
    if (punchingColor) {
        CGContextSetBlendMode(context, kCGBlendModeNormal);
        [punchingColor setFill];
        [punchingPath fill];
    }
    
    //合成画像生成
    UIImage *final = UIGraphicsGetImageFromCurrentImageContext();
    
    //画像加工終了
    UIGraphicsEndImageContext();
    
    //合成画像返却
    return final;
}

@end

#import "UIImage+Punching.h"

#import "UIBezierPath+TextPath.h"

@implementation UIImage (Punching)

/**

* 画像からテキストの輪郭を切り抜く

* @param text 切り抜くテキスト

* @param fontSize フォントサイズ

* @param fontName フォント名

* @param fontColor フォント色

* @param lineSpacing 行間

* @param textAlignment 配置

* @return テキストで切り抜いた画像

- (UIImage *)imageByPunchingText:(NSString *)text

fontSize:(float)fontSize

fontName:(NSString *)fontName

fontColor:(UIColor *)fontColor

lineSpacing:(CGFloat)lineSpacing

textAlignment:(NSTextAlignment /* center or left or right */)textAlignment

{

//テキストの輪郭パスを取得

UIBezierPath *textPath = [UIBezierPath fromText:text fontSize:fontSize fontName:fontName lineSpacing:lineSpacing textAlignment:textAlignment];

//テキストパスを中心かつ上下反転

CGFloat tx = self.size.width/2 - textPath.bounds.size.width/2;

CGFloat ty = self.size.height/2 + textPath.bounds.size.height/2;

CGAffineTransform affine = CGAffineTransformMake(1, 0, 0, -1, tx, ty);

[textPath applyTransform:affine];

//切り抜き

return [self imageByPunchingPath:textPath punchingColor:fontColor];

}

/**

* 画像からパスを取り除く

* @param punchingPath 切り抜くパス

* @param punchingColor 切り抜いたパスに描画する色

* @return 切り抜き画像

- (UIImage *)imageByPunchingPath:(UIBezierPath *)punchingPath punchingColor:(UIColor *)punchingColor

{

//画像加工開始

UIGraphicsBeginImageContextWithOptions([self size], NO, [self scale]);

//画像初期ポイント設定

[self drawAtPoint:CGPointZero];

//パスを描画

CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetAllowsAntialiasing(context, true);

CGContextSetShouldAntialias(context, true);

//パス除外

CGContextSetBlendMode(context, kCGBlendModeDestinationOut);

[punchingPath fill];

//色付け

if (punchingColor) {

CGContextSetBlendMode(context, kCGBlendModeNormal);

[punchingColor setFill];

[punchingPath fill];

}

//合成画像生成

UIImage *final = UIGraphicsGetImageFromCurrentImageContext();

//画像加工終了

UIGraphicsEndImageContext();

//合成画像返却

return final;

}

@end

UIImageのカテゴリーで機能拡張！
UIImage+Punching.h
UIImage+Punching.m

前の記事

【iOS】テキストの輪郭パスを取得する 2015.01.15
次の記事

【iOS】画像からテキストの輪郭を切り抜く② 2015.01.15

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

【iOS】画像からテキストの輪郭を切り抜く①

【iOS】テキストの輪郭パスを取得する 2015.01.15

【iOS】画像からテキストの輪郭を切り抜く② 2015.01.15