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

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

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

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

Жду любых комментариев.


html animate-cc easeljs
person Tim Tyler    schedule 25.11.2016    source источник
comment
Вот проект вживую: norplexbusinesscentre.com/Floorplan-HTML5.html   -  person Tim Tyler    schedule 25.11.2016

Ответы (1)


arrow_upward
3
arrow_downward

Я вижу проблему как в 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);

Ваше здоровье,

person Lanny    schedule 26.11.2016
comment
@TimTyler, возможно, вы захотите выбрать правильное решение в качестве ответа. - person S.Dan; 05.01.2017