повернуть на hammer.js ошибка

Question

У меня проблема с вращением на hammer.js. При первом касании двумя пальцами элемент сразу вращается на 180 град. Даже пример поворота на http://hammerjs.github.io/ делает это странное поведение. Исправлена ​​ли ошибка?

Answer 1

Вы можете исправить это, работая с дифференциальным вращением вместо фактического значения вращения.

Найти больше на этом issue

// get a reference to an element 
 
var stage = document.getElementById('stage'); 
 
$stage = jQuery(stage); 
 

 
// create a manager for that element 
 
var manager = new Hammer.Manager(stage); 
 

 
// create recognizers 
 
var Pan = new Hammer.Pan(); 
 
var Rotate = new Hammer.Rotate(); 
 
var Pinch = new Hammer.Pinch(); 
 
var Tap = new Hammer.Tap({ 
 
    taps: 1 
 
}); 
 
var DoubleTap = new Hammer.Tap({ 
 
    event: 'doubletap', 
 
    taps: 2 
 
}); 
 

 
// use them together 
 
Rotate.recognizeWith([Pan]); 
 
Pinch.recognizeWith([Rotate, Pan]); 
 

 
DoubleTap.recognizeWith([Tap]); 
 
Tap.requireFailure([DoubleTap]); 
 

 
// add the recognizers 
 
manager.add(Pan); 
 
manager.add(Rotate); 
 
manager.add(Pinch); 
 
manager.add(DoubleTap); 
 
manager.add(Tap); 
 

 
// subscribe to events 
 
var liveScale = 1; 
 
var currentRotation = 0, lastRotation, startRotation; 
 
manager.on('rotatemove', function(e) { 
 
    // do something cool 
 
    var diff = startRotation - Math.round(e.rotation); 
 
    currentRotation = lastRotation - diff; 
 
    $.Velocity.hook($stage, 'rotateZ', currentRotation + 'deg'); 
 
}); 
 
manager.on('rotatestart', function(e) { 
 
    lastRotation = currentRotation; 
 
    startRotation = Math.round(e.rotation); 
 
}); 
 
manager.on('rotateend', function(e) { 
 
    // cache the rotation 
 
    lastRotation = currentRotation; 
 
}); 
 

 
var deltaX = 0; 
 
var deltaY = 0; 
 
manager.on('panmove', function(e) { 
 
    // do something cool 
 
    var dX = deltaX + (e.deltaX); 
 
    var dY = deltaY + (e.deltaY); 
 
    $.Velocity.hook($stage, 'translateX', dX + 'px'); 
 
    $.Velocity.hook($stage, 'translateY', dY + 'px'); 
 
}); 
 
manager.on('panend', function(e) { 
 
    deltaX = deltaX + e.deltaX; 
 
    deltaY = deltaY + e.deltaY; 
 
}); 
 

 
// subscribe to events 
 
var currentScale = 1; 
 
function getRelativeScale(scale) { 
 
    return scale * currentScale; 
 
} 
 
manager.on('pinchmove', function(e) { 
 
    // do something cool 
 
    var scale = getRelativeScale(e.scale); 
 
    $.Velocity.hook($stage, 'scale', scale); 
 
}); 
 
manager.on('pinchend', function(e) { 
 
    // cache the scale 
 
    currentScale = getRelativeScale(e.scale); 
 
    liveScale = currentScale; 
 
}); 
 

 
var colors = [ 
 
    [20, 187, 95], 
 
    [20, 95, 187], 
 
    [187, 95, 20], 
 
    [187, 20, 95], 
 
    [95, 20, 187], 
 
    [95, 187, 20] 
 
]; 
 
function mult(a, b) { 
 
    return Math.round(a * b); 
 
} 
 
function makeColor(rgb, adj) { 
 
    adj = adj || 1; 
 
    return 'rgb('+mult(rgb[0], adj)+','+mult(rgb[1], adj)+','+ mult(rgb[2], adj)+')'; 
 
} 
 
var currentColorIndex = 0; 
 
manager.on('tap', function(e) { 
 
    currentColorIndex++; 
 
    if (currentColorIndex >= colors.length) { 
 
    currentColorIndex = 0; 
 
    } 
 
    stage.style.backgroundColor = makeColor(colors[currentColorIndex]); 
 
    stage.style.borderColor = makeColor(colors[currentColorIndex], 0.85); 
 
}); 
 

 
var isShrunken = false; 
 
manager.on('doubletap', function() { 
 
    console.log('doubletapped'); 
 
    var scale = $.Velocity.hook($stage, 'scale'); 
 
    if (isShrunken) { 
 
    $.Velocity.hook($stage, 'scale', 2 * scale); 
 
    } else { 
 
    $.Velocity.hook($stage, 'scale', .5 * scale); 
 
    } 
 
    isShrunken = !isShrunken; 
 
});

#stage { 
 
    background: #20bb5f; 
 
    border: 5px solid #009b2f; 
 
    width: 200px; 
 
    height: 200px; 
 
    line-height: 200px; 
 
    text-align: center; 
 
    font: 30px; 
 
    left: 200px; 
 
    top: 50px; 
 
    position: relative; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 10px; 
 
    background: #333; 
 
}

<script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> 
 
<script> TouchEmulator(); </script> 
 
<script src="https://hammerjs.github.io/dist/hammer.js"></script> 
 
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
 
<script src="https://cdn.rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script> 
 

 
<div id="stage"><span>Stage</span></div>