【Swipe】部品の拡大縮小、回転、並行移動のアフィン変換を同時にする。 | はじはじアプリ体験記

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

  • 2016年5月15日
    Swift 2.1で検証
  • Twitterでシェア
  • Facebook
  • LINEで送る

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

過去の記事で、ローテーションリコグナイザーとピンチリコグナイザーの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メソッドの引数の順番を変えると別の変換結果になるので利用の際は注意すること。

 

以下は実際のプレイ動画

Swift記事一覧へ
  • Twitterでシェア
  • Facebook
  • LINEで送る
はじはじビットコイン目指せ!最強の暗号通貨トレーダー

コメント

  1. tomita より:

    初めまして、tomitaと申します。
    ひさしぶりにapp作成に挑戦しようと思って,ハジハジさんのサイトにたどり着きました。
    【Swift】Gesture Recognizerの合わせ技。部品の拡大縮小、回転、移動を。。。を参考にと思いましたが、最初のところ、『Connectionに「Action」、Nameに「panLabel」を入力し、Connectボタンを押す。』
    としたところ、『Could not insert new action connection……』となります。x-code再起動でもダメでした。
    何か対応策等あれば、ご教授願いますでしょうか。
    お忙しいとは思いますが、よろしくお願いいたします。

    • 管理人 より:

      はじめまして、管理人のHAJIMEです。

      私のPCでも同じような事象がたまにおきます(XCode7.3)。私のPCでは「Cancel」ボタンを押して、もう一度やり直すと通常どおり挿入できてます。

      人によっては、やり直しても再度エラーが発生することがあるようです。その場合、メニュー⇒ Product ⇒ Cleanで中間ファイルを削除してやるとうまくいくようになったという話を聞いたことがありますので、一度試してみて下さい。

  2. tomita より:

    メニュー⇒ Product ⇒ Cleanで中間ファイルを削除してみましたが、ダメでした。x−codeバージョンは8.0です。

  3. tomita より:

    中間ファイルを削除した後、xcodeを再起動で、うまくいけました。
    ありがとうございました。

    • 管理人 より:

      どういたしまして

      結果報告ありがとうございます。うまくいって良かったです。

コメントを残す

お名前