canvasのお絵描きツールをタッチパネル対応してみる

せっかくcanvasでお絵描きツールを作るならばタッチパネル対応ぐらいしたいところ。というわけで調べてみた。

調べてみると、マウスでいう、『mousedown』『mousemove』『mouseup』イベントはそれぞれタッチイベントだと『touchstart』『touchmove』『touchend』に対応しているよう。
というわけで、jQueryのmousedownイベントとtouchstartイベントで同じ処理を割り当てたい場合の基本は下記のようになる。

$('#mycanvas').on('touchstart mousedown', function(e){
});

jQueryのonメソッドの第一引数で’touchstart mousedown’と指定し、タッチした時とマウスダウンした時に同じ関数をわりあてることができます。

このままだと、タッチをした時にデフォルトのブラウザスクロールイベントが発生してしまうので、関数内の最初に『e.preventDefault();』と記述してスクロールイベントを発生しないように記述。これを記述しないとうまくタッチパネルでお絵描きできないっぽいです。

つづいて、タッチした座標の取得について。マウスでは、『e.pageX』『e.pageY』でX座標とY座標が取得できたのだけれども、タッチではこれではうまくいかないらしい。調べてみると、jQueryのイベントオブジェクトの中にoriginalEventというプロパティがあるらしいので、その中の『changedTouches[0].pageX』でX座標が取得できるよう。
今回は、クリックとタッチイベントに同じ関数を割り当てるので下記のように記述することに。

$('#mycanvas').on('touchstart mousedown', function(e){
    e.preventDefault();
    thisX = e.pageX || e.originalEvent.changedTouches[0].pageX;
    thisY = e.pageY || e.originalEvent.changedTouches[0].pageY;
})

これで、thisX,thisYの変数に、クリックならクリックした場所の座標、タッチなたタッチした場所の座標が入る。上記では||演算子を使って、クリック座標がなければタッチイベントの座標を取得するようにしています。

以下、動作サンプル。
canvasを使ったお絵描き投稿システム

タッチパネル対応のWindows7における、Chrome32で動作確認しました。
ただ、マルチタッチすると変わった挙動になってしまうよう。例えば、二本の指を縦にして横にスライドすると、下記のような画像になった。

これはこれで面白いけど。