お絵かきiPhoneアプリを作ってみた #3「消しゴム機能の搭載」

お絵かきアプリ作成の第3回は、前回付けた「消す」ボタンを押した時に実際に描いた線を消せるようにしたいと思います。 しくみは、そんなに複雑ではなく、透明を上書きするという事です。

起動時の処理に追加

ボタンを追加するだけなので、「ViewController.m」の記述だけでOKです。

関数呼び出しを記述

まずは、アプリ起動時にボタンが現れるようにしたいので、「viewDidLoad」に書きます。 ベタに書いたんで、少し長くなりましたが、２つ分をさらに関数分解して書くと効率的ですが、とりあえず、わかりやすさ優先という事で。 - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. //初期設定 touchMode = 0;//drawモードで開始する //キャンバス用のUIImageViewを作成 canvas = [[UIImageView alloc]init]; canvas.frame = self.view.bounds; canvas.image = [self getImageNew]; canvas.layer.borderWidth = 4; canvas.layer.borderColor = [[UIColor redColor]CGColor]; [self.view addSubview:canvas]; //機能ボタンの設置 [self makeButton]; }

関数部分の記述

-(void)makeButton{ //設置基準座標 float y = 20.0f; float w = 50.0f; float h = 30.0f; //ボタン作成 UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeRoundedRect]; //フラグ btn1.tag = 1; //[設定]サイズ、座標 btn1.frame = CGRectMake(0,y,w,h); //[設定]表示文字 [btn1 setTitle:@"描く" forState:UIControlStateNormal]; //[設定]文字色 [btn1 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; [btn1 setTitleShadowColor:[UIColor blackColor] forState:UIControlStateNormal]; //[設定]透明度 btn1.alpha = 0.5; //[設定]背景色 btn1.layer.backgroundColor = [[UIColor blackColor] CGColor]; //ボタンを押した時の関数指定 [btn1 addTarget:self action:@selector(clickBtn1:) forControlEvents:UIControlEventTouchUpInside]; //画面に追加 [self.view addSubview:btn1]; //ボタン作成 UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeRoundedRect]; //フラグ btn2.tag = 0; //[設定]サイズ、座標 btn2.frame = CGRectMake(w+4,y,w,h); //[設定]表示文字 [btn2 setTitle:@"消す" forState:UIControlStateNormal]; //[設定]文字色 [btn2 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; [btn2 setTitleShadowColor:[UIColor blackColor] forState:UIControlStateNormal]; //[設定]透明度 btn2.alpha = 0.5; //[設定]背景色 btn2.layer.backgroundColor = [[UIColor blackColor] CGColor]; //ボタンを押した時の関数指定 [btn2 addTarget:self action:@selector(clickBtn2:) forControlEvents:UIControlEventTouchUpInside]; //画面に追加 [self.view addSubview:btn2]; }

各ボタンを押した時に呼び出される関数の追加

上記のコード内にすでに書いている関数を記述します。 //描くボタンを押した時の処理 -(void)clickBtn1:(id)sender{ NSLog(@""Draw); } //消すボタンを押した時の処理 -(void)clickBtn2:(id)sender{ NSLog(@"Erase"); }

実行してみる

ベタですが、文字ボタンが表示されればOKです。 ついでに押した時に、コンソールにデバッグ文字が表示されれば、完璧です。

現段階のソースコード

今回はボタンの設置のみで、ボタンを押しても、描き込みが消せません。 実際に消せるようにするのは次回にしたいと思います。

ViewController.m

#import "ViewController.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. //キャンバス用のUIImageViewを作成 canvas = [[UIImageView alloc]init]; canvas.frame = self.view.bounds; canvas.image = [self getImageNew]; canvas.layer.borderWidth = 4; canvas.layer.borderColor = [[UIColor redColor]CGColor]; [self.view addSubview:canvas]; //機能ボタンの設置 [self makeButton]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } //空白画像の作成 -(UIImage *)getImageNew{ UIImage *img = [[UIImage alloc]init]; UIGraphicsBeginImageContext(CGSizeMake(self.view.frame.size.width, self.view.frame.size.height)); img = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return img; } /** * Touchイベント操作 */ //Touch開始処理 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ //対象のキャンバスを選択 UITouch *touch = [touches anyObject]; canvasTouch = [touch locationInView:canvas]; } //Touch動作 -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{ //描画処理 [self touch2draw:touches]; } //Touch終了 -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{ } //Touchキャンセル - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event{ //NSLog(@"touchCancel"); } /** * 描画処理 */ /** * 描き込み * param @ touches / system-query * param @ mode / [ 0:draw 1:erase ] */ -(void)touch2draw:(NSSet *)touches{ //初期設定 float scale = 1.0f; float penSize = 20.0f; // 現在のタッチ座標をローカル変数currentPointに保持 UITouch *touch = [touches anyObject]; CGPoint currentPoint = [touch locationInView:canvas]; // 描画領域をcanvasの大きさで生成 UIGraphicsBeginImageContext(canvas.image.size); //キャンバス座標 float x = 0; float y = 0; float w = canvas.image.size.width; float h = canvas.image.size.height; // canvasにセットされている画像（UIImage）を描画 [canvas.image drawInRect:CGRectMake(x,y,w,h)]; // 線の角を丸くする CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound); // 線の太さを指定 CGContextSetLineWidth(UIGraphicsGetCurrentContext(), penSize); // 線の色を指定（RGB） CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 1.0, 0.0, 0.0, 1.0); // 線の描画開始座標をセット CGContextMoveToPoint(UIGraphicsGetCurrentContext(), canvasTouch.x*scale, canvasTouch.y*scale); // 線の描画終了座標をセット CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x*scale, currentPoint.y*scale); // 描画の開始～終了座標まで線を引く CGContextStrokePath(UIGraphicsGetCurrentContext()); // 描画領域を画像（UIImage）としてcanvasにセット canvas.image = UIGraphicsGetImageFromCurrentImageContext(); // 描画領域のクリア UIGraphicsEndImageContext(); // 現在のタッチ座標を次の開始座標にセット canvasTouch = currentPoint; } //機能ボタンの設置 -(void)makeButton{ //設置基準座標 float y = 20.0f; float w = 50.0f; float h = 30.0f; //ボタン作成 UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeRoundedRect]; //フラグ btn1.tag = 1; //[設定]サイズ、座標 btn1.frame = CGRectMake(0,y,w,h); //[設定]表示文字 [btn1 setTitle:@"描く" forState:UIControlStateNormal]; //[設定]文字色 [btn1 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; [btn1 setTitleShadowColor:[UIColor blackColor] forState:UIControlStateNormal]; //[設定]透明度 btn1.alpha = 0.5; //[設定]背景色 btn1.layer.backgroundColor = [[UIColor blackColor] CGColor]; //ボタンを押した時の関数指定 [btn1 addTarget:self action:@selector(clickBtn1:) forControlEvents:UIControlEventTouchUpInside]; //画面に追加 [self.view addSubview:btn1]; //ボタン作成 UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeRoundedRect]; //フラグ btn2.tag = 0; //[設定]サイズ、座標 btn2.frame = CGRectMake(w+4,y,w,h); //[設定]表示文字 [btn2 setTitle:@"消す" forState:UIControlStateNormal]; //[設定]文字色 [btn2 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal]; [btn2 setTitleShadowColor:[UIColor blackColor] forState:UIControlStateNormal]; //[設定]透明度 btn2.alpha = 0.5; //[設定]背景色 btn2.layer.backgroundColor = [[UIColor blackColor] CGColor]; //ボタンを押した時の関数指定 [btn2 addTarget:self action:@selector(clickBtn2:) forControlEvents:UIControlEventTouchUpInside]; //画面に追加 [self.view addSubview:btn2]; } //描くボタンを押した時の処理 -(void)clickBtn1:(id)sender{ NSLog(@""Draw); } //消すボタンを押した時の処理 -(void)clickBtn2:(id)sender{ NSLog(@"Erase"); } @end ※間違いを見つけた人は、こっそりお知らせいただくか、コメント欄に記入してください。

• ３０分で簡単機能の構築
• 機能ボタンを設置
• 消しゴム機能の搭載
• データ保存機能