1/11/2012

html5 touch event on android/ipad

最近系上的收發件要電子化,既然要做,當然就連無紙化也要一起做啊!參考了ups 之類都有一個電子的收發,所以我就弄了html5 的簽名板。

但是常用的mouse down, mouse move, mouse up event 在android 上卻不能跑QQ
查了一下才發現有專門給這類觸控的event:  touchstart, touchmove, touchend

但是在ipad 上跑都ok,android 系列卻一直都有問題。google 以後
後來改完以後,大致上包括下面幾個

  1. preventDefault()  ,(參考網頁)
    在android的browser上,touchstart  touchmove 都有default的,如果沒有prevent的話,touchmove只會fire一次!
     $('#canvas').bind('touchstart', function(e) {
           e.preventDefault();
           draw = true;
           var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
           draw( touch.pageX - this.offsetLeft ,  touch.pageY - this.offsetTop) ;
    }
     $('#canvas').bind('touchmove', function(e) {
           e.preventDefault();
           var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
           draw( touch.pageX - this.offsetLeft ,  touch.pageY - this.offsetTop) ;
    }
  2. touchevent 的 location (參考網頁
    在 iphone/ipad 上可以直接用
    e.touch.pageX/Y
    來取得touch的位置,但是在android 上,pageX 跟pageY要用
    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
    來取得才會對!(jquery 的event 有重新包過,所以要拿originalevent

至於繪圖的部份我是參考  Create a Drawing App with HTML5 Canvas and JavaScript  (javascript)的code,不過他每次move都會重新畫圖(我不確定為什麼要這麼做,有一點沒效率),等等改完code 測試OK 再放上來好了!

還有關於mouse position,我一開始canvas的size是用 style='width:100px;height:200px' 這樣的方法做的,但是這樣它做的事情卻是"縮放"canvas 來達到設定size的效果,try 了很久換成用 這樣的方式才終於正常!