使用hammer.js 的Y-pan 事件延迟答案

【问题标题】：Y-pan event delay with hammer.js使用hammer.js 的Y-pan 事件延迟
【发布时间】：2021-05-21 22:28:49
【问题描述】：

以下脚本是在基于 Phaser 的应用程序中强制垂直运动（左右上下）的基本导航。我的问题是 y 方向平移事件触发的显着延迟，这使得应用程序非常难以使用。这显然是一个事件问题，而不是参数敏感性问题，因为调整参数对延迟没有影响。

注意事项：

立即检测到 x 轴平移
将单个手势从 x-pan 转换为 y-pan 时，后者没有延迟
在启动新的 y 轴平移（向上或向下）时，在事件触发之前会有明显的延迟（约 0.5 秒）。

任何想法如何解决这个问题？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//cdn.jsdelivr.net/npm/phaser@3.52.0/dist/phaser.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/phaser@3.52.0/dist/phaser-arcade-physics.min.js"></script> -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script>
</head>
<body>
<div id="game-area"></div>
<script>

var config = {
    parent: 'game-area', type: Phaser.AUTO, width: 800, height: 600,
    backgroundColor: '#aaa', scene: { create: create, update: update }
}

var player;

function create () {
    var light_wall_graphics = this.add.graphics({ fillStyle: { color: 0xffff00 } });
    player = new Phaser.Geom.Rectangle( 400, 300, 50, 50 );
    player = light_wall_graphics.fillRectShape(player);
}

function update () {

    if ( Math.abs(g.x) > 1 ) {
        player.x += Math.sign(g.x) * 10;
        g = {"x": 0, "y": 0 };  // reset
    }

    if ( Math.abs(g.y) > 1 ) {
        player.y += Math.sign(g.y) * 10;
        g = {"x": 0, "y": 0 };
    }
}

var game = new Phaser.Game(config, 'game-area');

// hammer listener
var g = {"x": 0, "y": 0 }
var target = document.getElementById('game-area');
var hammertime = new Hammer(target, { velocity: 0.1, threshold: 0 });
hammertime.on('pan', function(ev) { g.x += ev.velocityX; g.y += ev.velocityY; });

</script>
</body>
</html>

【问题讨论】：

也发布在hammer.js github github.com/hammerjs/hammer.js/issues/1272

标签： javascript hammer.js

【解决方案1】：

解决方法是将平移方向设置为“DIRECTION_ALL”。

因为锤子的默认平移方向是水平的。 https://github.com/hammerjs/hammer.js/blob/master/src/hammer.js#L93

【讨论】：

你应该如何声明它？ var mcCompass = new Hammer（目标，{ inputClass：Hammer.TouchMouseInput，方向：Hammer.DIRECTION_ALL }）；它似乎对我没有任何作用。

【解决方案2】：

工作答案（对我来说）在另一个给定的线程中给出：

您需要指定识别器 Hammer.Pan

https://github.com/hammerjs/hammer.js/issues/1272

var mcCompass = new Hammer(
target, 
{
    inputClass: Hammer.TouchMouseInput,
    recognizers: [
        [Hammer.Pan]
    ]
});

【讨论】：