お絵かきiPhoneアプリを作ってみた #3「消しゴム機能の搭載」
お絵かきPhoneアプリを作ってみた #1「３０分で簡単機能の構築」
お絵かきPhoneアプリを作ってみた #2「機能ボタンを設置」
お絵かきアプリ作成の第3回は、前回付けた「消す」ボタンを押した時に実際に描いた線を消せるようにしたいと思います。
しくみは、そんなに複雑ではなく、透明を上書きするという事です。
起動時の処理に追加
ボタンを追加するだけなので、「ViewController.m」の記述だけでOKです。
関数呼び出しを記述
まずは、アプリ起動時にボタンが現れるようにしたいので、「viewDidLoad」に書きます。
ベタに書いたんで、少し長くなりましたが、２つ分をさらに関数分解して書くと効率的ですが、とりあえず、わかりやすさ優先という事で。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
- (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]; } |
関数部分の記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
-(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]; } |
各ボタンを押した時に呼び出される関数の追加
上記のコード内にすでに書いている関数を記述します。
|
1 2 3 4 5 6 7 8 |
//描くボタンを押した時の処理 -(void)clickBtn1:(id)sender{ NSLog(@""Draw); } //消すボタンを押した時の処理 -(void)clickBtn2:(id)sender{ NSLog(@"Erase"); } |
実行してみる
どうでしょう？
ベタですが、文字ボタンが表示されればOKです。
ついでに押した時に、コンソールにデバッグ文字が表示されれば、完璧です。
現段階のソースコード
今回はボタンの設置のみで、ボタンを押しても、描き込みが消せません。
実際に消せるようにするのは次回にしたいと思います。
ViewController.m
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 |
#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 |
※間違いを見つけた人は、こっそりお知らせいただくか、コメント欄に記入してください。