我在hammer.js上有一个旋转问题。在用两根手指第一次触摸时,元件立即旋转180度。即使http://hammerjs.github.io/处的旋转示例也会出现这种奇怪的行为。任何错误修复?
答案 0 :(得分:4)
您可以通过使用差分旋转而不是实际旋转值来解决此问题。
在此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>