モバイルアプリケーションスライドスクリーン方向判断ソリューション

問題の分類
スライドスクリーンは、対応する機能操作を開きます.
問題の説明
1、ユーザーは手動でスクリーンをスライドさせ、スライドの方向に応じて、相応の機能(例えば、お金の木の経験の詳細を上にスライドさせ、タスクの詳細をスライドさせ、左にスライドさせて宝箱の物品を表示するなどの機能)を開き、スライドイベントのキャプチャ問題.
2、ストロークには角度の問題があることはよく知られています.例えば、330度の方向に携帯電話をスライドさせ、その方向の問題を計算します.
3、HTML 5が提供するスライドイベントは、始点と終点の座標しか読み取れず、角度の問題を計算することができます.
4、携帯電話の画面座標と標準座標系の変換問題.
ソリューション
1.スライドスクリーンイベントHTML 5のtouchstartスライド開始イベントとtouchendスライド終了イベントを使用します.
2、方向の判断は、起点で平面座標系を作り、終点と線を結んで直線を作り、直線とxの正半軸で角度を計算する.45度角を方向として線を分割し、例えば、スライド角度が45度以上135度未満であれば、その方向が上向きであると判断する.
3、Mathを使う.atan 2は、始点と終点が形成する直線角度を計算する.
4、標準座標系とスクリーン座標系をよく比較すると、標準座標系は、上半軸が負の値であり、変換を実現するには、Y座標の起点と最終位置を交換するだけでよいことが分かった.
処理コードは次のとおりです.

//    
function GetSlideAngle(dx, dy) {
    return Math.atan2(dy, dx) * 180 / Math.PI;
}

//            1：  ，2：  ，3：  ，4：  ,0：   
function GetSlideDirection(startX, startY, endX, endY) {
    var dy = startY - endY;
    var dx = endX - startX;
    var result = 0;

    //        
    if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
        return result;
    }

    var angle = GetSlideAngle(dx, dy);
    if (angle >= -45 && angle < 45) {
        result = 4;
    } else if (angle >= 45 && angle < 135) {
        result = 1;
    } else if (angle >= -135 && angle < -45) {
        result = 2;
    }
    else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
        result = 3;
    }

    return result;
}

//    
var startX, startY;
document.addEventListener('touchstart', function (ev) {
    startX = ev.touches[0].pageX;
    startY = ev.touches[0].pageY;   
}, false);
document.addEventListener('touchend', function (ev) {
    var endX, endY;
    endX = ev.changedTouches[0].pageX;
    endY = ev.changedTouches[0].pageY;
    var direction = GetSlideDirection(startX, startY, endX, endY);
    switch (direction) {
        case 0:
            alert("   ");
            break;
        case 1:
            alert("  ");
            break;
        case 2:
            alert("  ");
            break;
        case 3:
            alert("  ");
            break;
        case 4:
            alert("  ");
            break;
        default:            
    }   
}, false);