Mobile app swipe screen direction to determine the solution, JS to determine gesture direction

Problem classification

Swipe the screen to turn on the appropriate feature action.

Problem description

1, the user manually swipe the screen, according to the direction of the slide, open the corresponding function (such as: slide up the experience of the cash cow, slide to open the task details, left-swipe to open the cornucopia item viewing and other functions), sliding event capture problems.

2, we all know that there are angle problems, such as: to 330 degrees in the direction of sliding mobile phone, to calculate its direction.

3, HTML5 provides the sliding event, can only read to the start and end coordinates, calculate the angle problem.

4, mobile phone screen coordinates and standard coordinate system conversion problem.

Solution Solutions

1. Sliding screen events Use HTML5 's Touchstart to slide the start event and the Touchend slide end event.

2, the direction of the judgment, the starting point to do a plane coordinate system, and the end line to do straight lines, straight and x positive half axis calculation angle; We split the line at a 45-degree angle, such as: As long as the sliding angle is greater than or equal to 45 degrees and less than 135 degrees, it is determined to slide upward.

3. Use math.atan2 to calculate the line angle formed from the starting point and end point.

4, carefully contrast the standard coordinate system and the screen coordinate system, we found that the standard coordinate system, the upper half axis is negative, to achieve the conversion, only need to change the y-coordinate starting point and finally position.

The processing code is as follows:

2. <script>
6. //Return angle
8. function getslideangle (dx, dy) {
10. Returnmath.atan2 (dy, dx) * Math.PI;
12. }
16. return direction according to start and end 1: Up, 2: down, 3: Left, 4: Right, 0: not sliding
18. function getslidedirection (StartX, Starty, EndX, EndY) {
20. var dy = Starty-endy;
22. var dx = endx-startx;
24. Varresult = 0;
28. //If the sliding distance is too short
30. if (math.abs (dx) < 2 && math.abs (dy) < 2) {
32. Returnresult;
34. }
38. Varangle = getslideangle (dx, dy);
40. if (angle >= -45 && Angle < ) {
42. result = 4;
44. }Else if (angle >= && Angle < 135) {
46. result = 1;
48. }Else if (angle >= -135 && Angle < -45) {
50. result = 2;
52. }
54. Else if ((Angle >= 135 && angle <= 180) | | (Angle >= -180 && Angle < -135)) {
56. result = 3;
58. }
62. Returnresult;
64. }
68. //Sliding handling
70. var startX, Starty;
72. Document.addeventlistener (' touchstart ',function (ev) {
74. StartX = ev.touches[0].pagex;
76. Starty = ev.touches[0].pagey;
78. }, false);
80. Document.addeventlistener (' touchend ',function (ev) {
82. var endx, EndY;
84. EndX = ev.changedtouches[0].pagex;
86. EndY = ev.changedtouches[0].pagey;
88. var direction = getslidedirection (StartX, Starty, EndX, EndY);
90. switch (direction) {
92. Case 0:
94. Alert ("no swipe");
96. Break ;
98. case 1:
100. Alert ("up");
102. Break ;
104. Case 2:
106. Alert ("down");
108. Break ;
110. Case 3:
112. Alert ("left");
114. Alert ("!");
116. Break ;
118. Case 4:
120. Alert ("right");
122. Break ;
124. Default:
126. }
128. }, false);
134. </script>

Reprinted: 33741859

Mobile app swipe screen direction to determine the solution, JS to determine gesture direction