Блог

Размер контейнера Flex Canvas ограничен размером 10 000×10 000 пикселей. Тем не менее, я видел гибкие приложения, которые прокручиваются более чем на 10 000 пикселей. Есть идеи, как это можно сделать?

Содержимое, которое я хочу прокрутить, уже разбито на части, но мне нужно добавить эти части к чему-то, что может прокручиваться по вертикали более чем на 10 000 пикселей.

В зависимости от того, что вы на самом деле хотите отобразить, вы можете разбить свой контент на плитки. Вот как работает Google Maps: при каждом перемещении карты программа определяет, какие плитки видны на экране, и загружает их. Все маркеры или наложения, которые есть на карте, уведомляются о перемещении карты и определяют, где находится их новое местоположение. Если их местоположение находится за пределами экрана, они могут быть удалены с холста. Например, ширина всех фрагментов при 20-м уровне масштабирования на Картах Google составляет (256 пикселей * 2 ^ 20), что составляет 268 435 456 общих пикселей.

По сути, вам просто нужно создать специальный спрайт, который отслеживает фактическое местоположение x, y, в котором он должен быть размещен. Каждый раз, когда контейнер перемещается, вы просто перебираете все дочерние объекты и определяете, куда их поместить.

 function onCanvasScroll() {
    //determine the top left coordinates of the canvas
    //you will figure out how to do this depending on how the scrolling window
    //is implemented
    var canvas_scroll_x;
    var canvas_scroll_y;

    //create a bounding box for the canvas
    var view_bounds = new Rectangle(canvas_scroll_x, canvas_scroll_y, canvas.width, canvas.height);

    for (child in canvas) {
        var x = child.actual_x - view_bounds.x;
        var y = child.actual_y - view_bounds.y;

        var childBounds = new Rectangle(x, y, child.width, child.height);
        //determine if the component is visible on screen
       if (view_bounds.intersects(child_bounds)) {
          child.visible = true;
          child.x = x;
          child.y = y;
       }
       else {
           child.visible = false;
       }

    }
}
  

Итак, если у вас есть холст, который расположен на (100, 20000), спрайт, который расположен на (300, 20100), и окно, которое (640,408), вы бы разместили его на (200, 100), и оно было бы видно на экране.

Вместо того, чтобы просто устанавливать значение visible равным true или false, лучшим подходом было бы полностью удалить элементы с canvas, когда они не находятся в пределах видимости.