EduBic

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.beginFill(0xFFFFFF);
    elem.drawCircle(50, 50, 10);
    elem.endFill();

    myStage.addChild(elem);

    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?

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Thank you, but I don't understand how to use "elem.trackedPointers", there is no documentation about it.

It's a pity that the only good guide of this nice library is the source code.

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

Regarding the WHY:

According to this issue: link

Quote

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.