0

我有一个应用程序,我需要一张信息卡来跟踪鼠标的位置。

我使用了以下代码:

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

function fl_CustomMouseCursor() {

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

}

它在 Firefox 中完美运行,但在 Chrome 和 Safari 中,鼠标距离画布上的 0,0 越远,NameTag 和鼠标之间的距离越大(2 倍)。

我期待着任何评论。

4

1 回答 1

3

我在 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;
}

on()您还可以使用“stagemousemove”事件(仅在舞台上的鼠标移动事件时触发)和可以为您执行函数绑定的方法(除其他外)清理代码:

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

干杯,

于 2016-11-26T15:04:45.693 回答