前回のflashcast：フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる（画面作り編）の続きです。

今回は、canvas部分を作ってみます。
とりあえず、細かい機能は別として、タッチで絵を描いてみます。

画面作成のときにも参考にした
トップページ – iPhone 3G DevWiki
を参考にしました。

タッチのイベントとして、
touchstart, touchmove, touchend
があるそうなので、これを使うことにします。

ipod touchは、複数の指で触れるので、イベントが起きたあとに
何番目に触ったやつかを判定する必要があるみたい。

今回は、1回目に触ったやつのイベントだけを使って
それ以外は使わないことにします。

で、できたのがこんな感じ。jqueryを使いました。

 $("body").bind("touchstart", function(){
  if(event.touches[0]){
   var x = event.touches[0].pageX - CANVAS_LEFT;
   var y = event.touches[0].pageY - CANVAS_TOP;

   if(x >= 0 && x < CANVAS_WIDTH && y >= 0 && y < CANVAS_HEIGHT){
    _isTouch = true;
    _isDraw = true;

    _c2d.beginPath();
    _c2d.moveTo(x, y);

    event.preventDefault();
   }
  }
 });

 $("body").bind("touchend", function(){
  var x,y;

  if(event.changedTouches[0]){
   _isTouch = false;

   if(_isDraw){
    _isDraw = false;

    var x = event.changedTouches[0].pageX - CANVAS_LEFT;
    var y = event.changedTouches[0].pageY - CANVAS_TOP;

    _c2d.lineTo(x, y);
    _c2d.closePath();
    _c2d.stroke();

    event.preventDefault();
   }
  }
 });

 $("body").bind("touchmove", function(){
  if(event.touches[0]){
   var x = event.touches[0].pageX - CANVAS_LEFT;
   var y = event.touches[0].pageY - CANVAS_TOP;

   if(_isDraw){
    _c2d.lineTo(x, y);
    _c2d.stroke();
   }

   if(_isTouch){
    if(x >= 0 && x < CANVAS_WIDTH && y >= 0 && y < CANVAS_HEIGHT){
     _isDraw = true;
     _c2d.moveTo(x, y);
    }else{
     if(_isDraw){
      _isDraw = false;
      _c2d.closePath();
     }
    }
   }

   if(_isDraw){
    event.preventDefault();
   }
  }
 });

ポイントとしては

$(”body”).bind(”touchstart”, function(){
if(event.touches[0]){

イベントの取得には、eventを使うところです。

仮に、以下のように書くとうまくいきません。

$(”body”).bind(”touchstart”, function(e){
if(e.touches[0]){

event.touches[0]を使って、1個目に触った指だけを処理しています。

ちなみに、

$(”body”).bind(”touchend”, function(){
if(event.changedTouches[0]){

touchendの場合は、changedTouchesを拾わなくてはいけないようです。

イベントの取り方はこんな感じでしょうか。

次は、イベントのキャンセルです。
ipod touchは、スクロールなどもタッチで行いますが、絵を描いてる途中に画面が動いたらいやなので、canvasの中でイベントが起きた時とかには、イベント自体をキャンセルしてあげます。

event.preventDefault();

これで、変な風に画面が動かなくなります。

ここまでの画面はこんな感じです

ちなみにdoctypeは悩んだのですがいったん、HTML4で作ることにしました。
あとで、それなりの形式に変えようと思います。

ipod touchかiphoneを持っている方は、以下で試してみてください！
tonomemo
※canvas部分（黄色のとこ）をタッチすると絵が描けます！