Flex 滚动超过 10.000 像素答案

【问题标题】：Flex scrolling more than 10.000 pixelsFlex 滚动超过 10.000 像素
【发布时间】：2011-04-29 04:08:09
【问题描述】：

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

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

【问题讨论】：

其实 Canvas 没有 10kx10k 最大尺寸这样的限制。你是怎么想到的？
嘿，你是对的！有趣的事；如果你去阅读有关 Canvas 的信息，它建议使用 2 个 Spark 容器，它们都限制在 10kx10k 以内……很奇怪。谢谢。
我实际上并没有做过太多的 Flex 4 编程，但是从我编写的一些代码 sn-ps 来测试 10kx10k 的限制，我可以清楚地看到 Group 也不受任何限制 - 它会很高兴例如，将自身设置为 20k 高度。

【解决方案1】：

根据您实际想要显示的内容，您可以将内容拆分为图块。这就是谷歌地图的工作方式，每次移动地图时，程序都会确定哪些图块在屏幕上可见并加载它们。地图上的任何标记或叠加层都会收到地图已移动的通知，并确定它们的新位置是。如果他们的位置不在屏幕上，他们可以从画布上移除。例如，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 之外，更好的方法是在项目不在视图范围内时将它们从画布中完全删除。

【讨论】：

你好。有趣的。我还没有尝试过。但我想知道滚动条。他们将如何调整大小和滚动以匹配内容？
我应该认为必须手动确定内容的大小并设置滚动条的大小。如果滚动条实际上没有绑定到画布，那么我应该认为您可以更改滑块的大小。我的经验是使用普通的 actionscript 而不是 flex，所以我不确定 flex 在这方面是如何工作的。