mousemoveイベントを検出してお絵かきする画面を，モバイルでtouchmoveに置き換えた時のメモ．
タッチ系のイベントが充実しているjQuery mobileを使った方がスマート．
jQuery mobileタッチイベント
今回はモバイル対応で追加実装が多くなかったので，jQueryで対応した．
動作環境
Android:4.1.2
Chrome:39.0.2171.59
jQuery:2.1.1
実装例
HTML:タッチ時のスクロールを停止する．
canvasがVGA以下なので，画面幅はデバイスのサポート範囲まで目一杯取る．- タッチ中に画面移動すると使いづらいので，ユーザスクロールは禁止する．
- canvasはHTML上でサイズ指定しないと，座標がおかしくなる．
<head>
...
<meta name="viewport"
content="user-scalable=no">
...
</head>
<body>
...
canvas id="canvas" class="canvas" width="640px" height="480px"></canvas>
...
</body>
JavaScript:タッチイベントの有無でハンドラを変える
-
'ontouchstart' in windowでタッチイベントの有無を判定してjQueryにtouchmoveハンドラに以下を追加
$('#canvas').bind('touchmove', function() { trackingTouch(); }) -
canvas上の座標はタッチ/マウスで取得方法が違う．
jQueryにtouchmoveハンドラがないので，オリジナルのDOM event objectからcanvasの座標を取得する必要がある． -
タッチイベント
var rect = event.target.getBoundingClientRect();
var x = event.changedTouches[0].clientX - rect.left;
var y = event.changedTouches[0].clientY - rect.top; -
マウスイベント
var rect = evt.target.getBoundingClientRect();
var x = evt.clientX - rect.left;
var y = evt.clientY - rect.top;
function init() {
// オリジナルのDOM objectを取得する
var canvas = $('#canvas')[0];
var ctx = canvas.getContext('2d');
...
// タッチイベントのサポート可否を調べる
var isTouch = ('ontouchstart' in window);
if( isTouch ) {
$('#canvas').bind('touchmove', function() { trackingTouch(); });
}
$('#canvas').mousemove(function(evt) { trackingMouse(evt);} );
}
...
// タッチの軌跡を取得する
function trackingTouch() {
event.preventDefault();
// オリジナルのDOM event objectから取得
var rect = event.target.getBoundingClientRect();
var x = event.changedTouches[0].clientX - rect.left;
var y = event.changedTouches[0].clientY - rect.top;
...
}
// マウスの軌跡を取得する
function trackingMouse(evt) {
// jQueryのイベントから取得
var rect = evt.target.getBoundingClientRect();
var x = evt.clientX - rect.left;
var y = evt.clientY - rect.top;
...
}
window.addEventListener('load', init, false);
最後に
モバイル系も独自にイベントがあるので，追加実装があったらモバイル用を作ったほうが良さそうです．