HTML5 gesture detection principle and implementation

Preface

With the richness of hybrid applications, HTML5 engineers are no longer satisfied with simply porting the desktop experience to the mobile terminal. They covet the humanized operation experience of mobile native applications, especially the rich gesture system that native applications are born with. HTML5 does not provide an out-of-the-box gesture system, but it provides a more basic monitoring of touch events. Based on this, we can make our own gesture library.

gesture

Commonly used HTML5 gestures can be divided into two categories, single-point gestures and two-point gestures. Single-point gestures include tap, double tap, long tap, swipe, and move. Two-point gestures include pinch and rotate.

Next, we will implement a javascript library to detect these gestures and use this gesture library to create cool interactive effects.

move

We will not go into details about mobile gesture detection here. To sum up, every time a touchmove event occurs, the coordinate positions between the two displacement points are subtracted.

Click (tap)

The key to gesture detection is to decompose gestures using three events: touchstart, touchmove, and touchend.

So how do you decompose the click event?

• When touchstart occurs, single-touch detection is performed with only one contact point, because single-touch events are limited to the movement of one finger.
• No touchmove event occurs or touchmove is in a very small range (as shown below). Limiting touchmove to a very small range is to give users a certain amount of redundant space, because there is no guarantee that the user's finger will not move slightly when touching the screen.

• touchend occurs within a short time after touchstart (as shown below). The threshold of this time period is in milliseconds, which is used to limit the time the finger is in contact with the screen. This is because a click event starts and ends very quickly.

With the above process, you can start to implement tap event monitoring.

 _getTime() {  
 return new Date ().getTime();  
 }  
 _onTouchStart(e) {  
 //Record the position where touch starts  
 this.startX = e.touches[0].pageX;  
 this.startY = e.touches[0].pageY;  
 if(e.touches.length > 1) {  
 //Multi-point monitoring  
 ...  
 } else {  
 //Record the time when touch started  
 this.startTime = this._getTime();  
 }  
 } 
  _onTouchMove(e) {  
 ...  
 //Record the position of finger movement  
 this.moveX = e.touches[0].pageX;  
 this.moveY = e.touches[0].pageY;  
 ...  
 }  
 _onTouchEnd(e) {  
 let timestamp = this._getTime();  
 if(this.moveX !== null && Math. abs (this.moveX - this.startX) > 10 ||  
 this.moveY !== null && Math. abs (this.moveY - this.startY) > 10) {  
 ...  
 } else {  
 //The displacement of the finger should be less than 10 pixels and the contact time between the finger and the screen should be less than 500 milliseconds  
 if( timestamp - this.startTime < 500) {  
 this._emitEvent( 'onTap' )  
 }
 }
 }

Double tap

Like single click, double click event also requires us to quantify and decompose the gesture.

• A double-click event is an action of one finger. So during touchstart, we need to determine how many contact points there are on the screen.
• A double-click event contains two independent clicks. Ideally, the two clicks should fall on the same point on the screen. In order to give users some redundant space, the distance between the coordinate points of the two clicks is limited to 10 pixels.

• The essence of a double-click event is two quick clicks. In other words, the time interval between the two clicks is very short. After some test quantification, we set the time interval between the two clicks to 300 milliseconds.

Note that in the double-click event we detect the displacement and time interval between two adjacent touchstart events.

 _onTouchStart(e) {  
 if(e.touches.length > 1) {  
 ...  
 } else {  
 if(this.previousTouchPoint) {  
 //The distance between two adjacent touchstarts should be less than 10, and the time interval should be less than 300ms  
 if( Math. abs (this.startX -this.previousTouchPoint.startX) < 10 &&  
 Math. abs (this.startY - this.previousTouchPoint.startY) < 10 &&  
 Math. abs (this.startTime - this.previousTouchTime) < 300) {  
 this._emitEvent( 'onDoubleTap' );  
 }  
 } 
  //Save the time and location information of the last touchstart  
 this.previousTouchTime = this.startTime;  
 this.previousTouchPoint = {  
 startX : this.startX,  
 startY : this.startY  
 }; 
  }  
 }

Long press

Long press is probably the easiest gesture to decompose. We can decompose it like this: if no touchmove or touchend event occurs for a long period of time after touchstart occurs, then a long press gesture is triggered.

Long press is a one-finger action that requires detecting whether there is only one contact point on the screen.

If the finger moves in space, the long press event is canceled.

If the finger stays on the screen for more than 800ms, a long press gesture is triggered.

If the finger stays on the screen for less than 800ms, that is, touchend is triggered within 800ms after touchstart occurs, the long press event is canceled.

 _onTouchStart(e) {  
 clearTimeout(this.longPressTimeout);  
 if(e.touches.length > 1) {  
 } else {  
 this.longPressTimeout = setTimeout(()=>{  
 this._emitEvent( 'onLongPress' );  
 });  
 }  
 }  
 _onTouchMove(e) {  
 ...  
 clearTimeout(this.longPressTimeout);  
 ... 
  }  
 _onTouchEnd(e) {  
 ...  
 clearTimeout(this.longPressTimeout);  
 ...  
 }

