Что заставляет мой рисунок на холсте ломаться и пропускать определенные значения (например, 2 ^ 15)?

Я работаю над приложением на основе 2D-холста, используя EaselJS, где пользователь может бесконечно перемещаться по плоскости xy, перетаскивая фон. Подумайте о картах Google, за исключением того, что фон представляет собой повторяющуюся плитку.

Код движения очень прост и выглядит примерно так:

// container  - the createjs.Container being panned
// background - a createjs.Shape child of container, on which the 
//              background is drawn
background.onPress = function(evt) {
  var x = evt.stageX, y = evt.stageY;

  evt.onMouseMove = function(evt) {
    // the canvas is positioned in the center of the window, so the apparent 
    // movement works by changing the registration point of the container in 
    // the opposite direction.
    container.regX -= evt.stageX - x;
    container.regY -= evt.stageY - y;
    x = evt.stageX;
    y = evt.stageY;
    stage.update();
  };

  evt.onMouseUp = function(evt) {
    // Here the background would be redrawn based on the new container coords.  
    // However the issue occurs even before the mouse is released.
    background.redraw();
    stage.update();
  };
};

Все работает, как и ожидалось, до достижения 32678 пикселей (2^15) по обеим осям. То, что происходит в разных браузерах, отличается, но момент, когда это происходит впервые, одинаков.

В Firefox он внезапно сместит большую часть пикселей (~ 100), а не 1. Затем это произойдет снова на 65538 (2 ^ 16 + 2), возможно, после этого больше, но я этого не видел. После проблемных точек торможение будет продолжаться плавно, как и ожидалось, но со смещением.

В Chrome эффект более драматичен. Рисунок прерывается и приводит к повторяющимся «полосам» фона шириной ~ 100 пикселей по всей странице на 32768 и не исправляется при перерисовке.

Как ни странно, цифры в EaselJS не отражают проблему. Единственным изменением в матрице преобразования контейнера является увеличение tx или ty на 1. Другие матрицы не меняются. Кажется, EaselJS правильно вычисляет все цифры.

Кто-нибудь может пролить свет на этот вопрос?

Редактировать:
я обошел эту проблему, перерисовав части контейнера, используя рассчитанные regX/regY, вместо того, чтобы пытаться преобразовать очень большие координаты regX/regY на холсте.


javascript canvas matrix easeljs
person numbers1311407    schedule 02.12.2012    source источник
comment
+1; Можете ли вы предоставить скрипку?   -  person John Dvorak    schedule 02.12.2012
comment
Я могу попробовать завтра, но, к сожалению, это не тривиально. Мне пришлось бы разбить кучу кода из моего приложения и собрать его вместе, чтобы запустить скрипку. Фактический задействованный код холста довольно минимален. Это контейнер, содержащий одну фоновую фигуру, которая рисует прямоугольник с повторяющейся заливкой холста вокруг всего этого, а затем перемещает точку регистрации контейнера при перетаскивании (как в приведенном выше коде).   -  person numbers1311407    schedule 02.12.2012

Ответы (1)


arrow_upward
1
arrow_downward

Этот вопрос может быть связан

Каков максимальный размер холста HTML?

Насколько я понимаю, браузеры используют short int для хранения размеров холста, при этом 32 767 является максимально возможным значением.

Ссылки, возможно, связанные с вашей проблемой,

person lostsource    schedule 02.12.2012
comment
Это кажется заметным, чтобы не быть связанным. Дело в том, что мой холст не такой большой, а просто координаты xy фигуры внутри него. Оба браузера на самом деле выйдут далеко за пределы этого числа (по крайней мере, до сотен тысяч). В firefox у меня просто проблема с загадочным сдвигом, а в хроме, как ни странно, я обнаружил, что если масштаб не равен 1, я могу перетаскивать прямо через 2 ^ 15 (и 2 ^ 15 * масштаб, чтобы быть уверенным) вообще без вопросов. - person numbers1311407; 02.12.2012