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

2015.01.15
iOS iPad iPhone Objective-C

年中、ルイボスティーを飲み続ける見習いプログラマーの naopon です！

ごくたま〜〜〜に。
テキストの輪郭パスがほしい時ってありませんか？

画像にテキストを合成したり？
画像からテキストの輪郭を切り抜いたり？

Objective-C で何かしら描画をする場合など、よく UIBezierPath を使用するケースがあるので、
今回はこのクラスを機能拡張してみます。

※一部コードに「正規表現のパターンで文字列を分割」で紹介したカテゴリーを使っています

【輪郭パス】

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

@interface UIBezierPath (TextPath)

+ (UIBezierPath *)fromText:(NSString *)text
                  fontSize:(float)fontSize
                  fontName:(NSString *)fontName
               lineSpacing:(CGFloat)lineSpacing
             textAlignment:(NSTextAlignment)textAlignment;

@end

#import <UIKit/UIKit.h>

@interface UIBezierPath (TextPath)

+ (UIBezierPath *)fromText:(NSString *)text

fontSize:(float)fontSize

fontName:(NSString *)fontName

lineSpacing:(CGFloat)lineSpacing

textAlignment:(NSTextAlignment)textAlignment;

@end

#import &quot;UIBezierPath+TextPath.h&quot;
#import &lt;CoreText/CoreText.h&gt;
#import &quot;NSString+SplitPattern.h&quot;

@implementation UIBezierPath (TextPath)


/**
 *  テキストの輪郭パス取得
 *  @param text          テキスト
 *  @param fontSize      フォントサイズ
 *  @param fontName      フォント名
 *  @param lineSpacing   行間
 *  @param textAlignment Left or Center or Right
 *  @return テキストの輪郭パス
 */
