树型界面绘制算法（一）算法背景介绍

目录

 

前言

输入输出

基本原理

---

前言

很久没更新博客，也没什么人（笑～），但是在翻以前博客的时候，才发现自己曾经认真去做过一些事，算是自己感动自己吧。

单纯转一些东西没什么意思，继续记一些有思想的东西。这次介绍的是一个89年的老算法，用于绘制树形界面图形，比我年纪还要大，原文是这样子的：

                                                      《A Node-Positioning Algorithm for General Trees》

研究过的大神可以右上角退出了，这并不是一个可以直接用的插件，本系列介绍的也仅仅是它的算法思想，国外对于该算法还有更深入的优化研究，这里不做介绍。

输入输出

译者前后折腾了一个多月，勉强写出了一个测试Demo，程序的输入是一个xml文档：

<?xml version="1.0" encoding="utf-8" ?>
<O>
    <E>
        <A/>
        <D>
            <B/>
            <C/>
        </D>
    </E>
    <F/>
    <N>
        <G>
        </G>
        <M>
            <H/>
            <I/>
            <J/>
            <K/>
            <L/>
        </M>
    </N>
</O>

输出的是一个用qml实现的显示界面：

咳咳，虽然目前样子丑了点了，但是它的动态可扩展性是非常强的，因为不同业务对界面要求不同，目前译者没有看到该算法的模块化，有相应需求的开发人员需要深入理解其原理自己实现。

基本原理

该算法对于生成界面节点元素要求如下：

1. Nodes at the same level of the tree should lie along a straight line, and the straight lines defining the levels should be parallel.（相同深度节点应排成一条直线，且直线间相互平行）

2. A parent should be centered over its offspring.（父节点在所有子节点上方中心位置）

3. A tree and its mirror image should produce drawings that are refiections of one another（不翻译了，意会一下，和我们常见的树形图差不多）

将逻辑上的树型关系转化为界面显示的x坐标，该算法只使用两次递归逻辑：

Two tree traversals are used to produce the final x-coordinate of a node.The first traversal assigns the preliminary x-coordinate and modifier fields for each node; the second traversal computes the final x-coordinate of each node by summing the node's preliminary x-coordinate with the modifier fields of all of its ancestors.

（第一次递归分配每个节点的初始x坐标和修正字段；第二次递归根据初始x坐标和所有祖先的修正字段，计算出每个节点的最终x坐标。）

该书原作者John Q Walker算法写于1989年并沿用至今，首先向大佬致敬～

其次，大佬说的“只有两步”，别太当真。