js--multi-touch web front-end development three: Handling complex gestures (RPM)

This article focuses on the unique gesture event on a multi-touch device (Android and iOS have a much more similar package for this event). This one
The event is a higher-level package for touch event, and as with touch, it also includes Gesturestart,gesturechange,
Gestureend Three event callbacks:

ges turestart    //triggers when two or more fingers are placed on the screen gesturechange    //when there are two or more fingers on the screen, and trigger gestureend    when a finger moves //triggered when the penultimate finger is lifted, ends gesture

    The event handler will get a parameter of type gestureevent, which contains information about the scale of the finger (the proportional
in proportion to the two movement) and the rotation (angle of rotation between two fingers).  
    When two or more fingers are active on the screen, we can make some more complex gestures. This will involve common mouse things
pieces, touch events, and gesture events, which are more complex. Touch has been described in detail in the first article, which is simply taken.  
    Let's start by looking at what happens when you put two fingers on the screen:  
1. The first finger is put down, triggering the touchstart, and nothing else will happen (please refer to the second article, The finger lift will trigger the
mouse events)  
2, the second finger down, trigger gesturestart ,
3, trigger the second finger touchstart 
4. Immediately trigger gesturechange 
5, finger movement, continuous triggering gesturechange, just like the mouse on the screen when moving on and on the same time triggered mousemove like  
6, the second finger lift, Trigger Gestureend, will no longer trigger gesturechange ,
7, trigger the second finger of touchend 
8, Trigger touchstart! Note that, as described in the first article, multiple fingers on the screen, lifting a root, will refresh the global
touch! Re-trigger the touchstart of the first finger, which is different from what is described on Apple's official website.  
9, lift the first finger, trigger touchend 
    gesture event handling is similar to touch, We usually use the information from the Gestureevent object to
do something in Gesturechange:  

var angle = event.rotation; var scale = event.scale;

This allows you to obtain the scale and rotation information, and then we can:

e.target.style.webkitTransform = ‘scale(‘+ e.scale + startScale + ‘) rotate(‘  + e.rotation + startRotation + ‘deg)‘;

This code allows element to rotate and stretch with the movement of your two fingers. Here is a test code, please use
Ipad/iphone/android Open: http://wanglingshu.com/wp-content/uploads/ios-gesture.html
One more thing to note is, will there be any mouse events triggered for complex gestures? Yes, but I only found one. No matter
Your two fingers stretch or rotate on the screen without any mouse event triggering, but when your two fingers move up or down at the same time
, some events are triggered. Please see:

Two fingers scroll up or down at the same time if the target element is a scrollable element (that is, the MouseWheel-bound
Element), the MouseWheel event will be triggered. If it is not scrollable element, when the finger stops moving, it will touch
Hair Onscoll. Here please distinguish with the body scroll of the second article, if you want to scroll body, only need a finger gently blows screen
, but if you want to scroll an internal div or IFRAME, you need to use two fingers. This is also a inconvenient place for multi-touch devices. And for our developers, this inconvenience is magnified ... Because from the user body
Angle, it is obviously inappropriate to require the user to scroll an internal element with two fingers, and to implement the same as a rolling body
The finger scrolls gracefully, and we have to use TouchEvent to implement scroll in its callback function using code. Here's a very good section.
Multi-Touch Rolling components: iscroll-4
Http://cubiq.org/scrolling-div-on-iphone-ipod-touch
It's easy to use, new a Iscroll object, passing in the inner element that needs to be scrolled as a parameter.

js--multi-touch web front-end development three: Handling complex gestures (RPM)