javascript - Hammer.js: How to detect pinch with any number ofmultiple fingers - Stack Overflow

admin管理员组

文章数量:1391947

When I create a new Hammer Pinch event, and don't mention the number of pointers in options, it only detects a maximum of 3 fingers, and if I mention pointers e.g.

var multiPinch = new Hammer.Pinch({event: 'multipinch', pointers: 4, threshold: 0});

, then it only detects pinches with 4 fingers. I have tried searching in the docs and everywhere, but haven't been able to detect a pinch with 2, 3, or even 10 fingers with one event. I need this as my web app has to work on screens as huge as 81".

When I create a new Hammer Pinch event, and don't mention the number of pointers in options, it only detects a maximum of 3 fingers, and if I mention pointers e.g.

var multiPinch = new Hammer.Pinch({event: 'multipinch', pointers: 4, threshold: 0});

, then it only detects pinches with 4 fingers. I have tried searching in the docs and everywhere, but haven't been able to detect a pinch with 2, 3, or even 10 fingers with one event. I need this as my web app has to work on screens as huge as 81".

• javascript
• gesture
• multi-touch
• hammer.js
• pinchzoom

Share Improve this question Follow asked Feb 14, 2016 at 16:41 ParthParth 1,16533 gold badges1616 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Well I finally solved it! I don't know if it's a hack but it works! The solution was quite simple in the end and it was to set the pointers option to 0, yes zero!

var multiPinch = new Hammer.Pinch({event: 'multipinch', pointers: 0, threshold: 0});

Now, this "multipinch" event detects pinches with any number of pointers ranging from 2 to 10.

This was inspired from the docs here: http://hammerjs.github.io/recognizer-pinch/ which say for the pointers option:

| Option   | Default | Description                             |
|:--------:|---------|-----------------------------------------|
| pointers | 1       | Required pointers. 0 for all pointers.  |

So, I tried setting pointers option to 0 for the pinch event and lo, it worked!

The PinchRecognizer checks the number of pointers to be exactly what you specified. (This is actually checked in the superclass AttrRecognizer) So it's actually surprising that you detect 3 pointers when not specifying the pointers parameter, since the default is 2.

Anyway, I see two solutions. One is to write your own Pinch recognizer. Just look in the hammer.js source code and modify the existing one, it's actually less than a screen long. The attrTest function is what you're looking for. Don't call the super method (which checks the number of pointers), just check that the number of pointers is less than or equal to what you want.

A simpler solution is to define a PinchRecognizer for each number of pointers you want. So if you want to detect 4 fingers or less, do it like this:

var mc = new Hammer.Manager(element);

mc.add(new Hammer.Pinch({ event: 'pinch2', pointers: 2, threshold: 0 }));
mc.add(new Hammer.Pinch({ event: 'pinch3', pointers: 3, threshold: 0 }));
mc.add(new Hammer.Pinch({ event: 'pinch4', pointers: 4, threshold: 0 }));

Disclaimer: I haven't tested this. You might have to call recognizeWith to link all the recognizers together.

本文标签： javascriptHammerjs How to detect pinch with any number ofmultiple fingersStack Overflow