Coordinates of a sprite in pixi and in the browser's dom

[ryouji]

I am using pixi version 4.8.5 and I am trying to access the coordinates of a Sprite when I click on it through its event like this:

e.data.global.x
e.data.global.y

I have also tried like this:

e.data.originalEvent.layerX
e.data.originalEvent.layerY

I want these coordinates to show just above that sprite in the browser an element that I have hidden in my html, but the coordinates that it is giving me from the event do not appear at the same point where I click.

Does Pixi have any better way to indicate the coordinates of the browser's DOM and not the container where the sprite is? I think that is my problem.

I have also tried:

mySprite.getGlobalPosition()

In order to obtain the coordinates but he does not give them to me precisely for the DOM.

Thanks

[jonforum]

from you event scope just use

this.toLocal(e.data.global); // or mySprite.toLocal(e.data.global)

Suppose this is the scope of your sprite to your event, example of use case for anime element from your mouse to a sprite as children.

            pointerup(e) {
                const from = this.toLocal(e.data.global);
                this.addChild(elementFromMouseToThisSprite);
                TweenLite.fromTo(elementFromMouseToThisSprite, 0.3  ,{x:from.x, y:from.y}, { x:0, y:0});
            };

 

[ryouji]

Ey thanks @jonforum 

then:

toLocal()

transforms the coordinates of the pixi container to those of the browser, right?. It is explained here but I don't quite understand how it does it.

 

[jonforum]

ya you need play with to understand how it work.
Also you have some tread here to help understand.
It will return you the good coord.

 

 

[ryouji]

Thanks this helps me a lot!