お絵かきアプリ作成の第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
※間違いを見つけた人は、こっそりお知らせいただくか、コメント欄に記入してください。
0 件のコメント:
コメントを投稿