文章目录
前言
感觉标题很熟悉的就对了，因为其实这是我碰到了一个作业要画出树，然后就百度了一下，参考了另一位学者kakashi8841（姑且就这么叫吧）的文章和代码，才做完了作业。
原文链接: 用Java2D画出树的结构v0.1.0
本文的内容就是改进了原文的Bug，所以说大部分和原文很像。我也是第一次用这个博客希望能和大家分享学习经验（大佬可以无视这个文章的内容，因为很简单），给遇到苦难的同学学者们一点小小的帮助（以后还指望你们帮我呢）。
效果预览
代码部分
1. 树的数据结构Tnode
package tree;
import MutableInteger.MutableInteger;
import java.util.LinkedList;
import java.util.List;
public class Tnode {
private String name; //该结点名字
private int layer = 0; //该结点层级
private int x = -1; //x坐标
private List<Tnode> childs = null; //保存该结点的孩子
public Tnode(String name) { this.name = name; }
public Tnode() { this.name = null; }
public void add(Tnode n) {
if (childs==null)
childs = new LinkedList<Tnode>();//这里可以改为ArrayList
n.layer = this.layer + 1;
setChildLayer(n);
childs.add(n);
}
private void setChildLayer(Tnode n) {//递归设置层级，深度优先
if (n.hasChild()) {
List<Tnode> c = n.getChilds();
for (Tnode node : c) {
node.layer = n.layer + 1;
setChildLayer(node);
}
}
}
public void CoordinateProcess(MutableInteger maxX, MutableInteger maxY) { CoordinateProcess(this, maxX, maxY); }
public static void CoordinateProcess(Tnode n, MutableInteger maxX, MutableInteger maxY) {
//max其实是用来布置画布的大小而设置的返回值
//默认的根节点坐标是(0,0)，即x=0,layer=0
setx(n, new MutableInteger(0), maxX, maxY);
}
private static void setx(Tnode n, MutableInteger va, MutableInteger maxX, MutableInteger maxY) {//va其实只是用来保存中间结果用来调用的
if (n.hasChild()) {
List<Tnode> c = n.getChilds();
c.get(0).x = va.value;
setx(c.get(0), va, maxX, maxY);
for (int i=1; i<c.size(); i++) {
setx(c.get(i), va, maxX, maxY);
}
n.x = c.get(0).x;//本结点的x是第一个孩子的x
} else {
n.x = va.value++;
}
//保存最大的x,y返回
if (n.getX()>maxX.value) {
maxX.value = n.getX();
}
if (n.getLayer()>maxY.value) {
maxY.value = n.getLayer();
}
}
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public int getLayer() { return layer; }
public int getX() { return x; }
public void setLayer(int layer) { this.layer = layer; }
public List<Tnode> getChilds() { return childs; }
public void setChilds(List<Tnode> childs) { this.childs = childs; }
public boolean hasChild() { return childs==null ? false : true; }
public void printAllNode(Tnode n) {//递归打印所有结点，深优
System.out.println(n.toString());
if (n.hasChild()) {
List<Tnode> c = n.getChilds();
for (Tnode node : c) {
printAllNode(node);
}
}
}
public void printAllNode() { printAllNode(this); }
public String getAllNodeName(Tnode n) {
String s = n.toString()+"/n";
if (n.hasChild()) {
List<Tnode> c = n.getChilds();
for (Tnode node : c) {
s += getAllNodeName(node)+"/n";
}
}
return s;
}
public String getAllNodeName() { return getAllNodeName(this); }
public String toString() { return name; }
}
一般的学生应该都挺熟悉这种数据结构，基本沿用原文的内容。相比原文我多了一个画树的关键步骤：CoordinateProcess。后来这个函数又跳到了setx。其实很好理解，在原来的基础下我们可以计算出每个数结点的y坐标，我只不过加了一个计算x坐标的方法。看上去调用有点冗余，这也是有原因的：
- 内部方法public void CoordinateProcess(MutableInteger maxX, MutableInteger maxY) 是为了方便其他地方调用，但是使用时要逻辑清晰。根节点使用这个方法才有效，否则只会计算一部分的x依然无法得到正确的坐标。正确写法应该是root.CoordinateProcess(maxX, maxY);
- 静态方法public static void CoordinateProcess(Tnode n, MutableInteger maxX, MutableInteger maxY) 其实是递归的外壳，因为递归需要保存中间参数进行计算但是外部却不需要，所以这个外壳才是外部调用是用到的函数。正确写法是CoordinateProcess(root, maxX, maxY);
- 具体的实现是递归的静态方法private static void setx(Tnode n, MutableInteger va, MutableInteger maxX, MutableInteger maxY)
说实话这个部分代码的核心就是计算结点的坐标（x， y）。计算y其实就是计算结点的层数，这个很好理解，在源码中也有计算。计算x坐标就稍微需要思考一下。因为存在画出来的问题，所以要保证同一层的结点能够放下，就是坐标x不能重叠，否则会出现原文的类似错误。于是改进方法如下：
- 规定每一层从左往右开始画，而不是像原文可以从中间开始
- 规定子树的第一个结点（姑且称之为长子）跟在父结点的下面一个，即x不变，y+1
- 父结点的下一个结点（姑且称为他弟弟）实际上不能直接跟在哥哥的后面。这是因为如果弟弟存在子结点，哥哥也存在多个子结点，弟弟的子结点就会与哥哥的子结点位置冲突。所以弟弟的位置必须跟在哥哥所有子树中最右边一个的右边（也就是x坐标）。
具体的算法其实是我自己想出来的，并没有考虑算法的效率
private static void setx(Tnode n, MutableInteger va, MutableInteger maxX, MutableInteger maxY) {//va其实只是用来保存中间结果用来调用的
if (n.hasChild()) {
List<Tnode> c = n.getChilds();
c.get(0).x = va.value;//本结点沿用父结点坐标，见方法第1条
setx(c.get(0), va, maxX, maxY);//先对哥哥的子结点递归计算，见方法第3条
for (int i=1; i<c.size(); i++) {//之后再对弟弟机器子结点递归计算，见方法第3条
setx(c.get(i), va, maxX, maxY);
}
n.x = c.get(0).x;//本结点的x是其第一个孩子的x，是不是感觉和上面重复了，其实并不是。这一步其实很重要，因为计算后并不是每个孩子都和父亲一样，只有长子是和父亲一样的x，其他都不是，所以必须要这一步。
} else {
n.x = va.value++;
}
//保存最大的x,y返回，这个只是为了确定画板大小的附加功能
if (n.getX()>maxX.value) {
maxX.value = n.getX();
}
if (n.getLayer()>maxY.value) {
maxY.value = n.getLayer();
}
}
2. MutableInteger（只是一个为了传递可变整数的工具）
package MutableInteger;
public class MutableInteger {//为了函数返回值而写的类
public int value;
public MutableInteger(int x) { value = x; }
public MutableInteger() { value = 0; }
public boolean equals(int x) {
if ( x==value )
return true;
else
return false;
}
public int getValue() { return value; }
public void setValue(int value) { this.value = value; }
}
3. 实现把树画到画板上的TreePanel
package tree;
import java.awt.*;
import java.util.List;
import javax.swing.JPanel;
public class TreePanel extends JPanel {
private static final long serialVersionUID = 1L;
private Tnode tree; //保存整棵树
private int gridWidth = 170; //每个结点的宽度
private int gridHeight = 20; //每个结点的高度
private int vGap = 50; //每2个结点的垂直距离
private int hGap = 30; //每2个结点的水平距离
private int startY = 10; //根结点的Y，默认距离顶部10像素
private int startX = 10; //根结点的X，默认距离左端10像素
//改进之后的程序呢就不是原文的对对齐方式啦，所以下面几行是没用的
//private int childAlign; //孩子对齐方式
//public static int CHILD_ALIGN_ABSOLUTE = 0; //相对Panel居中
//public static int CHILD_ALIGN_RELATIVE = 1; //相对父结点居中
private Font font = new Font("微软雅黑",Font.BOLD,14); //描述结点的字体
private Color gridColor = Color.BLACK; //结点背景颜色
private Color linkLineColor = Color.BLACK; //结点连线颜色
private Color stringColor = Color.WHITE; //结点描述文字的颜色
/*放弃了原文的内容，这是由于我们只有一种画法，而不是中间对其或是左对齐等
public TreePanel() { this(null,CHILD_ALIGN_ABSOLUTE); }
public TreePanel(Tnode n) { this(n,CHILD_ALIGN_ABSOLUTE); }
public TreePanel(int childAlign) { this(null,childAlign); }
public TreePanel(Tnode n, int childAlign) {
super();
setTree(n);
this.childAlign = childAlign;
}
*/
public TreePanel() { this(null); }
public TreePanel(Tnode n) {
super();
setTree(n);
}
public void setTree(Tnode n) { tree = n; }
//重写，调用自己的绘制方法
public void paintComponent(Graphics g) {
//startX = (getWidth()-gridWidth)/2;//这是居中方式的设置，放弃原文方法
super.paintComponent(g);
g.setFont(font);
drawAllNode(tree, g);
}
/**
* 递归绘制整棵树
* n 被绘制的Node
* xPos 根节点的绘制X位置
* g 绘图上下文环境
*/
public void drawAllNode(Tnode n, Graphics g) {
/*
int y = n.getLayer()*(vGap+gridHeight)+startY;
int fontY = y + gridHeight - 5; //5为测试得出的值，你可以通过FM计算更精确的，但会影响速度
g.setColor(gridColor);
g.fillRect(x, y, gridWidth, gridHeight); //画结点的格子
g.setColor(stringColor);
g.drawString(n.toString(), x, fontY); //画结点的名字
if (n.hasChild()) {
List<Tnode> c = n.getChilds();
int size = n.getChilds().size();
int tempPosx = childAlign == CHILD_ALIGN_RELATIVE
? x+gridWidth/2 - (size*(gridWidth+hGap)-hGap)/2
: (getWidth() - size*(gridWidth+hGap)+hGap)/2;
int i = 0;
for (Tnode node : c) {
int newX = tempPosx+(gridWidth+hGap)*i; //孩子结点起始X
g.setColor(linkLineColor);
g.drawLine(x+gridWidth/2, y+gridHeight, newX+gridWidth/2, y+gridHeight+vGap); //画连接结点的线
drawAllNode(node, newX, g);
i++;
}
}
*/
//改进一个非递归算法，用我们自己计算的坐标画树，这样结点就不会重叠啦
int y = n.getLayer()*(vGap+gridHeight)+startY;
int x = n.getX()*(hGap+gridWidth)+startX;
int fontY = y + gridHeight - 5; //5为测试得出的值，你可以通过FM计算更精确的，但会影响速度
g.setColor(gridColor);
g.fillRoundRect(x, y, gridWidth, gridHeight, 10, 10); //画结点的格子
g.setColor(stringColor);
g.drawString(n.toString(), x+5, fontY); //画结点的名字
if (n.hasChild()) {
g.setColor(linkLineColor);
g.drawLine(x+gridWidth/2, y+gridHeight, x+gridWidth/2, y+gridHeight+vGap/2);
List<Tnode> c = n.getChilds();
int i = 0;
for (Tnode node : c) {
int newX = node.getX()*(hGap+gridWidth)+startX; //孩子结点起始X
g.setColor(linkLineColor);
g.drawLine(newX+gridWidth/2, y+gridHeight+vGap/2, newX+gridWidth/2, y+gridHeight+vGap);
drawAllNode(node, g);
i++;
if (i==c.size()) {
g.setColor(linkLineColor);
g.drawLine(x+gridWidth/2, y+gridHeight+vGap/2, newX+gridWidth/2, y+gridHeight+vGap/2);
}
}
}
}
public Color getGridColor() { return gridColor; }
public void setGridColor(Color gridColor) { this.gridColor = gridColor; }
public Color getLinkLineColor() { return linkLineColor; }
public void setLinkLineColor(Color gridLinkLine) { this.linkLineColor = gridLinkLine; }
public Color getStringColor() { return stringColor; }
public void setStringColor(Color stringColor) { this.stringColor = stringColor; }
public int getStartY() { return startY; }
public void setStartY(int startY) { this.startY = startY; }
public int getStartX() { return startX; }
public void setStartX(int startX) { this.startX = startX; }
public int getGridWidth() { return gridWidth; }
public void setGridWidth(int gridWidth) { this.gridWidth = gridWidth; }
public int getGridHight() { return gridHeight; }
public void setGridHeight(int gridHeight) { this.gridHeight = gridHeight; }
public int getVGap() { return vGap; }
public void setVGap(int vGap) { this.vGap = vGap; }
public int getHGap() { return hGap; }
public void setHGap(int hGap) { this.hGap = hGap; }
}
如果没有接触过这个部分，的确有可能看不懂。稍微解释一下，这个JPanel就是指画板，我们就是在上面作画。之前的一些常数只是设置结点的的长宽和间隙之类的，不是特别重要。最后的部分也只是一些普通方法的重写，没什么重大意思。
其实在知道整个数的坐标之后，画树的任务就非常简单了，只要读取坐标然后画出来就行了。注意每个结点之间相连接的线的画法和遵循的数学规律。
4. 建立窗口测试Test
import java.awt.*;
import javax.swing.*;
import java.io.File;
import java.util.ArrayList;
import MutableInteger.MutableInteger;
import tree.*;
public class TestForCompile extends JFrame{
public Tnode tree;
private static final long serialVersionUID = 1L;
public TestForCompile(Tnode t){
super("Test Draw Tree");
tree = t;
MutableInteger maxx = new MutableInteger();
MutableInteger maxy = new MutableInteger();
Tnode.CoordinateProcess(t, maxx, maxy);//画树前必须对树的坐标处理
initComponents(maxx, maxy);
}
public static void main(String[] args){
File source = new File("input.txt");
File target = new File("output.txt");
//File target2 = new File("SyntacticTree.txt");
ArrayList<ID> iDList = new ArrayList<ID>();
new LexicalAnalysis(source,target,iDList).analysisBegin();
SyntacticAnalysis sa = new SyntacticAnalysis(target,iDList);
sa.analysisBegin();
//以上是我作业的内容，当然和本章内容无关。也不能让大家光抄代码，好学的大家只要修改一下就能画出来啦
if ( sa.correctnessFlag ) {
//new TreePrinter(sa.SyntacticTree, target2).PrintBegin();
TestForCompile frame = new TestForCompile(sa.SyntacticTree);//调用构造函数其实就完成了绘图
frame.setSize(800, 600);//设置窗口的大小，其实窗口这么小放不下我们这么大的树，所以我们只要让画板可以有滚动条就能显示全了（这个原文没有哦）
frame.setVisible(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
public void initComponents(MutableInteger maxX, MutableInteger maxY){
TreePanel panel1 = new TreePanel(tree);
/*
TreePanel panel2 = new TreePanel(tree);
panel2.setBackground(Color.BLACK);
panel2.setGridColor(Color.WHITE);
panel2.setLinkLineColor(Color.WHITE);
panel2.setStringColor(Color.BLACK);
*/
JPanel contentPane = new JPanel();
contentPane.setLayout(new GridLayout());
contentPane.add(panel1);//我们就画一棵树，原文画了两棵树我都注释掉了
//contentPane.add(panel2);
JScrollPane scrollPane = new JScrollPane(
ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS,
ScrollPaneConstants.HORIZONTAL_SCROLLBAR_ALWAYS);
//上一步设置了滚动条是否可见，大家可以改成as_needed看看效果
scrollPane.setViewportView(contentPane);//这一步是能看到画面的必要一步
//这一步开始设置了画板的大小，这个大小是根据最大的x,y和各个结点的长宽和间距计算的，然后把这个画板add到一个带滚动条的画板里就能滚动着看啦
contentPane.setPreferredSize(
new Dimension(
(maxX.getValue())*(panel1.getGridWidth()+panel1.getHGap()) + panel1.getGridWidth() + panel1.getStartX()*2,
(maxY.getValue())*(panel1.getGridHight()+panel1.getVGap()) + panel1.getGridHight() + panel1.getStartY()*2));
contentPane.revalidate();
//horizontalScandocDRPane.add(scrollPane);
//this.add(scrollPane);
this.add(scrollPane,BorderLayout.CENTER);
}
}
总结
想要画一棵树有两个关键点，一个是计算数每一个结点(x, y)坐标的算法和一个画出树的方法调用。这两个关键点分别在Tnode和TreePanel中大家自己看哦。
我几乎把完整的代码都给了大家，但也不是全部，各位同学们自己想办法稍微修改一下，就可以把自己的树给画出来了。
后记
大家在我给的Test中也看到了这其实是一个语法分析生成的语法树，至于我会不会在写一个怎么生成语法树，看看评论而定吧。到时候我在完善一下可以在语法树中搜索词（当然是用树的数据结构的方法，这个其实我都没有写）。
扫一扫
1801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
