Mouse events have wrong position afters canvas is transformed

[koko236]

I was wondering why my mouse events are not working on a canvas animation. Turned out they do, but the div holding the canvas was rotated 180 degrees (using css transform) and the 'click map' worked as if there is no transformation. So clicking on the old unrotated position works even though though the sprite is visually somewhere else now.

[gskinner]

Right. This is a known issue due to the way we had to implement mouse events to support mouse movements outside the canvas, and all supported browsers. I'm not sure we're going to be able to fix it, but I will take a look and see if I can come up with any other ideas. Input is welcome.

[koko236]

Is there any known workaround, like if I know the transform I can reverse transform the mouse position on my own and make a hit test? I used to do flash a lot, but I'm not extremely familiar with easeljs hit testing mechanism.

[meomar]

Is this issue fixed ? is there any workaround ?

[atmanugraha]

Hi all!

I also found the same issue when trying to transform (zoom in) canvas using mouse wheel, Stage.mouseX value is only updated after I scroll twice (I mean, when you scroll your mouse you can feel the click-feel. After twice click, the Stage.mouseX is updated).

But when I only scroll once (1 click), and then press left mouse button, the Stage.mouseX is updated.
I'm not really sure why it behaves like this. I hope this issue will be fixed soon :)

[lannymcnie]

@atmanugraha that sounds unrelated to this issue. What browser is this happening in?

Are you expecting a stage mouse-position update from a mousewheel scroll? There isn't any built-in support for mousewheel, which is why left-click will update those values for you. Chances are good you get an update when you move the mouse slightly, or maybe the browser is running some sort of mousemove for you unreliably. Either way, it might make sense to patch in some mousewheel logic to the Stage, so it keeps the mouse position up to date.

[atmanugraha]

Hi @lannymcnie !
I'm sorry I didnt know that there's not any built-in support for mousewheel scroll to update mouse position, because what I experienced is when I scroll it one step, the mouse.X and mouse.Y value is automatically updated. It makes me assumed that EaselJS has something to do with the position values.

But it doesn't matter now since I have created my own logic to detect its real position after using mousewheel. :)

[stfujnkk]

@atmanugraha that sounds unrelated to this issue. What browser is this happening in?

Are you expecting a stage mouse-position update from a mousewheel scroll? There isn't any built-in support for mousewheel, which is why left-click will update those values for you. Chances are good you get an update when you move the mouse slightly, or maybe the browser is running some sort of mousemove for you unreliably. Either way, it might make sense to patch in some mousewheel logic to the Stage, so it keeps the mouse position up to date.

I have a similar problem that when the canvas scrolls or zooms, the coordinatesstage.mouseX, stage.mouseY of the mouse relative to the canvas are not updated unless you move or click the mouse.
I have solved it myself and I'm thinking about coding a PR for this problem.