Mobile Gesture Event (Multi-finger Operation)

Keywords: Android Mobile iOS

In mobile development, existing gesture events are only supported by browsers on IOS, so browser gesture events on other devices must be upgraded on touchstart, toucmove, touchend events on the mobile side. Below is a description of the gesture events on the mobile side upgraded.

Mobile Touch Events (Basic Events)

  • Touch start - Touch start
  • Touch move - Touch move
  • Touch end--Touch end
  • Touch cancel - Touch interruption (interruption during touch, such as a pop-up box)
box.addEventListener('touchmove',function (event) {
    console.log('Touch Move');
}

touchEvent object

  • Touches - Number of touches on the screen when an event is triggered
  • targetTouches - Number of contacts on event elements when an event is triggered
  • changedTouches - Number of contacts that trigger the event to change
  • target - event element
  • stopPropagation() - Prevent event bubbles
  • preventDefault() - Prevent default behavior

touchlist object

touchEvent object collection, class array object;
The targetTouches, touches, changedTouches properties all return touchlist objects

touch object

  • clientX/clientY--The position of the contact point on the viewport
  • pageX/pageY--Location of contact on page
  • screenX/screenY - Location of contact on screen
 box.addEventListener('touchstart',function (event) {
    console.log(event.touches);  //Output Touchlist{0:Touch,length:1} when one finger touches
    var startX = event.touches[0].clientX; //Location of Contact on Viewport
 }

Gesture events

Gesture events for IOS

1.1 Event

  • gesturestart - gesture starts, finger touches the current element, screen has two or more fingers
  • gesturechange - Gesture change, finger touches current element, two or more finger positions on screen are moving
  • gestureend - The gesture is over, after gesturestart, there are only two or fewer fingers left on the screen (not including two)

1.2 New attributes for touchEvent

  • scale Contact Distance to Contact Initial Distance Ratio
  • The difference between the rotation contact angle and the initial angle
 box.addEventListener('gesturechange', function(event){
    box.innerHTML = 'rotation : '+event.rotation + '<br>';
    box.innerHTML += 'scale : '+event.scale + '<br>';
 });

Mobile-side gesture events (multi-finger events)

//Encapsulate gestrue.js plug-in
(function (w) {
    /**
     * Used to monitor gesture events for elements
     * @param node  Elements to listen on
     * @param callback Object, object has three functions start, change, end
     */
    function gesture(node, callback) {
        //Gesture Start
        // When you start touching an element, determine the number of fingers on the screen >= 2
        node.addEventListener('touchstart', function(event) {
            if (event.touches.length >= 2) {
                //The tag has triggered the start of the gesture
                node.isGestureStart = true;
                //Calculate the initial distance between two contacts
                this.startDst = getDst(event.touches[0], event.touches[1]);
                //Calculate the initial angle of two contacts
                this.startDeg = getDeg(event.touches[0], event.touches[1]);
                // Callback function
                if (callback && typeof(callback['start']) === 'function') {
                    callback['start']();
                }
            }
        });

        // Gesture Movement
        // When a finger moves, determine the number of fingers on the screen >= 2
        node.addEventListener('touchmove', function(event) {
            if (event.touches.length >= 2) {
                // Calculate the distance between the current two contacts
                var currentDst = getDst(event.touches[0], event.touches[1]);
                // Calculate the current angle between the two contacts of a Book
                var currentDeg = getDeg(event.touches[0], event.touches[1]);
                // Calculates the distance between the current two contacts and the initial distance ratio of the two contacts
                event.scale = currentDst / this.startDst;
                // Calculate changes in angle between two contacts
                event.rotation = currentDeg - this.startDeg;
                //Callback function
                if (callback && typeof(callback['change']) === 'function') {
                    callback['change'](event);
                }
            }
        });

        // Gesture End
        // Determine the number of fingers on the screen < 2 when a gesture has been triggered and a touch has ended
        node.addEventListener('touchend', function(event) {
            if (node.isGestureStart && event.touches.length < 2) {
                //Reset Tag
                node.isGestureStart = false;
                //Callback function
                if (callback && typeof(callback['end']) === 'function') {
                    callback['end']();
                }
            }
        });

        /**
         * Calculate the position of two contacts
         * @param touch1 First contact
         * @param touch2 Second contact
         */
        function getDst(touch1, touch2) {
            //Calculate the length of two right-angled edges
            var x = touch2.clientX - touch1.clientX; //Distance in horizontal direction
            var y = touch2.clientY - touch1.clientY; //Distance in vertical direction
            //Using Pythagorean Theorem, the distance between two contacts (length of bevel)
            var z = Math.sqrt(x*x + y*y);
            // Return results
            return z;
        }

        /**
         * Calculate the angle between two contacts (horizontal auxiliary line)
         * @param touch1 First contact
         * @param touch2 Second contact
         */
        function getDeg(touch1, touch2) {
            //Calculate the distance between two contacts, the length of two right-angled edges
            var x = touch2.clientX - touch1.clientX; //Adjacent
            var y = touch2.clientY - touch1.clientY; //Opposite side
            //Calculate an angle based on the ratio tan of two right-angled edges
            var angle = Math.atan2(y, x); //Is a radian
            //Calculate Angle in Radians
            var deg = angle / Math.PI * 180;
            //Return angle
            return deg;
        }
    }

    //Expose
    w.gesture = gesture;
    
})(window);

Use Case - Scale and Rotate Elements

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,viewport-fit:cover">
    <title>Scaling and Rotation of Elements</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        html,body,#app {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #box {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 150px;
            height: 150px;
            background-color: #f90;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="box"></div>
    </div>
    **transformcss.js Code can see the author's'transform function'Article**
    <script src="js/transformcss.js"></script>
    <script src="js/gestrue.js"></script>
    <script>
        (function () {
            //Get Elements
            var app = document.querySelector('#app');
            var box = document.querySelector('#box');

            //Prevent browser default behavior
            app.addEventListener('touchstart', function(event) {
                event.preventDefault();
            });
            
            gesture(box, {
                start: function(){
                    //When starting a gesture, the scaling ratio of the element is recorded
                    box.startScale = transformCss(box, 'scale');  //Default 1
                    //When calculating the start gesture, the initial rotation angle of the element
                    box.startRotate = transformCss(box, 'rotate'); //Default 0
                },
                change: function(event){
                    //Scaling
                    transformCss(box, 'scale', box.startScale * event.scale);
                    //Realize Rotation
                    transformCss(box, 'rotate', box.startRotate + event.rotation)
                }
            });
        })();
    </script>

Note: The author is just a beginner who gropes silently on the front road. If this article involves errors, please correct them in time. If this article is helpful to you, click on the website of Ming Brother http://learn.fuming.site/ Learn more!

Posted by Frozenlight777 on Thu, 05 Dec 2019 02:34:43 -0800