【Swift】Gesture Recognizerの合わせ技。部品の拡大縮小、回転、移動を1ドラッグで出来るようにする。(Swift 2.1、XCode 7.2)

2020年6月17日

部品の拡大縮小、回転、移動

過去の記事で、ローテーションリコグナイザーとピンチリコグナイザーの2つを使って、部品の回転と拡大縮小を同時に行う方法を説明した。

本記事では、上記にPan Gesture Recognizer(以下、パンリコグナイザー)を追加して、部品の拡大縮小、回転、移動を1ドラッグの中で行うための実装方法を説明する。具体的には以下のアクションが1ドラッグの中で行えるようになる。

部品の上に置いた2本の指の間隔を広げると部品が拡大し、狭めると部品が縮小する。

2本の指の間隔を広げると部品が拡大する

 

部品の上に置いた2本の指を結ぶ直線を回転させると、部品も同じ方向に回転する。
2本指を結ぶ直線を回転させると部品も回転する

 

部品の上に置いた2本の指の距離を一定に保ちながら並行移動すると、部品も同じ方向に移動する。

2本指の距離を一定に保ったまま並行移動すると部品も同じ方向に移動する。

 

以降の手順は部品の回転と拡大縮小を同時に行う記事の続きからなので、実装を試してみる人は先に読んでおくことをお勧めする。⇒「記事

 

パンリコグナイザーを追加する

パンリコグナイザーをラベルに配置する(下図赤矢印)。黄緑枠のアシスタントエディタボタンを押してViewController.swiftを開く。Ctrlキーを押しながら紫枠のパンリコグナイザーをドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示する。

Connectionに「Action」、Nameに「panLabel」を入力し、Connectボタンを押す。これでパンリコグナイザーのイベントをソースコードで受けれるようになった。

同じようにして、もう一度パンリコグナイザーの吹き出しの設定画面を表示し、Connectionに「Outlet」、Nameに「panRecognizer」、Typeに「UIPanGestureRecognizer」を入力し、Connectボタンを押す。これでパンリコグナイザーをソースコードから操作できるようになった。

Pan Gesture Recognizerをラベルに配置する

 

ViewController.swiftを以下のコードに変更する。部品の拡大縮小、回転はアフィン変換を用いているが、移動はアフィン変換を使わずに、「ドラッグ時の呼び出しメソッド」の引数で渡ってきた移動量を部品の座標に加算する方法をとっている。

 

以下は実際のプレイ動画

並行移動にアフィン変換を使う

上記コードの移動は、部品の座標に移動量を加算する方法をとったので、拡大縮小と回転のアフィン変換を使ったやり方と手法が異なる。アフィン変換には並行移動もあるので、拡大縮小と回転の手法と合わせてすべてアフィン変換で実装できる。

具体的にはViewController.swiftを以下のコードのように変更する。拡大縮小、回転のアフィン変換については次の記事も参考にされたし。⇒「記事

ちなみに、回転、並行移動、拡大縮小を適用するアフィン変換は[回転の行列][並行移動の行列][拡大縮小の行列]の結果になるので、プログラムのCGAffineTransformConcatメソッドの引数の順番を変えると別の変換結果になるので利用の際は注意すること。

 

以下は実際のプレイ動画