feeds2012/09/24カテゴリー:JavaScriptJavaScriptでのジェスチャーイベントを利用した拡大/縮小・回転Tweetジェスチャーイベントは、スマートフォンやタブレットのタッチパネルで複数の指によるタッチ操作を行った際に発生するイベントです。ジェスチャーイベントを利用することで、ユーザーがタッチパネル上で行った拡大/縮小や回転といった操作を簡単に取得することができ、より直感的なユーザーインターフェイスの構築に役立ちます。目次ジェスチャーイベントを使ったサンプルジェスチャーイベントの種類とタイミングジェスチャーイベントのイベントリスナーシングルタッチでのドラッグ&ドロップマルチタッチでの拡大/縮小・回転ジェスチャーイベントを使ったサンプルジェスチャーイベントを使った簡単なサンプルを作ってみました。サンプルでは、EaselJSを使ってcanvasの中央に矩形のオブジェクトを配置しています。シングルタッチのドラッグでオブジェクトを移動、マルチタッチのジェスチャーでオブジェクトを拡大/縮小・回転させることができます。このサンプルを通して、JavaScriptでジェスチャーイベントを利用する方法を解説していきたいと思います。現時点ではAndroidはJavaScriptのジェスチャーイベントをサポートしていないので、Androidではシングルタッチのドラッグのみ動作します。Sampleジェスチャーイベントの種類とタイミングジェスチャーイベントは、スマートフォンやタブレットのタッチパネルでピンチインやピンチアウトのように複数の指でタッチ操作を行った際に発生します。JavaScriptで取得できる主なジェスチャーイベントの種類とイベントの発生するタイミングは下記の通りです。gesturestartタッチパネルにマルチタッチ(複数の指をタッチ)した時に発生します。gesturechangeタッチパネルにマルチタッチしたまま、指を動かした時に発生します。gestureendタッチパネルから指を離し、タッチしている指が1本以下になった時に発生します。ジェスチャーイベントのイベントリスナージェスチャーイベントは、他のイベントと同じようにaddEventListener()でイベントリスナーを追加することができます。サンプルでは、実行環境がタッチイベントやジェスチャーイベントをサポートしているかを調べ、サポートしている場合のみリスナーを追加するようにしています。false);}シングルタッチでのドラッグ&ドロップシングルタッチ時のドラッグ&ドロップの処理を見てみましょう。touchcancelといったタッチイベントが発生した際に実行される関数です。タッチイベントが発生した際にe.preventDefault()でスクロールや拡大/縮小といったブラウザのデフォルトの動作を停止しておきます。touchstartのリスナー関数では、ユーザーがタッチした座標を算出し、hitTestで矩形オブジェクトとの衝突判定を行っています。タッチ座標とオブジェクトが衝突している場合には、イベントオブジェクトとオフセットを配列_hitTouchesに格納しておきます。touchmoveのリスナー関数では、ドラッグ&ドロップの処理を行っています。タッチイベントオブジェクトのtouchesプロパティは、タッチパネルに触れている指の情報を配列で持っているので、その中から最初にオブジェクトと衝突したタッチイベントをidentifierの値で判別しています。touchendのリスナー関数では、タッチイベントオブジェクトのchangedTouchesプロパティより、タッチパネルから離れた指の情報を取得し、配列_hitTouches内にタッチパネルから離れた指の情報があれば削除しています。タッチイベントについては、前回の投稿「JavaScriptでタッチイベントを取得しよう」でも解説していますので、合わせてご覧下さい。}}マルチタッチでの拡大/縮小・回転それでは、マルチタッチ時の拡大/縮小・回転の処理を見てみましょう。gestureendといったジェスチャーイベントが発生した際に実行される関数です。gesturestartのリスナー関数では、マルチタッチ開始時のオブジェクトのscaleとrotationの値を変数に保存しておきます。操作性を考えてマルチタッチ時はドラッグ&ドロップできないようにしておきます。gesturechangeのリスナー関数では、拡大/縮小・回転の処理を行います。rotationプロパティからユーザーが行ったジェスチャーを取得し、オブジェクトに反映させます。gestureendのリスナー関数では、_hitTouchesのoffsetを再計算して、再びドラッグ&ドロップできるようにしています。