Flex 滚动超过 10.000 像素

Question

Flex Canvas 容器的尺寸限制为 10,000x10,000 像素。然而，我见过 Flex 应用程序的滚动距离超过 10,000 像素。知道如何做到这一点吗？

我想要滚动的内容已经是分段的，但我需要将这些分段添加到可以垂直滚动超过 10,000 像素的内容中。

Answer 1

根据您实际想要显示的内容，您可以将内容拆分为图块。这就是 Google 地图的工作原理，每次移动地图时，程序都会确定哪些图块在屏幕上可见并将其加载。地图上的任何标记或叠加层都会收到地图已移动的通知，并确定其新位置是。如果它们的位置超出屏幕，则可以将其从画布中删除。例如，Google 地图上缩放级别为 20 时所有图块的宽度为 (256 像素 * 2^20)，等于总像素 268,435,456。

本质上，您只需要创建一个特殊的 Sprite 来跟踪它应该定位的实际 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) 处，并且它会在屏幕上可见。

更好的方法不是仅仅将可见设置为 true 或 false，而是当项目不在视图范围内时从画布中完全删除它们。