+ (UIBezierPath *)fromText:(NSString *)text
                  fontSize:(float)fontSize
                  fontName:(NSString *)fontName
               lineSpacing:(CGFloat)lineSpacing
             textAlignment:(NSTextAlignment)textAlignment
{
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointZero];
    @autoreleasepool
    {
        //改行で分割して行毎の文字列でループ
        NSArray *textAry = [[[text splitNewLine] reverseObjectEnumerator] allObjects];
        
        //最大幅
        CGFloat maxWidth = 0.f;
        for (int i=0; i&lt;textAry.count; i++)
        {
            @autoreleasepool
            {
                //装飾文字列
                CTFontRef font = CTFontCreateWithName((CFStringRef)fontName, fontSize, NULL);
                NSDictionary *attrs = [NSDictionary dictionaryWithObjectsAndKeys:(__bridge id)font, kCTFontAttributeName, nil];
                NSAttributedString *attrString = [[NSAttributedString alloc] initWithString:textAry[i] attributes:attrs];
                
                //文字列の行(Line)情報取得
                CTLineRef line = CTLineCreateWithAttributedString((CFAttributedStringRef)attrString);
                
                //文字列の行(Line)の幅
                CGRect rect = CTLineGetBoundsWithOptions(line, kCTLineBoundsUseGlyphPathBounds);
                CGFloat width = CGRectGetWidth(rect);
                
                //最大幅を保持
                if (maxWidth &lt; width)
                {
                    maxWidth = width;
                }
                
                //メモリ解放
                CFRelease(line);
                CFRelease(font);
            }
        }
        
        for (int i=0; i&lt;textAry.count; i++)
        {
            @autoreleasepool
            {
                //行(Line)パス保持用
                CGMutablePathRef letters = CGPathCreateMutable();
                
                //装飾文字列
                CTFontRef font = CTFontCreateWithName((CFStringRef)fontName, fontSize, NULL);
                NSDictionary *attrs = [NSDictionary dictionaryWithObjectsAndKeys:(__bridge id)font, kCTFontAttributeName, nil];
                NSAttributedString *attrString = [[NSAttributedString alloc] initWithString:textAry[i] attributes:attrs];
                
                //文字列の行(Line)情報取得
                CTLineRef line = CTLineCreateWithAttributedString((CFAttributedStringRef)attrString);
                
                //文字列の行(Line)の幅
                CGRect rect = CTLineGetBoundsWithOptions(line, kCTLineBoundsUseGlyphPathBounds);
                CGFloat width = CGRectGetWidth(rect);
                
                //マージン計算
                CGFloat margin = 0.f;
                switch (textAlignment)
                {
                    case NSTextAlignmentCenter:
                        margin = (maxWidth - width)/2.;
                        break;
                    case NSTextAlignmentRight:
                        margin = maxWidth - width;
                        break;
                    default:
                        break;
                }
                
                //行(Line)情報から一文字毎の情報(RUN)を取得してループ
                CFArrayRef runArray = CTLineGetGlyphRuns(line);
                for (CFIndex runIndex = 0; runIndex &lt; CFArrayGetCount(runArray); runIndex++)
                {
                    @autoreleasepool
                    {
                        //一文字の情報(RUN)を取得
                        CTRunRef run = (CTRunRef)CFArrayGetValueAtIndex(runArray, runIndex);
                        CTFontRef runFont = CFDictionaryGetValue(CTRunGetAttributes(run), kCTFontAttributeName);
                        
                        //RUNのGLYPH毎にループ
                        for (CFIndex runGlyphIndex = 0; runGlyphIndex &lt; CTRunGetGlyphCount(run); runGlyphIndex++)
                        {
                            @autoreleasepool
                            {
                                //GLYPH情報取得
                                CFRange thisGlyphRange = CFRangeMake(runGlyphIndex, 1);
                                CGGlyph glyph;
                                CGPoint position;
                                CTRunGetGlyphs(run, thisGlyphRange, &amp;glyph);
                                CTRunGetPositions(run, thisGlyphRange, &amp;position);
                                
                                //輪郭(outline)のパスを保持していく
                                {
                                    CGPathRef letter = CTFontCreatePathForGlyph(runFont, glyph, NULL);
                                    CGFloat px = position.x + margin;
                                    CGFloat py = position.y + path.bounds.size.height + ((i==0)?0:lineSpacing);
                                    CGAffineTransform t = CGAffineTransformMakeTranslation(px, py);
                                    CGPathAddPath(letters, &amp;t, letter);
                                    CGPathRelease(letter);
                                }
                            }
                        }
                    }
                }
                CFRelease(line);
                
                //一行分のパスを格納
                [path appendPath:[UIBezierPath bezierPathWithCGPath:letters]];
                
                CGPathRelease(letters);
                CFRelease(font);
            }
        }
    }
    return path;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

#import "UIBezierPath+TextPath.h"

#import <CoreText/CoreText.h>

#import "NSString+SplitPattern.h"

@implementation UIBezierPath (TextPath)

/**

* テキストの輪郭パス取得

* @param text テキスト

* @param fontSize フォントサイズ

* @param fontName フォント名

* @param lineSpacing 行間

* @param textAlignment Left or Center or Right

* @return テキストの輪郭パス

+ (UIBezierPath *)fromText:(NSString *)text

fontSize:(float)fontSize

fontName:(NSString *)fontName

lineSpacing:(CGFloat)lineSpacing

textAlignment:(NSTextAlignment)textAlignment

{

UIBezierPath *path = [UIBezierPath bezierPath];

[path moveToPoint:CGPointZero];

@autoreleasepool

{

//改行で分割して行毎の文字列でループ

NSArray *textAry = [[[text splitNewLine] reverseObjectEnumerator] allObjects];

//最大幅

CGFloat maxWidth = 0.f;

for (int i=0; i<textAry.count; i++)

{

@autoreleasepool

{

//装飾文字列

CTFontRef font = CTFontCreateWithName((CFStringRef)fontName, fontSize, NULL);

NSDictionary *attrs = [NSDictionary dictionaryWithObjectsAndKeys:(__bridge id)font, kCTFontAttributeName, nil];

NSAttributedString *attrString = [[NSAttributedString alloc] initWithString:textAry[i] attributes:attrs];

//文字列の行(Line)情報取得

CTLineRef line = CTLineCreateWithAttributedString((CFAttributedStringRef)attrString);

//文字列の行(Line)の幅

CGRect rect = CTLineGetBoundsWithOptions(line, kCTLineBoundsUseGlyphPathBounds);

CGFloat width = CGRectGetWidth(rect);

//最大幅を保持

if (maxWidth < width)

{

maxWidth = width;

}

//メモリ解放

CFRelease(line);

CFRelease(font);

}

for (int i=0; i<textAry.count; i++)

{

@autoreleasepool

{

//行(Line)パス保持用

CGMutablePathRef letters = CGPathCreateMutable();

//装飾文字列

CTFontRef font = CTFontCreateWithName((CFStringRef)fontName, fontSize, NULL);

NSDictionary *attrs = [NSDictionary dictionaryWithObjectsAndKeys:(__bridge id)font, kCTFontAttributeName, nil];

NSAttributedString *attrString = [[NSAttributedString alloc] initWithString:textAry[i] attributes:attrs];

//文字列の行(Line)情報取得

CTLineRef line = CTLineCreateWithAttributedString((CFAttributedStringRef)attrString);

//文字列の行(Line)の幅

CGRect rect = CTLineGetBoundsWithOptions(line, kCTLineBoundsUseGlyphPathBounds);

CGFloat width = CGRectGetWidth(rect);

//マージン計算

CGFloat margin = 0.f;

switch (textAlignment)

{

case NSTextAlignmentCenter:

margin = (maxWidth - width)/2.;

break;

case NSTextAlignmentRight:

margin = maxWidth - width;

break;

default:

break;

}

//行(Line)情報から一文字毎の情報(RUN)を取得してループ

CFArrayRef runArray = CTLineGetGlyphRuns(line);

for (CFIndex runIndex = 0; runIndex < CFArrayGetCount(runArray); runIndex++)

{

@autoreleasepool

{

//一文字の情報(RUN)を取得

CTRunRef run = (CTRunRef)CFArrayGetValueAtIndex(runArray, runIndex);

CTFontRef runFont = CFDictionaryGetValue(CTRunGetAttributes(run), kCTFontAttributeName);

//RUNのGLYPH毎にループ

for (CFIndex runGlyphIndex = 0; runGlyphIndex < CTRunGetGlyphCount(run); runGlyphIndex++)

{

@autoreleasepool

{

//GLYPH情報取得

CFRange thisGlyphRange = CFRangeMake(runGlyphIndex, 1);

CGGlyph glyph;

CGPoint position;

CTRunGetGlyphs(run, thisGlyphRange, &glyph);

CTRunGetPositions(run, thisGlyphRange, &position);

//輪郭(outline)のパスを保持していく

{

CGPathRef letter = CTFontCreatePathForGlyph(runFont, glyph, NULL);

CGFloat px = position.x + margin;

CGFloat py = position.y + path.bounds.size.height + ((i==0)?0:lineSpacing);

CGAffineTransform t = CGAffineTransformMakeTranslation(px, py);

CGPathAddPath(letters, &t, letter);

CGPathRelease(letter);

}

CFRelease(line);

//一行分のパスを格納

[path appendPath:[UIBezierPath bezierPathWithCGPath:letters]];

CGPathRelease(letters);

CFRelease(font);

}

return path;

}

これもカテゴリーにして機能拡張しちゃえば超便利でいいですね！
UIBezierPath+TextPath.h
UIBezierPath+TextPath.m

これでテキストの輪郭パスが手に入りました。
次回は、このカテゴリーを使って、実際に画像からテキストを切り抜いてみます！

先人たちは素晴らしいですね。
いつもありがとうございます！

参考 : iOS UIBezierPath that follows the shape of a font

前の記事

【iOS】正規表現のパターンで文字列を分割 2015.01.15
次の記事

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

2024年4月
日	月	火	水	木	金	土
	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