在孩子之前对父母进行排序的算法

Question

我正在写一个绘图应用程序，其中包含可以有子级的形状。 当我需要重新绘制画布时，我想对要绘制的形状进行排序，以使父母出现在孩子面前。 这样，父形状将不会在子形状的顶部绘制。 这是相关的功能（用JavaScript编写）。 变量以my.为前缀my. 是实例变量。 my.draw_order是需要被重新绘制（由下面的代码填充）形状索引的阵列， my.ctx是其中形状绘制的HTML画布背景下， my.shapes是形状以任意的顺序阵列， my.update_rects是一个脏矩形数组，可以选择由非常大的形状用于仅进行部分重绘。

redraw = function () {
    var i, shape_count, shape;

    shape_count = 0;
    for (i = 0; i < my.shapes.length; i++) {
        shape = my.shapes[i];

        if (shape.visible && shape.dirty) {
            my.draw_order[shape_count] = i;
            shape_count++;
        }
    }

    my.draw_order.length = shape_count;

    // sort shapes to draw so that parents appear before children ???
    my.draw_order.sort(shape_sort);

    for (i = 0; i < my.draw_order.length; i++) {
        shape = my.shapes[my.draw_order[i]];

        shape.draw(my.ctx, my.update_rects);
        shape.dirty = false;
    }

    my.update_rects.length = 0;
};

我的问题是：实现代码所引用的shape_sort的最佳方法是什么？ 这是一个经常被调用的例程，因此效率可能是一个问题。 每个形状都有一个父属性，该属性包含对其父形状的引用。 欢迎提出更好的设计建议。 按排序顺序维护my.shapes数组是不受欢迎的选择。

Answer 1

如果您需要比树更复杂的数据结构，则应检查拓扑排序算法。

Answer 2

我会保持形状像一棵树。 创建一个根（代表整个屏幕），并为父母提供指向其孩子的指针。 然后，只需对树进行简单的预遍历即可。

要根据您现有的设计来实现，您无需放弃my.shapes数组。 只需添加一个my.root ，添加从父母到孩子的指针，然后遍历：

function preorder_draw(root) {

    //do stuff with root
    draw(root);

    for (child in root.children) {
        preorder_draw(child);
    }

}