使用hammer.js 的Y-pan 事件延迟
Posted
技术标签:
【中文标题】使用hammer.js 的Y-pan 事件延迟【英文标题】：Y-pan event delay with hammer.js 【发布时间】：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 【参考方案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]
]
);
【讨论】：
以上是关于使用hammer.js 的Y-pan 事件延迟的主要内容，如果未能解决你的问题，请参考以下文章