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

【動作環境】

Swift1.2 Xcode6.4 

【対象レベル】

超初心者

【学習内容】

タッチしながらの画像の移動

二本指での画像の拡大と縮小及び回転

【再生時間】

12:52


動画の音声の書き起こし

続きを行います。

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

 

それでは左側のナビゲーターエリアから、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への投稿などを行っていきたいと思います。

1 2 3 4 5 6

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

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

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

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

コメントをお書きください

コメント: 6
  • #1

    3buro (土曜日, 27 2月 2016 11:31)

    初めまして。
    現在、ブログの動画を参考にカメラアプリ作成の手順を勉強させてもらっています。
    ジェスチャーで拡大縮小する機能の実装(超実践アプリ開発入門!スタンプカメラアプリその4)での質問なのですが、スタンプ画像を動かしすぎると画面外に飛び出て触れなくなったり、拡大しすぎ、縮小しすぎで触れなくなることがありました。

    最大拡大値や最小縮小値の設定、移動範囲の限定など行うことが可能でしょうか?
    どういう記述を使用すれば制御できるのか教えていただきたいと思い、コメントさせていただきました。

    よろしくお願いします。

  • #2

    Belle Wertz (火曜日, 24 1月 2017 16:31)


    For most recent information you have to pay a quick visit web and on the web I found this web page as a best web site for newest updates.

  • #3

    Tekuru運営 (火曜日, 24 1月 2017 23:07)

    3buroさん
    メッセージありがとうございます。
    そして、ものすごい遅くのお返事となってしまいました。本当にすみません。

    今回、解説した動画について、Swift1.2という現時点ではもう古くなってしまったコードのため、
    解説はできない状態にあります。本当にすみません。

    Swiftの各バージョンで、スタンプカメラのアプリはとても人気なので、Swift3.xやそれ以降でも
    作成の仕方を解説したいと思っています。
    その際、最大値、最小値や範囲といった制約についても解説できるよう心がけますので、
    今しばらくお待ち頂けましたらと思います。

    最新の動画は、PrograMOVIEというYouTubeチャンネルにて随時配信しておりますので、
    ぜひそちらもご覧頂けましたらと思います。
    メッセージ頂きありがとうございました。

  • #4

    Cyndy Maly (火曜日, 24 1月 2017 23:09)


    Oh my goodness! Awesome article dude! Many thanks, However I am experiencing troubles with your RSS. I don't know the reason why I am unable to join it. Is there anybody else getting the same RSS problems? Anyone who knows the answer can you kindly respond? Thanx!!

  • #5

    Tekuru Admin (火曜日, 24 1月 2017 23:13)

    To Belle Wertz
    Thanks for the message.
    We are creating an explanation movie of application development in Japanese, but there are a lot of technical terms of programming and it takes a while to make it blog articles.

    We are writing articles in Japanese and have plug-in translations, but we are worried whether we are informed to everyone abroad. Thank you for your message following the other day. I will do my best on Saturday January 28th 2017 as well. We are looking forward to being received messages from you.

  • #6

    Tekuru Admin (火曜日, 24 1月 2017 23:21)

    To Cyndy Maly
    thank you for the message. Thank you for telling me about RSS bugs. Since our blog is tagged, and the programming articles are classified as application development"アプリ開発 in Japanese" or Blog, I think that this is the URL of RSS.

    https://techool.jimdo.com/rss/blog/blog

    Although it takes time to transcribe, PrograMOVIE on the YouTube channel also delivers the latest videos so please check it out.

    https://www.youtube.com/channel/UCpQfWE0TpewbXYnGyxxBkow

    Thank you for your message.