CODEWITHSUNDEEP
javascriptandroidioscanvasmobile
Nicolas Delfino
Nicolas Delfino

Reputation: 31

PIXI - disabled preventDefault touch events not working on Android devices

Since I´m working on a project where I need to be able to drag objects around my canvas but also to scroll the entire page by dragging the actual canvas 'background' behind my PIXI Sprites, i followed the findings of this guy here:

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)

So i disabled e.preventDefault() on 'onTouchStart' and on 'onMouseMove' but left it as is on 'onTouchEnd'

This works perfect on IOS devices but not on Android, the only exception being a Samsung A7 using Adblock browser (fails on Chrome).

Would really appreciate some help on this.

TLDR:

Disabling PIXI´s e.preventDefault on onTouchStart and onMouseMove works on IOS devices and lets me scroll the page by draggin my canvas around but not on Android devices.

Upvotes: 3

Views: 3810

Answers (2)

Kendaros
Kendaros

Reputation: 171

My solution for that was to use 

renderer.plugins.interaction.autoPreventDefault = false

This should work on iOS and Android. Docs for autoPreventDefault reads:

Should the manager automatically prevent default browser actions.

Using PIXI 4.5.6. Take a look at the docs: http://pixijs.download/dev/docs/PIXI.CanvasRenderer.html#plugins http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html

Upvotes: 2

Nuthinking
Nuthinking

Reputation: 1331

Using renderer.plugins.interaction.autoPreventDefault=true should do the trick.

Upvotes: 1

Related Questions