• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

javascript - PIXI - 禁用 preventDefault 触摸事件在 Android 设备上不起作用

[复制链接]
菜鸟教程小白 发表于 2022-12-13 16:46:00 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

由于我正在做一个项目,我需要能够在 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/

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap