初心者から始めるスタンプカメラの作り方（5/6）

前回に引き続き、スタンプカメラの制作の方を行っていきたいと思います。

今回、画面上を指でドラッグ＆ドロップすると好きなお絵かきができるような、

そういう機能を実装していきたいと思います。

まず最初にすべきことは新たなファイル、新たなクラスを作ることです。

画面左のナビゲーターエリアでctrlを押しながら、

もしくは右クリックを押してNew Fileを選択します。

そしてCocoa Touch Classを選択します。

Subclass ofはUIViewを選択しまして、

ClassはDrawViewという名前のクラスを作ってください。

LanguageはSwiftを選択します。

NextをクリックしてCreateします。

このように、新たにDrawView.swiftというクラスができました。

その中にDrawViewというクラスの記述があります。

まずこのDrawViewの中に必要な記述を行っていきたいと思います。

このDrawViewというのは描画処理をこの中で行っていくっていう、そういうクラスになります。

まず2つの変数を宣言します。

pointsという変数、これはCGPoint型が入った配列です。

描画する時に各ポイントを結んで直線を引いていくという描き方をするんですけど、

その各ポイントを格納するための配列になります。

もう一つの変数はUIColor型のcolorという変数になります。

これは初期値としてredColorを入れておきます、赤を入れておきます。

これは描画する時の色になります。

その下、最初から入っているメソッドがコメントアウトされています。

このコメントアウトを外しましょう。

これはdrawRectというメソッドなんですけど、

どういうメソッドかと言いますと、実際の描画処理が行われるメソッドなんです。

ここをコメント外してしまうと、UIViewの例えば背景色とかそのような描画は、

全てこれに上書きされてしまってここに書いていないような全てになりますので、

普段は外さないんですけど今回はちょっと特殊な描画処理、

直線描画処理などを行いますので、このコメントアウトは外して、

ここに普通の処理を書いていきたいと思います。

ではこの中に、次のようなものを書いていきましょう。

この今書いた要素を上から順番に説明していきます。

まず先ほども説明しましたけどこのpointsという配列には曲線を描く時、

各ポイントが入っている配列になります。

このカーブ数が2より小さい場合、

0と1の場合には2点を結んでも直線になりませんので、

この場合はreturnをしてここでこのメソッドを止めてしまうということにします。

そして次。

この描画処理、直線などの描画処理を行う時はcontextというものを使うんです。

contextというものを使って描画処理を行っていきます。

まずそのリファレンスが必要になります。

UIGraphicsGetCurrentContextというのを使って

CGContextのリファレンスを取ってくることになります。

これを使って描画処理を行っていきます。

まずCGContextSetStrokeColorWithColorで描画する時の直線を描く時の色を決めます。

contextを使って、色の方はcolor.CGColorで取っています。

colorというのは先ほど先頭で宣言した変数です。

で、このままだとUIColorの型なんですけど、

描画処理を行う時はCGColorに変換しないといけませんので、

CGColorにこのように変換しております。

次、CGContextSetLineWidthです。

これは線の幅を決めます。

contextを指定して幅を10.0に設定しています。

次、CGContextSetLineCapです。

これは今回曲線を直線の集合体として描くんですけど、

各直線が角が四角いものだと、角張ったままですと綺麗な直線になりませんので、

各曲線を構成する各直線の角を丸くしてやる処理になります。

contextを使ってkCGLineCapRoundを指定してやることによって、

曲線を構成する各直線の角が丸になります。

次です。CGContextMoveToPointです。

これは直線を描く時の始点となる位置です。

contextを指定してpointsの中に最初の点のx座標、最初の点のy座標を指定してあります。

この点から描画を始めますという意味になります。

次、for文を使っています。

ループ処理を行っております。

iが1から始まって、0じゃなくて1から始まって

pointsのcountに達するまでiの値を1つずつ増加させてあります。

そうすることによって各ポイント、各点を取得することができるわけです。

pointsから取得することができます。

で、CGContextAddLineToPointで

前回の点から新たな位置まで直線を引くことができるわけです。

直線を引いた後はCGContextMoveToPointで今の点に始点を移動してやります。

これを繰り返すことで少しずつpointsの中に入っている点の間に

一回ずつ線を引くことができるわけなんです。

ループするごとに一回ずつ線を引くことができて、

それの集合体として曲線ができることになります。

そして最後にCGContextStrokePathの命令によって

実際に線が描画されるようになるわけです。

以上でDrawViewクラスの記述はおしまいになります。

次、ViewController.swiftの中に記述を行っていきましょう。

まず先頭にいくつか変数の追加を行わなければなりません。

追加すべき変数はいくつかあります。

まずdrawViewという変数です。

これはDrawViewの型を持っています。

先ほど新しくクラスを書きましたけど、そのDrawViewを型として宣言しています。

小文字で始まるdrawViewという名前の変数です。

初期値として何かを入れないといけませんので、

DrawViewを初期化してとりあえず入れておきたいと思います。

次、colorNumという変数です。

Int型を持っています。

初期値として0を与えておきます。

次、colorArrayという定数です。

UIColor型が入る配列になります。3つの要素を入れておきます。

UIColor.redcolor、赤ですね、UIColor.bluecolor、青、UIColor.yellowcolor、黄色です。

このように赤と青と黄色を配列として入れておくということになります。

それでは次、画面の方にボタンを一つ追加します。

