Animate CC HTML5 easelJS stage.X stage.Y mouse pos

Question

I have an application where I need an information card to follow the position of the mouse.

I have used the following code:

stage.addEventListener("tick", fl_CustomMouseCursor.bind(this));

function fl_CustomMouseCursor() {

    this.NameTag.x = stage.mouseX;
    this.NameTag.y = stage.mouseY;

}

It works perfectly in Firefox but in Chrome and Safari the further away the mouse gets from 0,0 on the canvas the larger the distance between NameTag and the mouse (by a factor of 2).

I look forward to any comments.

Answer 1

I see the issue in Chrome as well as Firefox - I don't believe it is a browser issue.

The problem is that the stage itself is being scaled. This means that the coordinates are multiplied by that value. You can get around it by using globalToLocal on the stage coordinates, which brings them into the coordinate space of the exportRoot (this in your function). I answered a similar question here, which was caused by Animate's responsive layout support.

Here is a modified function:

function fl_CustomMouseCursor() {
    var p = this.globalToLocal(stage.mouseX, stage.mouseY);
    this.NameTag.x = p.x;
    this.NameTag.y = p.y;
}

You can also clean up the code using the "stagemousemove" event (which is fired only on mouse move events on the stage), and the on() method, which can do function binding for you (among other things):

stage.on("stagemousemove", function(event) {
    var p = this.globalToLocal(stage.mouseX, stage.mouseY);
    this.NameTag.x = p.x;
    this.NameTag.y = p.y;
}, this);

Cheers,