移動應用滑動屏幕方向判斷解決方案,JS判斷手勢方向
阿新 • • 發佈:2018-07-16
listen angle num math 起點 rec turn csdn edi
問題分類
滑動屏幕打開相應功能操作。
問題描述
1、用戶手動滑動屏幕,根據滑動的方向,打開相應的功能(如:向上滑搖錢樹經驗明細,向下滑打開任務明細,向左滑打開聚寶盆物品查看等功能),滑動事件捕獲問題。
2、大家都知道,劃動都有角度問題,如:向330度方向滑動手機,要計算出它的方向問題。
3、HTML5提供的滑動事件,只能讀取到起點和終點坐標,計算角度問題。
4、手機屏幕坐標與標準坐標系轉換問題。
解決方案
1、滑動屏幕事件使用HTML5 的touchstart滑動開始事件和touchend滑動結束事件。
2、方向的判斷,以起點做平面坐標系,與終點連線做直線,直線與x正半軸計算角度;我們以45度角為方向分割線,如:只要滑動角度大於等於45度且小於135度,則判斷它方向為向上滑。
3、使用Math.atan2來計算起點與終點形成的直線角度。
4、仔細對比標準坐標系與屏幕坐標系,我們發現,標準坐標系,上半軸為負值,要實現轉換,只需要調換Y坐標起點與終於位置即可。
處理代碼如下:
- <script>
- //返回角度
- function GetSlideAngle(dx, dy) {
- returnMath.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;
- varresult = 0;
- //如果滑動距離太短
- if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
- returnresult;
- }
- varangle = 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;
- }
- returnresult;
- }
- //滑動處理
- 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("向左");
- alert("!");
- break;
- case 4:
- alert("向右");
- break;
- default:
- }
- }, false);
- </script>
-
轉載:https://blog.csdn.net/iwasdream/article/details/33741859
移動應用滑動屏幕方向判斷解決方案,JS判斷手勢方向