Question

因为我正在开展一个项目，我需要能够在画布上拖动对象，同时通过在PIXI Sprites后面拖动实际画布'背景'来滚动整个页面，我跟着这个家伙的发现这里：

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

默认情况下，Pixi画布/显示区域不能用于滚动   包含它的网页。这在触摸屏上很重要。（例如，如果   你使用网页的其余部分来缩放到Pixi画布，   你可能会陷入困境，无法缩小（或平移），   因为页面中没有非Pixi-canvas区域可以“抓住”   你的捏手势。）

要启用此功能，我使用autoPreventDefault。但是这来了   有一些不良的副作用，如滚动/捏缩放动作   在画布上注册“点击”或点击的方式没有   合理。（即我试图缩放或滚动外页。）   那一点，不与Pixi画布互动）

要解决这个问题，我修改并编译自己的自定义版本   Pixi我可以用更精细的方式应用preventDefault ......

要获得页面滚动功能，我似乎只需要   InteractionManager.prototype.onTouchEnd中的preventDefault   功能。而autoPreventDefault也会在3上阻止默认   其他事件。（onMouseDown，onTouchMove，onTouchStart）。

离开autoPreventDefault = false并仅将preventDefault应用于   onTouchEnd，为我提供了我需要的功能。但不是很好   每个版本都必须以这种方式定制和重建Pixi。（抱歉   如果还有别的东西我在这里失踪;我不完全   了解Pixi中的事件系统，或者对此做些什么   滚动触摸问题）

所以我在'onTouchStart'和'onMouseMove'上禁用了e.preventDefault（），但在'onTouchEnd'上保留了原样

这在IOS设备上非常完美，但在Android上却不行，唯一的例外是使用Adblock浏览器的三星A7（在Chrome上失败）。

真的很感激一些帮助。

TLDR：

在onTouchStart和onMouseMove上禁用PIXI的e.preventDefault适用于IOS设备，并允许我通过拖动我的画布而不是Android设备来滚动页面。

Answer 1

使用renderer.plugins.interaction.autoPreventDefault=true应该可以解决问题。

Answer 2

我的解决方案是使用

renderer.plugins.interaction.autoPreventDefault = false

这适用于iOS和Android。 autoPreventDefault的文档读取：

管理员是否应自动阻止默认浏览器操作。

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

PIXI - 禁用了在Android设备上无效的防止触摸事件

2 个答案: