在孩子之前對父母進行排序的算法

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);
    }

}