Flex滚动超过10,000像素

时间:2011-04-29 04:08:10

标签: flex canvas

Flex Canvas容器限制为10,000x10,000像素。然而,我见过Flex应用程序的滚动方式超过10,000像素。知道如何做到这一点?

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

1 个答案:

答案 0 :(得分: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)它会在屏幕上显示出来。

不是将visible设置为true或false,更好的方法是在画布不在视图范围内时完全从画布中删除它们。