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

Source: Internet
Author: User

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:

  1. <script>
  2. //Return angle
  3. function getslideangle (dx, dy) {
  4. Returnmath.atan2 (dy, dx) * Math.PI;
  5. }
  6. return direction according to start and end 1: Up, 2: down, 3: Left, 4: Right, 0: not sliding
  7. function getslidedirection (StartX, Starty, EndX, EndY) {
  8. var dy = Starty-endy;
  9. var dx = endx-startx;
  10. Varresult = 0;
  11. //If the sliding distance is too short
  12. if (math.abs (dx) < 2 && math.abs (dy) < 2) {
  13. Returnresult;
  14. }
  15. Varangle = getslideangle (dx, dy);
  16. if (angle >= -45 && Angle < ) {
  17. result = 4;
  18. }Else if (angle >= && Angle < 135) {
  19. result = 1;
  20. }Else if (angle >= -135 && Angle < -45) {
  21. result = 2;
  22. }
  23. Else if ((Angle >= 135 && angle <= 180) | | (Angle >= -180 && Angle < -135)) {
  24. result = 3;
  25. }
  26. Returnresult;
  27. }
  28. //Sliding handling
  29. var startX, Starty;
  30. Document.addeventlistener (' touchstart ',function (ev) {
  31. StartX = ev.touches[0].pagex;
  32. Starty = ev.touches[0].pagey;
  33. }, false);
  34. Document.addeventlistener (' touchend ',function (ev) {
  35. var endx, EndY;
  36. EndX = ev.changedtouches[0].pagex;
  37. EndY = ev.changedtouches[0].pagey;
  38. var direction = getslidedirection (StartX, Starty, EndX, EndY);
  39. switch (direction) {
  40. Case 0:
  41. Alert ("no swipe");
  42. Break ;
  43. case 1:
  44. Alert ("up");
  45. Break ;
  46. Case 2:
  47. Alert ("down");
  48. Break ;
  49. Case 3:
  50. Alert ("left");
  51. Alert ("!");
  52. Break ;
  53. Case 4:
  54. Alert ("right");
  55. Break ;
  56. Default:
  57. }
  58. }, false);
  59. </script>

Reprinted: 33741859

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.