Jump to content

Listener mousemove event on Graphics element


Recommended Posts

Hello everyone!

I'm trying Pixi.js for a week and still, I don't understand what's going on with the PIXI.Graphics() class.

I want to drag my graphic circle but from the following code, I get that the 'mousemove' event is triggered when I move the mouse cursor on my canvas, not only on my graphic circle.

    elem = new PIXI.Graphics();
    elem.drawCircle(50, 50, 10);


    elem.on('mousemove', (e) => { console.log(e); });

What am I missing?


Since I am experimenting with the interaction between pixi canvas and user input, are there any guides to understanding better what's happening under the hood and how to correctly manage it?

Link to comment
Share on other sites

Add check on "elem.trackedPointers" inside.

WHY - I dont know.

HOW TO KNOW MORE - read interaction plugin sources: https://github.com/pixijs/pixi.js/tree/dev/src/interaction . InteractionManager is in "renderer.plugins.interaction". If you want different interaction behaviour, you can patch it: in prototype or directly in the instance.

Based on my experience, serious projects hack interaction.

Link to comment
Share on other sites

Yeah, I'm really struggling with interaction right now.  I implemented drag'n'drop, and it works great for some objects, and breaks for others.  It seems to break based on the parent chain of the object being dragged - I stop getting pointermove events over non-interactive objects and other oddness.

I guess I'll go read through the source, but it sure would be great if there were some better documentation on how interaction is supposed to work.  The event descriptions leave a lot to be desired!

Link to comment
Share on other sites

Regarding the WHY:

According to this issue: link


The Graphics object contains primitive drawing information, it was designed to act like the canvas drawing APIs.

It has a position in the scene, and it draws the objects you draw in it at their offset positions from its own. You can draw as many or as few shapes as you want with it. Just as with canvas, when you draw a circle there is no actual object to move around. You just drew a circle to the canvas and that was all. You can then move the canvas (Graphics) around though if you want to.


 I think that 'mouseover' triggers because it is added on the Graphics object, that is not comparable to a Sprite object. I don't understand why it's called Graphics instead of GraphicsManager. I think the latter is a better descriptive name.

Since my need is to write a Diagram Design Tool, hence a lot of primitive graphics elements and no sprites, I'm thinking that PIXI.js is not what I need.

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...