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

続きを行います。

スタンプに様々な機能を追加していくということを行っていきます。

 

それでは左側のナビゲーターエリアから、Stamp.swiftを選択しましょう。

このStampクラスはUIImageViewを継承しています。

この中にコメントで囲まれた部分がありますけどこれは削除してしまって大丈夫です。

まずドラッグ＆ドロップでスタンプを動かせる機能を実装していきましょう。

そのために必要なメソッドは2つあります。

touchesBeganとtouchesMovedです。

 

まずはtouchesBeganというメソッド、このメソッドの中では選択したスタンプが

画面の一番手前に来るように設定しています。

touchesBeganの中にself.superview。self.superviewというのはcanvasViewのことです。

それをbringSubviewToFrontで画面の一番手前に持って行くということを行っています。

次、touchesMovedです。これは画面上で、

スタンプ上で指が動いた時に呼び出されるメソッドです。

この中でまず画面上をタッチしたという情報、touchを取ってきます。

いわゆるtouchの型を持ったtouchを取ってきます。

そしてこのdx,dyで指が動いた距離を算出してやります。

 

どうやって算出するかといいますと、今の指の位置、

touch.locationInView(self.superview).xから

寸前の指の位置、touch.previouslocationInView(self.superview).x

を引いてあります。

こうすることによって、直前にtouchesMovedが呼ばれた際の指の位置から

現在の指の位置の差を出すことができます。

dyも同様です、y方向で指が動いた距離というのを出してあります。

そして現在の座標、self.center.x、self.center.yにそれぞれ

dx、dyを足してやることにより指が動いた距離だけこのスタンプが動くことになります。

ここまで書けたのであれば実行してみて、

スタンプがドラッグ＆ドロップできることを確認してみましょう。

 

みなさんなるべく実機の方で試してみてくださいね。

シミュレーターでも動きますけど、実機の方がアプリの実際に動く感覚と近いかなと思います。

スタンプを選択します。

ドラッグ＆ドロップでスタンプが動くようになりました。

 

では次、このスタンプが二本指で拡大及び縮小、回転ができるようにしていきたいと思います。

そのために必要なコードをこのStampクラスの中に追加していきます。

少々お待ちください。

まず必要な変数をこの中で宣言していきましょう。

失礼、必要なところだけやっぱり貼り付けます。

 

この4つの変数を宣言してください。

まずCGAffineTransform型のcurrentTransform。

この中に現在のスタンプの変形状況というのを入れてやります。

このTransformというプロパティで拡大したり縮小したり

回転させたりの変形情報を格納することができます。

 

次、scaleです。これは拡大率になります。

angleは傾きになります。

isMovingはスタンプが動いているかどうかを格納するBool値です。

初期状態としてfalseを入れてあります。

この4つの変数を使います。

 

そして今回プロトコルというものを使います。

プロトコルを使うことで今回変形、拡大と縮小を同時に行いますけど、その二つが同時に行えるようにします。

UIGestureRecognizerDelegateです、これを導入してやります。

このようになりました。

 

そしてプロトコルの中にあるdelegateメソッドを記述してやります。

gestureRecognizer、

shouldRecognizeSimultaneouslyWithGestureRecognizerです。

これを書いてやって、return trueしてやることによって、

拡大/縮小などの複数の操作を二本指で行うことが可能になります。

これちょっと長いですけど、最初の何文字かだけ入れればあとは

自動補完で候補が出てきますので今回使うこれを選んでみてください。

 

では続きます。初期設定が必要です。

このdidMoveToSuperviewというメソッドを書いてみましょう。

そしてその中身を書いてみましょう。

このdidMoveToSuperviewなんですけど、

スタンプが画面上に追加された直後に呼び出されるメソッドになります。

この中でこのスタンプを動かすために必要な、拡大/縮小/回転するために必要な初期設定を行っていきたいと思います。

 

まずrotationRecognizerです。

UIRotationGestureRecognizerの型を持っています。

そのrotationRecognizerをここで初期化していますね。

UIRotationGestureRecognizerクラスを使って初期化しています。

その初期化時に二つの初期値を入れてあります。

