Question

我正在尝试在画布上绘制二叉树。从服务器端发送表单数据。数据是：插入树的文本，y轴上x轴位置的位置。

当我说“x轴和y轴位置”时，我指的是二叉树中节点的排列，我将尝试用图形示例尽可能清楚地解释：

                (0,0)
                /   \
          (-1,1)     (1,1)
          /    \     /   \
      (-2,2) (0,2) (0,2) (2,2)

这是：根位于（0,0）位置，左子位于（-1,1）（深度增加，但宽度减小），右子（1,1）等等。问题在于，在某个位置，不同父节点的两个节点将重合，其中一个节点将与另一节点重叠。

我以这种方式拥有组件，因为在服务器端，在遍历二叉树时形成对（当我走进当前节点的子节点时，我将1加到该对的第二个组件;如果孩子在左边，那么我在第一个组件中残留1，但如果孩子在右边，我将1加到第一个组件上。

我的画布代码是：

                var TreeDrawer = (function(){
                    var _depth = 20
                      , _breadth = 15
                      , _rootX = width/2
                      , _rootY = 50
                      ;

                    var _context = getContext("2d");

                    _context.textAlign = "center";
                    _context.fillStyle = "black";
                    _context.font = "16px Verdana";


                    var _getX = function (x) {
                        return _rootX + (x * 80);
                    }

                    var _getY = function(y) {
                        return _rootY + (y * 50);
                    }

                    var _drawText = function(partialText, x, y) {

                        console.log(x, y);
                        _context.fillText(partialText, x, y);
                    }

                    return {
                        drawRoot: function (value) {
                            _drawText(value, _rootX, _rootY);
                        },

                        drawNode: function(value, x, y) {
                            _drawText(value, _getX(x), _getY(y));
                        }
                    }
                });

                var _tree = new TreeDrawer();
                _tree.drawRoot("Raíz");
                _tree.drawNode("Nodo", -1, 1);
                _tree.drawNode("Nodo", 1, 1);

                _tree.drawNode("Nodo", -2, 2);
                _tree.drawNode("Nodo", 0, 2);

                _tree.drawNode("Nodo", 2, 2);
                _tree.drawNode("Nodo", 0, 2);

所以，问题是：我能做些什么来解决这个问题？即绘制树而不重叠。

PS：

我不想要库，因为我的项目是用C ++编写的（使用Qt），所以库不起作用。
在这个例子中，我明确地插入节点，即，我正在调用_tree.drawNode ("Node", 0,2)方法的两倍，很明显节点将重叠。我的意思是，我想在这些情况下制作一个内部方法来调整我的树（我不知道哪个来自服务器端的输入）。
如果有帮助，我可以先验确定树上有多少片树。

Answer 1

有点hacky，但这似乎有效。节点可能会部分重叠，具体取决于stepX大小和每行节点数量。

而不是像你解释的那样使用相对定位。

            (0,0)
            /   \
       (-1,1)     (1,1)
       /    \     /   \
   (-2,2) (0,2) (0,2) (2,2)

我正在使用绝对定位，如下所示：

            (0,0)
            /   \
       (0,1)     (1,1)
       /    \     /   \
   (0,2) (1,2) (2,2) (3,2)

var TreeDrawer = (function(){
    var _depth = 15
    , _breadth = 16
    , _rootX = canvas.width/2
    , _rootY = 59
    ;

    _context.textAlign = "center";
    _context.fillStyle = "black";
    _context.font = "16px Verdana";

    var _drawText = function(partialText, x, y) {
        _context.fillText(partialText, x, y);
    }

    return {
        drawRoot: function (value) {
            _drawText(value, _rootX, _rootY);
        },
        drawNode: function(value, row, position) {
            var stepX = 56;
            var stepY = 32;
            // subtract half from x for symmetry
            var half = (Math.pow(2, row) * stepX) / 2;
            var x = _rootX + (stepX / 2) + (stepX * position) - half;
            var y = _rootY + (stepY * row);
            _drawText(value, x, y);
        }
    }
});

var _tree = TreeDrawer();
var root = "Raiz";
var rows = [
    new Array(2).fill("nodo"), 
    new Array(4).fill("nodo"), 
    new Array(8).fill("nodo"),
    new Array(16).fill("nodo")];

_tree.drawRoot(root);
rows.forEach(function (row, rowIndex) {
    row.forEach(function (node, index) {
        // the root is row zero, so I add 1 for the normal nodes.
        _tree.drawNode(node, rowIndex + 1, index);
    });
});

Overlap with longer text example

编辑：我刚才看到这没有实现分裂效果，很难继续拆分许多行，文本空间每次都减半。

在画布中绘制二叉树时重叠的节点

1 个答案: