プロジェクションマッピング

エンターテインメントから工業利用まで、プロジェクションマッピングの活用・運用をお考えの方へ

more

インタラクティブ&サイネージ

情報表示用のデジタルサイネージから、センサーを利用したインタラクティブ要素などをお考えの方へ

more

VR/360MOVIE

VRHMD用コンテンツからプラットフォームを利用した360度ムービーを活用したPRをお考えの方へ

more
CONTACT 052-253-9866

はじめてのカメラアプリ vol.12 スタンプ編 テキストを入力して画像の上に配置

2013.12.15 日曜日 09:58:05

HIGA62_notepen500_02

画像の上のオブジェクトも、ある程度コントロール出来るようになってきましたので、
今回は自分でテキスト入力をしたものを、画像の上に設置させるための方法について調べました。

落書き – 写真に文字を書き込む
こちらのサイトに、非常にわかりやすいサンプルが掲載されていましたので、これを元に組んでいきました。

QuartzCore.frameworkをインポート

QuartzCore.frameworkをフレームワークに追加し、
ViewController.mにインポートします。


#import <QuartzCore/QuartzCore.h>

@interfaceにUILabelを記述

#inportの後に、以下を記述します。

@interface OutLineLabel : UILabel
@end
@implementation OutLineLabel
- (void)drawTextInRect:(CGRect)rect
{
    CGSize shadowOffset = self.shadowOffset;
    UIColor *textColor = self.textColor;
    
    CGContextRef c = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(c, 4);
    CGContextSetLineJoin(c, kCGLineJoinRound);
    
    CGContextSetTextDrawingMode(c, kCGTextStroke);
    self.textColor = [UIColor whiteColor];
    [super drawTextInRect:rect];
    
    CGContextSetTextDrawingMode(c, kCGTextFill);
    self.textColor = textColor;
    self.shadowOffset = CGSizeMake(0, 0);
    [super drawTextInRect:rect];
    
    self.shadowOffset = shadowOffset;
}
@end

ViewController側の@interface記述

@interface ViewControllerには以下を参考に記述を行います。

@interface ViewController () <UINavigationControllerDelegate, UIImagePickerControllerDelegate, UITextFieldDelegate>

//テキスト入力用ラベル
@property (nonatomic, strong) UILabel *targetLabel;
//テキストフィールド表示ボタン用
- (IBAction)panelSetBtn:(id)sender;
@property (nonatomic, weak)  IBOutlet UIView *panel;
@property (nonatomic, weak)  IBOutlet UITextField *field;

@end

@implementation ViewController
//テキスト入力用ラベルsynthesize
@synthesize targetLabel;

テキスト入力ラベルを生成

ラベル生成部分です。UIPanGestureRecognizerで、パン操作に対応させます。

 //テキスト入力機能
- (void)viewDidAppear:(BOOL)animated{

    // アウトライン付きのラベルを生成
    self.targetLabel = [[OutLineLabel alloc] init];
    self.targetLabel.backgroundColor = [UIColor clearColor];
    self.targetLabel.font = [UIFont boldSystemFontOfSize:30];
    self.targetLabel.center = self.view.center;
    [self.view addSubview:self.targetLabel];
    
    // パン操作で移動できるようにする
    self.targetLabel.userInteractionEnabled = YES;
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(moveText:)];
    [self.targetLabel addGestureRecognizer:pan];
}

- (void)moveText:(UIPanGestureRecognizer*)pgr{
    // パンで位置を操作
    pgr.view.center = [pgr locationInView:self.view];
}

テキスト入力機能の記述

テキストフィールド設定部分です。

- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string{
    // テキストを編集
    self.targetLabel.text = textField.text;
    [self.targetLabel sizeToFit];
    return YES;
}

- (BOOL)textFieldShouldReturn:(UITextField *)textField{
    // キーボードのReturnで終了
    self.targetLabel.text = textField.text;
    [self.targetLabel sizeToFit];
    
    [textField resignFirstResponder];
    
    // 終了時に入力欄を消す
    [_panel removeFromSuperview];
    [_field removeFromSuperview];
    
    return NO;
}

テキストフィールド表示ボタンの設定

今回は、ボタンを押すとテキストフィールドが表示されるようにしましたので
ここでボタン操作のイベントを設定します。

- (IBAction)panelSetBtn:(id)sender {
    // 入力欄の生成
    //[self createControlPanel];
    if([_panel isDescendantOfView:self.view]){
        [_panel removeFromSuperview];
        [_field removeFromSuperview];
    }else{
        // 入力フィールドの背景
        UIView *panel = [[UIView alloc] initWithFrame:CGRectMake(0, 20, 320, 50)];
        panel.backgroundColor = [UIColor darkGrayColor];
        _panel = panel;
        [self.view addSubview:_panel];
    
        // 入力フィールド
        UITextField *field = [[UITextField alloc] initWithFrame:CGRectMake(10, 10, 300, 30)];
        field.borderStyle = UITextBorderStyleRoundedRect;
        field.delegate = self;
        _field = field;
        [_panel addSubview:_field];
     }
    
}

保存ボタン

フォトライブラリに保存する部分です。


- (IBAction)pressSaveBtn:(id)sender {  
    
    // フォトライブラリに保存する。
    UIGraphicsBeginImageContext(self.imageView.frame.size);
    [self.view.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
    UIImageWriteToSavedPhotosAlbum(viewImage, nil, nil, NULL);
    UIGraphicsEndImageContext();
}

これで写真に文字入力も出来るようになりました!
少しカメラアプリらしい機能が揃ってきた気がします。
まだまだ欲しい機能は沢山ありますが。。。

今回のサンプルはこちらのサイトを参考にしました。ありがとうございました。
落書き – 写真に文字を書き込む

Category:Development , Project , Xcode , はじめてのカメラアプリ     Tag:
Authorブログの著者について
田中 義弘

田中 義弘

イベントプロダクション・グラフィックデザイナーを経て、2010年3月に株式会社アイデアクラウドを設立。近年、WEBから得た技術をベースに、プロジェクションマッピング事業をはじめとした先端事業をスタート。

Our Business
最近の記事
人気記事
Our Project