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

【问题标题】：hammer.js exhibits pinch lag when changing pinch direction (tested on Android)改变捏合方向时，hammer.js 会出现捏合滞后（在 Android 上测试）
【发布时间】：2017-03-18 09:45:36
【问题描述】：

我注意到在使用 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/

手指不离开屏幕的情况下捏合捏合，您会发现对相反方向的反应通常明显滞后。

【问题讨论】：

标签： android jquery hammer.js

【解决方案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 上测试过这个！

【讨论】：

【解决方案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;
}

【讨论】：