Nov

2011

29

スマフォの画面操作 (touch events)で、指で奥行きを操作

touchstart, touchmove, perspective


» DEMOページ

たぶんスマフォのみ対応:2011-11-29現在

以前投稿した「ブラウザで3D 奥行きをつける2 応用」を改造して、タッチイベント(画面を触って)で3Dに画像に奥行きを付けてます

メインは、addEventListenerで呼び出されるイベントたちです。

	// touch eventsの取得、それぞれのイベントで関数cbFuncを呼ぶ
	var el = document.getElementById('touchArea');
	el.addEventListener('touchstart', cbFunc, false);
	el.addEventListener('touchend', cbFunc, false);
	el.addEventListener('touchmove', cbFunc, false);
	el.addEventListener('touchcancel', cbFunc, false);
touchstart = タッチしたとき
touchend = タッチを終えたとき
touchmove = タッチしたまま動かした時
touchcancel = システム的にキャンセルがかかった時、らしいです(未確認)

取得された情報が touches.item(0) のように配列になって、指の本数もちゃんと対応してくれます。
いろいろできそうで楽しそう。

広告