java GUI 入门

只会整理特别基础的java GUI，为后续的算法可视化打下基础

---

我们平时如果想画一张画首先应该有画板作为支架，然后将画布固定在画板上，然后我们就可以使用画笔画各种好看的图案了。如图：

paint.png

java 中的GUI的思想就是和上面一致，抽象出了三个组件供我们使用他们分别是：
画板--------------> JFrame
画布--------------> JPanel
画笔--------------> Graphics

1.定义画板JFrame

public static void main(String args[]){
       //创建一个窗口,并设置窗口标题为"welcome"
        JFrame jFrame = new JFrame("welcome");
        //指定窗口大小500px*500px
        jFrame.setSize(500,500);
        //设置点击‘x’关闭窗口
        jFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        //固定窗口大小
        jFrame.setResizable(false);
        //显示窗口
        jFrame.setVisible(true);
}

显示效果：

image.png

这仅仅只是一个窗口，什么都干不了，就像日常生活中我们想画画但是只拿到了画板是一样的。要想画画，必须将画布固定在画板上，然后使用画笔进行绘画。
我们定义的画板大多数都是相同的，多以我们为了避免主函数有过多的控制语句，我们可以继承 JFrame增强这个类，减少主函数的工作量。

public class AlgoFrame extends JFrame {

    /**
     * 窗口宽度
     */
    private int canvasWidth;

    /**
     * 窗口高度
     */
    private int canvasHeight;

    /**
     * 构建一个指定大小，点击‘x’可以关闭的可视化窗口
     * @param title 标题
     * @param canvasWidth 窗口宽度
     * @param canvasHeight 窗口高度
     */
    public AlgoFrame(String title,int canvasWidth,int canvasHeight){
        super(title);
        this.canvasWidth = canvasWidth;
        this.canvasHeight = canvasHeight;
        this.setSize(canvasWidth,canvasHeight);
        //设置窗口内容面板
        this.setContentPane(canvas);
        this.setResizable(false);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setVisible(true);
    }

    /**
     * 默认大小为1024*768
     * @param title 窗口标题
     */
    public AlgoFrame(String title){
        this(title,1024,768);
    }

    public int getCanvasWidth() {
        return canvasWidth;
    }

    public int getCanvasHeight() {
        return canvasHeight;
    }
}

2. 固定画布JPanel

为了方便我们使用，首先定义一个类，继承该JPanel

private class AlgoCanvas extends JPanel{}

然后我们就可以定义画布的大小并且将画布固定在画板上了。
更新AlgoFrame构造函数：

public AlgoFrame(String title,int canvasWidth,int canvasHeight){
        super(title);
        this.canvasWidth = canvasWidth;
        this.canvasHeight = canvasHeight;

        AlgoCanvas canvas = new AlgoCanvas();
        //设置窗口内容面板大小
        canvas.setPreferredSize(new Dimension(canvasWidth,canvasHeight));
        // 通过panel控制窗口大小，不再使用frame控制大小，
        /// this.setSize(canvasWidth,canvasHeight);
        //设置窗口内容面板（）
        this.setContentPane(canvas);
        //设置窗口和内容面板保持一致
        this.pack();
        this.setResizable(false);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setVisible(true);
}

3. 使用画笔Graphics

画笔由JPanel类的paintComponent方法提供，将JPanel注册到JFrame后，系统会自动调用paintComponent绘制相关图案。我们只需要将绘画的逻辑写到该方法中，系统便会自动进行绘制。

    private class AlgoCanvas extends JPanel{
        /**
         *
         * @param g 绘制上下文环境
         */
        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            // 原来的API比较老旧，可以使用强制类型转换将g转换成版本较新的g
            Graphics2D g2d = (Graphics2D) g;
            //定义画笔粗细
            int strokeWidth = 10;
          // 设置画笔颜色
            g2d.setColor(Color.RED);
            //设置画笔粗细
            g2d.setStroke(new BasicStroke(strokeWidth));
            //定义一个圆形，他是先设置一个矩形的容器（该容器不可见），然后在矩形的容器里面绘制图形，
            //第一个和第二个参数分别表示矩形容器的左上角坐标，后面两个参数分别代表容器的宽和高
            Ellipse2D circle = new Ellipse2D.Float(50,50,300,300);
            //使用画笔绘制图像
            g2d.draw(circle);
        }
        /**
         * 设置画布的尺寸
         */
        @Override
        public Dimension getPreferredSize(){
            return new Dimension(canvasWidth,canvasHeight);
        }
    }

演示效果：

image.png