Jump to content

Transfer pointer events from DOM div to pixi.


Recommended Posts

I was working on a scrollview solution for pixi today and after trying few approaches like using `pointermove` event, `pixi-viewport` that yielded relatively poor performance I landed on a custom solution where I overlay scrollable div over pixi canvas and then on that divs `scroll` event I update my containers y and x values. This works insanely good in terms of performance and keeps some things like scroll bounce on ios, so I am happy with it.

The issue as you might guess is that this div covers canvas and I can't disable it's pointer-events, otherwise I loose ability to scroll. It does however have same positioning and size as pixi canvas beneath it, so I was wondering if I can take events from this div like pointerdown / pointerup etc... and somehow trigger them on pixi's canvas / stage element as well to sort of "pass pointer events through that div down to canvas".

Link to comment
Share on other sites

@ivan.popelyshev Neat! So after glancing at it I think one strategy is to run hitTest and emit appropriate events if there was a match? i.e. emit 'pointerdown'.

However this looks like what I need to be using https://pixijs.download/dev/docs/PIXI.InteractionManager.html#setTargetElement but I think this will only work if my div is covering whole canvas and not just part of it that is scrollable right?


Link to comment
Share on other sites

Yeh, essentially I have a container displayed in the scene that is scrollable i.e. achievement list in a game. It doesn't occupy full screen and mask is used to hide its overflowing content (invisible items are also culled). Children are in their own container and it is this one who's y transform is changing to replicate scroll. Overlaying div has same dimensions and position as that parent container.

I guess what I'm asking is how to hitTest only in that parent container, or setTargetElement only for that container, rather than full scene.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...