iPhoneアプリ開発芳名帳アプリ作成(3)　－名前を書けるようにする－

公開日： 2013/06/09 : iPhone, IT

　今までの流れ

　画面構成

今回の芳名帳アプリは以下の画面で構成しています。

メイン画面(MainViewController)
設定画面(SettingViewController)
記帳画面(GuestBookViewController)

　記帳画面で名前を書く

利用するのは前回追加した以下の3つのメソッドです。

 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
 }
 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
 }
 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
 }

　線を書く

利用するメソッドは以下の時に呼ばれます。

touchesBegan：画面にタッチした時
touchesMoved：画面にタッチした状態で指が移動している間
touchesEnded：画面から指が離れた時

以下の様な方法で、上記の各メソッドが呼ばれた時のタッチ位置が取得出来ます。

 UITouch *touch      = [touches anyObject];
 CGPoint *touchPoint = [touch locationInView:self.view];

[1] タッチした場所を保存

 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    touchPoint     = [touch locationInView:self.nameSpace];
 }

UIImageViewであるnameSpaceに線を書くためlocationInViewの対象はself.nameSpaceにしています。

[2]　移動時に移動分の線を書く

 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch       = [touches anyObject];
    CGPoint currentPoint = [touch locationInView:self.nameSpace];
    [self draw:touchPoint endPoint:currentPoint];
    touchPoint = currentPoint;
 }

最初にタッチした場所と移動時の場所を利用して線を書きます。

線を書くのは以下の様な感じで書けます。

 - (void)draw:(CGPoint)startPoint endPoint:(CGPoint)endPoint {
	CGRect rect = CGRectMake(0,
                             0,
                             self.nameSpace.frame.size.width,
                             self.nameSpace.frame.size.height);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    //今までの画像を描画
    [self.nameSpace.image drawInRect:rect];
    //線の形
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextDrawPath(context, kCGPathFillStroke);
    //線の色
    CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
    //線の太さ
    CGContextSetLineWidth(context, 5.0f);
    CGContextMoveToPoint(context, startPoint.x, startPoint.y);
    CGContextAddLineToPoint(context, endPoint.x, endPoint.y);
    CGContextStrokePath(context);
    //画像化
    UIImage *line = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    self.nameSpace.contentMode = UIViewContentModeScaleAspectFill;
    self.nameSpace.image       = line;
    UIGraphicsEndImageContext();
 }

線を書いて画像化して、UIImageViewに置きます。
これにより瞬間の線を書けますが、その都度画像化しているだけでは、今までの履歴がありません。
そこで、最初にdrawInRectで今までの画像を表示することにより、線になります。
これで。名前を書くことが出来るようになりました。

　枠線を表示させる

今のままだと書ける範囲がわかりません。
そこで枠線を表示させます。

以下をimportします。

#import "QuartzCore/CALayer.h"

次に、最初に以下を設定することで枠線を表示させることができます。

    CALayer *layer = [self.nameSpace layer];
    [layer setMasksToBounds:YES];
    [layer setBorderWidth: 3.0f];
    [layer setBorderColor:[ [UIColor blackColor] CGColor] ];