Pinch

Zooming is a very interesting gesture. Do you still remember the shock brought by pinching to zoom pictures on the first generation iPhone? Even so, the detection of zooming gesture is relatively simple.

Zooming is a two-finger behavior and requires detecting whether there are two contact points on the screen.

The quantification of the scaling ratio is obtained by the ratio of the distances between two scaling actions, as shown in the following figure.

So the core of scaling is to get the straight-line distance between two contact points.

 //Pythagorean theorem  
 _getDistance(xLen,yLen) {  
 return Math.sqrt(xLen * xLen + yLen * yLen);  
 }

Here xLen is the absolute value of the difference in x coordinates of the two contact points, and yLen is the absolute value of the difference in y coordinates.

 _onTouchStart(e) {  
 if(e.touches.length > 1) {  
 let point1 = e.touches[0];  
 let point2 = e.touches[1];  
 let xLen = Math. abs (point2.pageX - point1.pageX);  
 let yLen = Math. abs (point2.pageY - point1.pageY);  
 this.touchDistance = this._getDistance(xLen, yLen); 
  } else {  
 ...  
 } 
  }

In the _onTouchStart function, get and save the distance between the two contact points when touchstart occurs.

 _onTouchMove(e) {  
 if(e.touches.length > 1) {  
 let xLen = Math. abs (e.touches[0].pageX - e.touches[1].pageX);  
 let yLen = Math. abs (e.touches[1].pageY - e.touches[1].pageY); 
  let touchDistance = this._getDistance(xLen,yLen);  
 if(this.touchDistance) {  
 let pinchScale = touchDistance / this.touchDistance; 
  this._emitEvent( 'onPinch' ,{scale:pinchScale - this.previousPinchScale});  
 this.previousPinchScale = pinchScale;  
 } 
  } else {  
 ...  
 }  
 }

Rotate

The rotation gesture needs to detect two important values: the rotation angle and the rotation direction (clockwise or counterclockwise).

The calculation of the rotation angle and direction needs to be obtained through vector calculation, which will not be expanded in this article.

First, you need to get the rotation direction and angle of the vector.

 //These two methods belong to vector calculation. For the specific principles, please read the references of this article***  
 _getRotateDirection(vector1,vector2) { 
  return vector1.x * vector2.y - vector2.x * vector1.y;  
 }  
 _getRotateAngle(vector1,vector2) {  
 let direction = this._getRotateDirection(vector1,vector2);  
 direction = direction > 0 ? -1 : 1;  
 let len1 = this._getDistance(vector1.x,vector1.y);  
 let len2 = this._getDistance(vector2.x,vector2.y);  
 let mr = len1 * len2;  
 if(mr === 0) return 0;  
 let dot = vector1.x * vector2.x + vector1.y * vector2.y;  
 let r = dot / mr;  
 if(r > 1) r = 1;  
 if(r < -1) r = -1;  
 return Math.acos(r) * direction * 180 / Math.PI;  
 }

Then, when the finger moves, we call the method to obtain the rotation direction and angle.

 _onTouchStart(e) {  
 ...  
 if(e.touches.length > 1) {  
 this.touchVector = {  
       x: point2.pageX - this.startX,  
       y: point2.pageY - this.startY  
 };  
 }  
 ...  
 }  
 _onTouchMove(e) {  
 ...  
 if(this.touchVector) {  
 let vector = {  
          x: e.touches[1].pageX - e.touches[0].pageX, 
           y: e.touches[1].pageY - e.touches[0].pageY  
 };  
        let angle = this._getRotateAngle(vector,this.touchVector);  
        this._emitEvent( 'onRotate' ,{  
 angle  
 });  
        this.touchVector.x = vector.x;  
        this.touchVector.y = vector.y;  
 } 
  ...  
 }

Actual Combat

Well, our gesture system is now complete. Next, we need to test whether this system is reliable in actual combat and make a simple image browser that supports image zooming, rotation, movement, and long pressing.

First, make a good DOM plan. Just like "before", our event monitoring mechanism does not act directly on the image, but on the parent element of the image.

Then, you can start using the gesture detection system above.

 render() {  
 return (  
      <Gestures onPinch={this.onPinch} onMove={this.onMove} onRotate={this.onRotate} onDoubleTap={this.onDoubleTap} onLongPress={this.onLongPress}> 
         <div className= "wrapper" > 
           ![](http://upload-images.jianshu.io/upload_images/2362670-f8b44d4b9101e8d6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 </div>
 </Gestures>
 );  
 }

Because our gesture system detects increments, we cannot directly apply the increments to the object, but need to accumulate these increments. Take rotation as an example:

 onRotate(event) {  
 //Accumulate the increment  
 this.angle += event.angle  
 this.setState({  
 angle:this.angle  
 });  
 }

At this point, our gesture detection is complete.