AngularJSの$swipeで位置と時間からスワイプイベントを検出する

$swipeでスワイプイベントを検出

AngularJSのngTouchの$swipeサービスにはスワイプイベントのstart, move, cancel, endが含まれているが左スワイプや右スワイプのイベントは含まれていない。

そのためスワイプを検出するにはモジュールを追加するか検出できるようにするための記述を追加する必要がある。

時間とスワイプ距離の取得

開始時間と終了時間はtouchstartとtouchendのそれぞれのタイミングでDate.now()を使用してミリ秒を取得。

距離はtouchstartとtouchendのxとyを取得して下記の計算式でスワイプ距離を算出する。

dist = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));

左スワイプと右スワイプの判定

touchstartのx位置とtouchendのx位置を取得して終了位置から開始位置を引いて0以下なら左スワイプ、0より大きければ右スワイプが検出されるようにする。

if((endX - startX) <= 0) {
  swipeWay = 'swipeLeft';
}
else {
  swipeWay = 'swipeRight';
}

スワイプ時間と距離の利用箇所

スワイプの発生条件の指定に利用。サンプルではスワイプの時間が500ミリ秒未満、スワイプする距離が20px未満の時にスワイプイベントが発生するようにしてあります。

var swipeTime = 500; // スワイプ最小時間（ミリ秒）
var swipeTolerance = 10; // スワイプした距離の最小値

if(((endTime - startTime) < swipeTime) && (dist > swipeTolerance)) {
  angular.element(r).prepend('<p>' + swipeWay + '</p>');
}

$swipeで位置と時間からスワイプイベントを検出するサンプル