90秒で理解するiPhone JavaScript(ジェスチャー編)

2008/7/30 水曜日 Posted in iPhone | 1 Comment »

先日のマルチタッチ編に続き、今回はジェスチャー編になります。 対象を拡大縮小したり、回転させたりするには、座標を取得して自分でガリガリ計算しないといけないと思っていたのですが、どうやら「gestureXXX」イベントを使えばそんな必要がないということを知りました。 → 参考 [iphone.wikiwiki.jp] というわけで、今回はgestureイベントの使い方をまとめてみます。   ジェスチャーのイベントには次の3つがあるようです。 gesturestart gesturechange gestureend それぞれ、ジェスチャー開始時、ジェスチャー中、ジェスチャー終了時にイベントが発生します。 使い方は、touchXXXのときと同じようにイベントリスナーに登録するか、「onClick」のような感じで「onGestureStart」属性を追加します。   拡大縮小・回転をさせるのに、押さえておくべきポイントは2点だけです。 「event.scale」で、拡大・縮小用の倍率を取得 「event.rotation」で、回転の角度を取得 下記のサンプルでは、赤いdivタグの拡大縮小・回転を行うためのサンプルです。 width(幅), height(高さ), rotation(角度)をグローバル変数に格納し、ジェスチャーイベントから取得した数値に合わせ、styleを変更しています。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=480, user-scalable=no, maximum-scale=0.6667" /> <script type="text/javascript" charset="utf-8"> <!-- var width = 120; var height = 120; var rotation = 0; function init() { document.addEventListener("touchmove", touchHandler, false); document.addEventListener("gesturechange", gestureHandler, false); document.addEventListener("gestureend", ... Read more..