お絵かきiPhoneアプリを作ってみた #2「機能ボタンを設置」

お絵かきアプリ作成の第2回は、画面内に機能ボタンを設置したいと思います。 とりあえず、「消しゴム」機能をつけたいので、 「消す」ボタンと「描く」ボタンを付けて、描き消しができる状態にしたいと思います。

ボタンの設置

ボタンを追加するだけなので、「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 ※間違いを見つけた人は、こっそりお知らせいただくか、コメント欄に記入してください。

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