OGeek|极客世界-中国程序员成长平台

标题: javascript - PIXI - 禁用 preventDefault 触摸事件在 Android 设备上不起作用 [打印本页]

作者: 菜鸟教程小白    时间: 2022-12-13 16:46
标题: javascript - PIXI - 禁用 preventDefault 触摸事件在 Android 设备上不起作用

由于我正在做一个项目,我需要能够在 Canvas 周围拖动对象,还需要通过拖动 PIXI Sprites 后面的实际 Canvas “背景”来滚动整个页面,我遵循了这个人的发现这里:

https://github.com/pixijs/pixi.js/issues/2483 :

By default, the Pixi canvas/display-area cannot be used to scroll the webpage that contains it. Which is important on touch screens. (eg. If you use the rest of the web-page to pinch-zoom into the Pixi canvas, you can become trapped and unable to zoom back out (or pan away), because there's no non-Pixi-canvas area of the page to "grab" with your pinch gesture).

To enable this functionality, I use autoPreventDefault. But this comes with some undesirable side-effects, like scroll/pinch-zoom actions over the canvas registering "taps" or clicks in a way that doesn't make sense. (ie. I'm attempting to zoom or scroll the outer page at that point, not interact with the Pixi canvas)

To work around that, I modify and compile my own custom version of Pixi where I can apply preventDefault in a more granular way...

To get page-scrolling functionality it seems I only need to preventDefault in the InteractionManager.prototype.onTouchEnd function. Whereas autoPreventDefault will also preventDefault on 3 other events. (onMouseDown, onTouchMove, onTouchStart).

Leaving autoPreventDefault = false and applying preventDefault only to onTouchEnd, gives me the functionality I need. But it'd be nice to not have to customize and rebuild Pixi in this way every release. (Sorry if there's something else I'm missing here; I don't completely understand the event system in Pixi, or what else to do about this scroll-touch problem)

所以我在“onTouchStart”和“onMouseMove”上禁用了 e.preventDefault(),但在“onTouchEnd”上保持原样

这在 IOS 设备上完美运行,但在 Android 上不适用,唯一的异常(exception)是使用 Adblock 浏览器的三星 A7(在 Chrome 上失败)。

非常感谢您对此的帮助。

TLDR:

在 onTouchStart 和 onMouseMove 上禁用 PIXI 的 e.preventDefault 可在 IOS 设备上使用,并允许我通过拖动 Canvas 来滚动页面,但不适用于 Android 设备。



Best Answer-推荐答案


我的解决方案是使用

renderer.plugins.interaction.autoPreventDefault = false

这应该适用于 iOS 和 Android。 autoPreventDefault 的文档如下:

Should the manager automatically prevent default browser actions.

使用 PIXI 4.5.6。 看看文档: http://pixijs.download/dev/docs/PIXI.CanvasRenderer.html#plugins http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html

关于javascript - PIXI - 禁用 preventDefault 触摸事件在 Android 设备上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37527524/






欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/) Powered by Discuz! X3.4