Animate CC HTML5 easelJS stage.X stage.Y鼠标在Chrome和Firefox之间的位置不一致 [英] Animate CC HTML5 easelJS stage.X stage.Y mouse position not consistent between chrome and and firefox

问题描述

我已经使用了下面的代码：

  stage.addEventListener（tick，fl_CustomMouseCursor.bind（this））; 
 
函数fl_CustomMouseCursor（）{
 
 this.NameTag.x = stage.mouseX; 
 this.NameTag.y = stage.mouseY; 
 
 
 $ / code> 

它可以在Firefox中完美运行，但在Chrome和Safari中会更进一步鼠标从画布上的0,0开始，NameTag和鼠标之间的距离变大（减小2倍）。

我期待着任何评论。

解决方案

我在Chrome和Firefox中看到了这个问题 - 我不认为这是浏览器问题。 >

问题在于舞台本身正在缩放。这意味着坐标乘以该值。你可以通过在舞台坐标上使用 globalToLocal 来解决它，它将它们带入到exportRoot的坐标空间中（ this 在你的功能）。我在这里回答了类似的问题 ，这是由Animate的响应式布局支持引起的。

这是一个修改过的函数：

  function fl_CustomMouseCursor（）{
 var p = this.globalToLocal（stage.mouseX，stage.mouseY）; 
 this.NameTag.x = p.x; 
 this.NameTag.y = p.y; 
} 
  

您还可以使用stagemousemove事件清理代码（这是只能在舞台上的鼠标移动事件上触发）和 on（）方法，它可以为你执行函数绑定（除其他外）：

  stage.on（stagemousemove，function（event）{
 var p = this.globalToLocal（stage.mouseX，stage.mouseY） ; 
 this.NameTag.x = px; 
 this.NameTag.y = py; 
}，this）; 
  

干杯，

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.

解决方案

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,

这篇关于Animate CC HTML5 easelJS stage.X stage.Y鼠标在Chrome和Firefox之间的位置不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！