Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

90秒で理解するiPhone JavaScript（ジェスチャー編）
    このエントリをはてなブックマークに登録

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

先日のマルチタッチ編に続き、今回はジェスチャー編になります。

対象を拡大縮小したり、回転させたりするには、座標を取得して自分でガリガリ計算しないといけないと思っていたのですが、どうやら「gestureXXX」イベントを使えばそんな必要がないということを知りました。　→　参考 [iphone.wikiwiki.jp]

というわけで、今回はgestureイベントの使い方をまとめてみます。

 

ジェスチャーのイベントには次の3つがあるようです。

  • gesturestart
  • gesturechange
  • gestureend

それぞれ、ジェスチャー開始時、ジェスチャー中、ジェスチャー終了時にイベントが発生します。
使い方は、touchXXXのときと同じようにイベントリスナーに登録するか、「onClick」のような感じで「onGestureStart」属性を追加します。

 

拡大縮小・回転をさせるのに、押さえておくべきポイントは2点だけです。

  1. 「event.scale」で、拡大・縮小用の倍率を取得
  2. 「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", saveStyle, false);
}

function touchHandler(event) {
	// スクロール機能の停止
	event.preventDefault();
}

function gestureHandler(event) {
	// リサイズと回転
	var rect1 = document.getElementById('rect1');
	rect1.style.width = (width * event.scale) + "px";
	rect1.style.height = (height * event.scale) + "px";
	rect1.style.webkitTransform = "rotate(" + ((rotation + event.rotation) % 360) + "deg)";
}

function saveStyle(event) {
	// 変数に保存
	width *= event.scale;
	height *= event.scale;
	rotation = (rotation + event.rotation) % 360;
}
// -->
</script>
</head>

<body onLoad="init();">
<div id="rect1" style="width:120px; height:120px; background-color:red; position:absolute; top:120px; left:120px;"></div>

</body>
</html>

 

静止画なのでわかりにくいかもしれませんが、ダブルタッチでdivタグの拡大縮小・回転が行えます。

iPhone / iPodTouchをお持ちの方はこちらからお試しください。
http://ke-tai.org/test/gesture/gesture.html

 

関連：


タグ: , , ,

 

最近の記事







One Response to “90秒で理解するiPhone JavaScript（ジェスチャー編）”

  1. links for 2008-07-30 « 個人的な雑記 Says:
    7月 31st, 2008 at 7:33:42

    […] ke-tai.org > Blog Archive > 90秒で理解するiPhone JavaScript（ジェスチャー編） (tags: iphone development) […]

コメントを書く

«
»