JS Implementation Mac Touchpad two-finger event (up/down/left/right/zoom in/out)

Objective

These days in repairing a web problem, you need to capture the Mac touchpad two-finger events (up, down, left, right, zoom in, zoom out), but found that there is no ready-made wheels, or to build their own.

For example: Jquery.mousewheel.js (add cross-browser mouse wheel support), give too simple, do not deal with Mac dual-finger behavior, so can not be used.

Goal

Get Mac Touchpad Two-finger behavior, there are two, one is the real-time drag route, the second is the gesture (up, down, left, right, zoom in, zoom out).

Difficulties

Two-finger behavior will only trigger MouseWheel events, and nothing else will trigger Touch,mouse, only from this.

Two-finger characteristics

1. In the fast sliding process, the deltax, DeltaY value of the initial value of the positive and negative is different from the sliding direction.

2. During slow sliding, the value range of the DeltaX and DeltaY values is very small, generally in [-3, 3].

3. Within 1s, the mousewheel event probably triggered about 100 times.

4. During the sliding process, the value will have a jitter problem.

Implementing the Drag Route idea (Path)

For fast sliding

1.deltaX, the DeltaY value of the initial value of the positive and negative is different from the sliding direction of this part of the data to be discarded. (because it's not the real direction)

2. Subtract the DeltaX, DeltaY value 22 for each trigger, and discard if the result value is different from the direction. 3. The remaining difference is the direction shift distance.

4. All the differences in two directions are summed up in two groups, which sets the value of whichever group, and determines the direction of the positive and negative.

For slow sliding

1. Because the value of DeltaX and DeltaY values are very small, they are preserved, but the values are different from the direction, also discarded.

2. All the differences in two directions are summed up in two groups, which sets the value of whichever group, and determines the direction of the positive and negative.

Implement gesture ideas (Gesture)

Based on the above, the DeltaX, DeltaY, and 22 difference values are recorded over a period of time:

DeltaX and DeltaY are used for statistical amplification and reduction of gestures.

22 difference is used to statistic the upper, lower, left and right hand potentials.

So, a gesture is a gesture of time, not a moment.

Implementation code

Specific code is not posted, can be directly on my github download: Https://github.com/codingforme/jquery-mac-mousewheel

Summarize

Route problem: MouseWheel given deltax, DeltaY value and operation effect is very different, fast sliding effect is particularly inaccurate.

Gesture problem: Because of the 3rd of the two-finger character, the gesture can not be accurate, even if the time period becomes very short, but because of the data quantity problem (can't use calculus of thought), will become more imprecise, the time period becomes longer, the reaction time will grow longer;

Specific effects can be under the code to see, the effect is not satisfactory, but can download to see, there is a better solution, please tell me, kneeling thanks.

JS Implementation Mac Touchpad two-finger event (up/down/left/right/zoom in/out)