Hammer.js: How to detect pinch with any number of / multiple fingers

Question

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".

Normative

Answer 1

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!

Normative

Answer 2

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.

Biotin

Thanks for your answer. I finally solved it another way. Check my answer out! – Normative

The second solution seems too cumbersome, as I would have to write recognisers for each no. of pointers from 2-10, and then handle them. Luckily, pointers: 0 works otherwise I would have needed to modify the Pinch recognizer. BTW, it is indeed surprising to see 3 pointers being detected. – Normative