Main.storyboardに移動します。

この画面にボタンを一つ追加していきます。

右下のライブラリペインからButtonを選択して

ドラッグ＆ドロップして、このViewと兄弟関係に、

先ほどのToolbarやcanvasViewと兄弟関係にあるようにボタンを配置していきましょう。

この位置だと下に隠れて見えませんので、この位置に持ってきましょうか。

ボタンが配置されます。

で、x座標・y座標を指定します。

20の25くらいですか、配置してButtonという表記を●に変えます。

黒い丸に変えます。

Text colorを赤にしておきます。

サイズをちょっと大きくしておきます。

40くらいにしておきます。

こんな感じでOKでしょう。

これはボタンですので、このボタンをタップする度に色が変わる、

描画する時に色が変わるというようにしていきたいと思います。

ではこのボタンを押した時の処理をこの後書いていきたいと思います。

ViewController.swiftです。

このViewControllerクラスの一番下のところに記述を追加しましょう。

このような記述を追加していきます。

colorButtonTappedというメソッドを追加していきます。

この中の解説をしていきます。

まずcolorNum、先頭で宣言したcolorNumという変数を一つ増やします。

一つ増やすには++と言う記述です。

次、このcolorNumがcolorArrayのcount以上であったらcolorNumを0にします。

なのでcolorNumの場合、この場合colorArrayの要素が3つですから、

0,1,2,0,1,2,0,1,2という値を繰り返すことになります。

次、sender.setTitleColorです。

これによってそのボタンの中の文字の色が変わることになります。

colorArrayの中のcolorNum番目の要素をtitleの文字色として指定します。

forState: UIControlState.Normal、

これは必要ない記述ですね。

通常の状態での色をこの色に設定するということになります。

このcolorButtonTappedは

ストーリーボードの方でこのボタンと紐づけておきましょう。

View controllerを選択して、

ここにあるcolorButtonTappedというメソッドをこのボタンと紐づけていって、

Touch Up Insideで紐づけます。

これでこのボタンをタップすると先ほど記述した

colorButtonTappedというメソッドが呼ばれることになります。

次行きます。

次に、画面上をドラッグ＆ドロップした時に呼ばれる処理を書いていきたいと思います。

画面を撫でた時に呼ばれる処理です。

この下に追加していきます。

最初からある画面を撫でた時、

ドラッグ＆ドロップした時に呼ばれるメソッドをいくつか書いていきます。

まずtouchesBegan、これは画面上に触り始めた時に呼ばれるメソッドになります。

この中にこのような記述をしていきます。

先ほどdrawViewという変数を先頭で宣言しました。

これを再びdrawViewクラスを使って初期化します。

次、drawViewのフレームを指定していきます。

これはcanvasViewと同じサイズにしますので、canvasView.frameという記述にします。

次、drawViewの背景色を指定します。

背景色はとりあえず透明にしておきます。

UIColor.clearColorにしておきます。

次、drawViewのcolorです。

colorというのは先ほどdrawViewの先頭で持たせたここのプロパティになります。

このプロパティをcolorArrayの中に、colorNumに指定してやります。

colorNum番目の要素に指定してあります。

そしてcanvasViewにこのdrawViewを追加してやります。

そしてlet touchって書いてありますけど、touches、

二本指で触ったかも三本指で触ったかもしれませんので、最初の要素だけ取り出します。

一本指の要素だけ取り出して、そしてUITouch型にキャストしてやります。

UITouch型を持っているtouchという定数ができます。

そのtouchから指の位置を取り出してやります。

self.viewの中でのどの位置にあるかっていうのをCGPoint型のpointで取り出してやります。

そしてこのdrawViewのpoints、pointsという配列を

drawViewも持っていますけど、それにこのpointを加えてやります。

CGPoint型の入る配列、pointsをdrawViewは持っていますので、

それに新たな要素を加えてやるということになります。

そしてtouchesMovedというメソッドです。

この中ではまずlet touchで

touches.first as! UITouch、これは先ほどと同じです。

まず触っている一本の指のタッチを取り出してやります。

触っている情報を取り出してやります。

そしてlocationInViewで触っている指の位置を取り出してやります。

そして先ほどと同じく、

drawViewの持っているpointsという配列にこのポイントを加えてやります。

最後にdrawView.setNeedsDisplayで、

先ほどのDrawViewの中にある

このdrawRectが再び呼ばれることになります。

drawRectはviewを生成した時に最初に一回呼ばれるんですけど、

それ以降に呼び出すためには

毎回このsetNeedsDisplayを呼び出してやらないといけないんです。

ここまで書けました。

あとは実行してみて動作を確認してみましょう。

iPhone5sのシミュレーターを選択して実行してみます。

少々お待ちください。

シミュレーターが起動しました。

ライブラリから適当な写真を選択します。

そして、色が赤、青、黄色と変わりますね。

青を選択しまして画面上を撫でてやると、このように描画できるわけです。

黄色い描画もできますし、赤い描画もできるようになりました。

今回は以上になります。

描画はみなさんできましたでしょうか。

次回以降、この画面上に描いたスタンプや線なども含めた写真を

ライブラリに保存するということをやっていきたいと思います。

以上です。

Tekuruプログラミングスクールでは、

動画だけでは伝わりきらない、アプリ開発の楽しさや、

気軽に質問できる雰囲気で、プログラミングを学ぶことができます。

もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。