Question

我注意到当使用Hammer-time.js进行缩放事件时，如果你从捏合到捏合（或反之亦然）而手指离开屏幕，那么捏缩放事件会有明显的延迟。

我只在Android上测试了这个，因为我只有Android手机和平板电脑。

即使用户已经改变了动作，变焦也会继续在转身和再次出门之前进入。使用这种方法放大像照片这样的东西时很明显。

我正在使用的jQuery代码就像我可以用于演示一样简单：

var myElement = document.getElementById('zoom_div');
var hammertime = new Hammer(myElement);
hammertime.get('pinch').set({ enable: true });

hammertime.on("pinchin", onpinchin).on("pinchout", onpinchout);

function onpinchin(e) {
    document.getElementById("zoom_div").innerHTML = "IN";
}

function onpinchout(e) {
    document.getElementById("zoom_div").innerHTML = "OUT";
}

请参阅以下示例：

https://jsfiddle.net/single_entity/xqfufoqo/

在不将手指从屏幕上移开的情况下进出捏，你会看到反方向的反应经常滞后。

Answer 1

我的问题的解决方案是删除Hammer.js以进行我的捏合事件处理，而是实现我自己的捏合处理程序。我继续使用Hammer进行其他触摸事件。

//Non - hammer detection
$('#zoom_div_manual').on('touchstart', function(e){
    trigger_start = true;
});

$('#zoom_div_manual').on('touchmove', function(e){
    pinchMove(e);
});

$('#zoom_div_manual').on('touchend', function(e){
    if(scaling) {
    trigger_start = false;
    }
});

var last_pinch = 0;

function pinchMove(e) {
  e.preventDefault();

  var dist =Math.sqrt((e.originalEvent.touches[0].pageX-e.originalEvent.touches[1].pageX) * (e.originalEvent.touches[0].pageX-e.originalEvent.touches[1].pageX)+(e.originalEvent.touches[0].pageY-e.originalEvent.touches[1].pageY) * (e.originalEvent.touches[0].pageY-e.originalEvent.touches[1].pageY));

  if(dist => last_pinch)document.getElementById("zoom_div_manual").innerHTML = "IN";
  if(dist < last_pinch)document.getElementById("zoom_div_manual").innerHTML = "OUT";

  last_pinch = dist;

}

以下jsfiddle的绿色框中展示了以下内容。我已将Hammer版本包含在上面进行比较。你会发现与Hammer版本相比没有任何滞后：

https://jsfiddle.net/single_entity/xqfufoqo/

我还没在iOS上测试过这个！

Answer 2

所以我面临着同样的问题。我进行了很多搜索，找到了解决方案，至少是针对我的问题。基于munrocket的代码：https://codepen.io/munrocket/pen/dayZJg。您需要保存要调整的比例。希望对您有所帮助。

//adjustScale = 1;
//scale = 1

mc.on('pinchmove',function(e){
 scale = adjustScale * ev.scale;

 //do another things you want to

}
mc.on('pinchend',function(e){
  adjustScale = scale;
}

hammer.js在改变收缩方向时表现出捏滞（在Android上测试）

2 个答案: