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

Question

我注意到在将 Hammer-time.js 用于缩放事件时，如果您从捏合到捏合（反之亦然）而手指不离开，捏合缩放事件会出现明显的滞后屏幕.

我只在 Android 上测试过这个，因为我只有 Android phone 和平板电脑可用。

通常情况下，缩放会继续进入，然后转身并再次退出，即使用户已反转操作。使用这种方法放大照片之类的东西时很明显。

我使用的 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

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

 //do another things you want to

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

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

hammer.js exhibits pinch lag when changing pinch direction (tested on Android)

android

jquery

hammer.js