Animate CC HTML5 easelJS stage.X stage.Y положение мыши не соответствует между Chrome и Firefox

Question

У меня есть приложение, где мне нужна информационная карта, чтобы следить за положением мыши.

Я использовал следующий код:

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 раза).

Я с нетерпением жду каких-либо комментариев.

Answer 1

Я вижу проблему в 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 = p.x;
    this.NameTag.y = p.y;
}, this);

Ура,