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

Question

When I create a new Hammer Pinch event and don’t mention the number of pointers in the parameters, it detects a maximum of 3 fingers, and if I mention pointers, for example.

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

then it only detects 4-finger spots. I tried searching in documents and everywhere, but could not detect a pinch with 2, 3 or even 10 fingers with one event. I need this because my web application should run on screens up to 81 ".

Answer 1

Well, I finally decided! I don’t know if it’s a hack, but it works! In the end, the solution was pretty simple, and you had to set the pointers option to 0, yes zero!

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

Now this "multi-channel" event detects a pinch with any number of pointers ranging from 2 to 10.

This was inspired by the docs: http://hammerjs.imtqy.com/recognizer-pinch/ which say for the pointers option:

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

So, I tried to set the option of pointers to 0 for the pinch event, and now, it will work!

Answer 2

PinchRecognizer checks the number of pointers for exactly what you pointed. (This is really checked in the superclass AttrRecognizer ). Therefore, it is really surprising that you find 3 pointers when you do not specify a pointer parameter, since the default is 2.

Anyway, I see two solutions. One of them is to write your own Pinch recognizer. Just look at hammer.js source code and modify the existing one, in fact it is smaller than the screen. The attrTest function is what you are looking for. Do not 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. Therefore, 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 have not tested this. You may need to call recognizeWith to bind all recognizers together.