Положение объекта EaselJS изменяется при масштабировании холста - PullRequest
Новая
       27

Положение объекта EaselJS изменяется при масштабировании холста

0 голосов
/ 14 января 2019

Я масштабирую свой холст, используя следующую функцию изменения размера: 

function resize() {
    var w, h;
    var size = [1920, 1080];
    ratio = size[0] / size[1];
    if (window.innerWidth / window.innerHeight >= ratio) {
        w = window.innerHeight * ratio;
        h = window.innerHeight;
    } else {
        w = window.innerWidth;
        h = window.innerWidth / ratio;
    }
    $('canvas').width(w);
    $('canvas').height(h);

    var scale = w/1920;
    stage.scaleX = stage.scaleY = scale;

}
window.onresize = resize;

С HTML и CSS 

<canvas width="1920" height="1080"></canvas>
<style>
   canvas {
       width: 1920px;
       height: 1080px;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
   }
</style>

Это прекрасно работает для самой сцены, но масштабирование содержимого и позиции, кажется, смещаются и не работают.

Так что, если у меня позже будет: 

some_container.y = 1000;

Это отрисовывается посередине на большом холсте, но когда я изменяю его размер, он приближается к вершине и, по-видимому, по крайней мере, тоже не пропорционален.

Так что, я думаю, мне нужно как-то применить такое же соотношение к позициям, но я просто не могу понять, что формула верна. Любая помощь будет оценена.

Этот пример (https://codepen.io/funktion/pen/JwwwBx), кажется, масштабируется и перемещается правильно.

Методом проб и ошибок я обнаружил, что проблема заключается в тикере ... 

createjs.Ticker.addEventListener("tick", tick);

function tick(event) {
    if (!event.paused) {
        stage.update();
    }
}

НО ... Мне нужен тикер для анимации. Любые мысли будут с благодарностью.

1 Ответ

0 голосов
/ 14 января 2019

Несколько заметок:

  1. Масштабирование сцены не является супер-рекомендуемым. Есть несколько проблем с взаимодействием с мышью. Лучше положить вещи в контейнер и масштабировать, что
  2. Если вы масштабируете контейнер (или сцену), координаты также масштабируются. Таким образом, что-то в [50,50] в контейнере, масштабированное в 2 раза, все равно будет говорить, что они были в [50,50], но визуально было бы в [100,100].
  3. Масштабирование холста с использованием CSS не рекомендуется. Это преобразует пиксели. Лучше установить width и height холста на нужный вам размер. Иногда мы устанавливаем холст в 2x или 0.5x количество пикселей, а затем противопоставляем его CSS, чтобы в основном «увеличить» его. Это хороший способ иметь меньше пикселей (меньше точности, быстрее) или больше (с высоким разрешением), но это будет единственный раз, когда я буду использовать CSS.

Я обновил код вашего кода следующим кодом изменения размера, и он работал хорошо (я думаю)

До (масштабирование CSS) 

$('canvas').width(w);
$('canvas').height(h);

После (масштабирование JS) 

stage.canvas.width = w;
stage.canvas.height = h;
stage.update(); // Must update because a resize clears the stage.

Я также избавился от ширины / высоты CSS на холсте. Вот обновленная ручка: https://codepen.io/lannymcnie/pen/vvPLWb

Надеюсь, это имеет смысл.

...