Hammer.js recognize pinch and rotate separately

Question

I am trying to use Hammer.js to recognize touch events. I want to do separate things on the pinch and rotate gesture, but once I add both recognizers to my Hammer.Manager, only the rotate gesture is being recognized.

I'm trying this on an iphone 6s 10.3.1 on both chrome and safari with the same result (rotate is recognized when I pinch or rotate, and pinch is never recognized)

codepen: http://codepen.io/anon/pen/YVjogm

var myElement = document.getElementById('myElement');

var mc = new Hammer.Manager(myElement);

// create a pinch and rotate recognizer
// these require 2 pointers
var pinch = new Hammer.Pinch();
var rotate = new Hammer.Rotate();

// we want to detect both separately
pinch.requireFailure(rotate);

// add to the Manager
mc.add([pinch, rotate]);


mc.on("pinch", function(ev) {
  // do something
    myElement.textContent += ev.type +" ";
});

mc.on("rotate", function(ev) {
  // do something else
    myElement.textContent += ev.type +" ";
});

Is there any way to get these gestures to be recognized separately?

user_9151543 · Answer

Maybe this code can solve problem.
I only use pinch to implement rotate and scale function.
try this code:

var imageSize = 1;
var preAngle = 0;
var rotateAngle = 0;
var currentAngle;
var hammer = new Hammer(imgObject);
hammer.get('pinch').set({enable: true});

hammer.on("pinchmove", function(e) {
    if(preAngle == 0){
        //recode previous angle
        preAngle = Math.round(e.rotation);
    }else{
        currentAngle = (rotateAngle + Math.round(e.rotation)-preAngle);
        imgObject.style.webkitTransform = "scale("+imageSize*e.scale+") 
        rotate("+currentAngle+"deg)";
    }   
});

hammer.on("pinchend", function(e) {
    imageSize = imgObject.getBoundingClientRect().width / imgObject.offsetWidth;
    rotateAngle = currentAngle;
    preAngle = 0;
});

example: https://codepen.io/partyyaya/pen/KLoWJJ
Sorry for my poor english.

Hammer.js recognize pinch and rotate separately

1 Answers