targetはselfでactionは"rotationGesture:"です。

self-このクラスの中に回転を検知した時に呼ばれるメソッドを

実装するっていうことをここに明記してあります。

 

次、actionです。

rotationGestureっていうメソッドを回転が検出された時に呼んでやります。

そしてrotationRecognizer.delegate = self。

これは先ほどのdelegateメソッドを呼ぶために必要です。

そしてself.addGestureRecognizer(rotationRecognizer)で

StampクラスにGestureRecognizerが追加されることになります。

 

pinchRecognizerに関しても同様です。

UIPinchGestureRecognizerの型を持った

pinchRecognizerというものを宣言しておきます。

このUIPinchGestureRecognizerを使うことによって、

画面上でのピンチイン/ピンチアウト-二本指を広げたり縮めたりの動作を検出すること-が可能になります。

拡大/縮小、二本指の離したり近づけたりがあるとこのPinchGestureというメソッドが呼ばれることになります。

同じようにdelegateを設定して、このスタンプに

addGestureRecognizerを使って

GestureRecognizerの追加を行います。

このrotationGestureとpinchGesture、

二つのメソッドがそれぞれ呼ばれることになるんですけど、

今からその二つのメソッドを書いていきたいと思います。

少々長くなります。

 

このStampクラスの一番下のところに追加してみましょう。

すみません、余計なのを追加してしまいました。

touchesMovedと

touchedBeganも書きましたね。消してしまいます。

今追加したのが

rotationGestureメソッドと

pinchGestureメソッドです。

 

まずrotationGestureメソッドの方から見ていきましょう。

一応この回転が検出されたらコメントで

println("Rotation detected!")と表示するようにしています。

そしてif文を使って回転を開始した時・終了した時の処理を書いています。

isMovingフラグがオンであり、このgestureの状態が

UIGestureRecognizerState.Bsganである場合はこの処理を行ってください。

isMovingフラグをtrueにしてcurrentTransform、現在の変形状態を、

correntTransform構文の中に現在の変形状態、

self.transformを入れてくださいっていう処理を行っています。

そしてisMovingフラグがオンであり、gestureの状態が既に終了した場合、

二本指のローテーションが終了した場合は

isMovingフラグをfalseにしてscaleを1.0、angleを0.0にしてくださいっていう処理を行っています。

そしてangleの値にgestureで検出されたrotationの値を入れています。

 

そしてtransformという変数を宣言しまして、

その中にCGAffineTransformConcatというものを使って二つ以上の変形、

transformを合成した値を入れています。

まず一番外側のConcatでcurrentTransformにこのangle、

回転角度による変形を足してやったもの、

なおかつ、それに対してCGAffineTransformMakeScaleで

scaleを変形してやったものを合成して

transformに入れてやっています。

そしてこのself.transform、現在selfを持っている、

このStampクラスが持っているtransformにこのtransformを入れてやることで

実際にそのスタンプが変形することになります。

 

pinchGestureの方も同様です。

開始時と終了時にそれぞれ変形を行っています。

各パラメーターのセットを行っています。

そしてscaleにはgesture.scale。

gestureの持っているscaleを入れています。

そして変形を行ってありますね。

Concatを使って二つ以上の

transformを合成して新たな変形を作ってあります。

そしてこの、Stampの持っているtransformに

このtransform、二つ以上の変形を合成してできたtransformを入れてやることによって、

このスタンプが変形することになります。

 

ここまで書けたのであれば実際にコードを実行してみて、

スタンプが拡大/縮小/回転できることを確認してみましょう。

実行ボタンを押してみます。

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

そしてスタンプを画面上に追加します。

前回やったように、ドラッグ＆ドロップによる移動はできます。

 

では二本指で操作してみたいと思います。

今画面上に映っているのはシミュレーターですので二本指でクリックするのはできませんけど、

Optionを押しながらクリックすることで二本指による操作を疑似的に行うことができます。

二本指で操作してみると、このように回転と拡大・縮小を同時に行うことができました。

 

今回はここまでです。

次回以降、このスタンプの削除や写真フォルダへの保存、

そしてSNSへの投稿などを行っていきたいと思います。

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

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

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

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