[Java] GUI编程基础 绘图

库

• swing
• awt

过程

• 创建窗口JFrame
• JFrame-->MenuBar-->Container

• 屏幕坐标系：左上角为原点
• Graphics2D

 Main.java

import java.awt.EventQueue;
import javax.swing.JFrame;

public class Main {
    public static void main(String[] args) {
        EventQueue.invokeLater(()->{
            AlgoFrame frame = new AlgoFrame("Welcome",500,500);
            //AlgoFrame frame = new AlgoFrame("Welcome");
        });
    }
}

AlgoFrame.java

import java.awt.Dimension;
import java.awt.Graphics;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class AlgoFrame extends JFrame{
    private int canvasWidth;
    private int canvasHeight;
    
    public AlgoFrame(String title, int canvasWidth, int canvasHeight) {
        super(title);
        
        this.canvasWidth = canvasWidth;
        this.canvasHeight = canvasHeight;
        
        AlgoCanvas canvas = new AlgoCanvas();
        setContentPane(canvas);
        pack();
        
        setResizable(false);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setVisible(true);
    }
    
    public AlgoFrame(String title) {
        this(title, 1024, 768);
    }
    
    public int getCanvasWidth() {return canvasWidth;}
    public int getCanvasHeight() {return canvasHeight;}

    private class AlgoCanvas extends JPanel{
        @Override
        public void paintComponent(Graphics g) {
            super.paintComponent(g);
            g.drawOval(50, 50, 300, 300);
        }
        @Override
        public Dimension getPreferredSize() {
            return new Dimension(canvasWidth, canvasHeight);
        }
    }
}    

 

 绘制实心、有颜色的圆形

AlgoFrame.java

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.Ellipse2D;

import javax.swing.JFrame;
import javax.swing.JPanel;

public class AlgoFrame extends JFrame{
    private int canvasWidth;
    private int canvasHeight;
    
    public AlgoFrame(String title, int canvasWidth, int canvasHeight) {
        super(title);
        
        this.canvasWidth = canvasWidth;
        this.canvasHeight = canvasHeight;
        
        AlgoCanvas canvas = new AlgoCanvas();
        setContentPane(canvas);
        pack();
        
        setResizable(false);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setVisible(true);
    }
    
    public AlgoFrame(String title) {
        this(title, 1024, 768);
    }
    
    public int getCanvasWidth() {return canvasWidth;}
    public int getCanvasHeight() {return canvasHeight;}

    private class AlgoCanvas extends JPanel{
        
        @Override
        public void paintComponent(Graphics g) {
            
            super.paintComponent(g);
            
            Graphics2D g2d = (Graphics2D)g;
            
            int strokeWidth = 5;
            g2d.setStroke(new BasicStroke(strokeWidth));
            
            g2d.setColor(Color.RED);
            Ellipse2D circle = new Ellipse2D.Float(50,50,300,300);
            g2d.draw(circle);
            
            g2d.setColor(Color.BLUE);
            Ellipse2D circle2 = new Ellipse2D.Double(50,50,300,300);
            g2d.fill(circle2);
        }
        @Override
        public Dimension getPreferredSize() {
            return new Dimension(canvasWidth, canvasHeight);
        }
    }
}    

优化代码

• 将基本操作抽象为函数
• 创建工具类，把“绘制的工具”和“绘制的内容”分开

AlgoVisHelper.java

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.geom.Ellipse2D;

public class AlgoVisHelper {
    public AlgoVisHelper() {}
    public static void setStrokeWidth(Graphics2D g2d, int w) {
        int strokeWidth = w;
        g2d.setStroke(new BasicStroke(strokeWidth, BasicStroke.CAP_ROUND,BasicStroke.JOIN_ROUND));
    }
    public static void setColor(Graphics2D g2d, Color color) {
        g2d.setColor(color);
    }
    public static void strokeCircle(Graphics2D g2d, int x, int y, int r) {
        Ellipse2D circle = new Ellipse2D.Double(x-r, y-r, 2*r, 2*r);
        g2d.draw(circle);
    }
    public static void fillCircle(Graphics2D g2d, int x, int y, int r) {
        Ellipse2D circle = new Ellipse2D.Double(x-r, y-r, 2*r, 2*r);
        g2d.fill(circle);
    }
}

抗锯齿（Anti-Aliased）

• 用不同的灰度渲染边缘
• 框架学习的关键：是否知道（勤查文档）

双缓存（Double-Buffered）

• 单缓存的问题：动画中图形位置的刷新导致闪烁（画布清空）
• 如何解决：用两块画布
• JPanel 支持双缓存

AlgoFrame.java

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;

import javax.swing.JFrame;
import javax.swing.JPanel;

public class AlgoFrame extends JFrame{
    private int canvasWidth;
    private int canvasHeight;
    
    public AlgoFrame(String title, int canvasWidth, int canvasHeight) {
        super(title);
        
        this.canvasWidth = canvasWidth;
        this.canvasHeight = canvasHeight;
        
        AlgoCanvas canvas = new AlgoCanvas();
        setContentPane(canvas);
        pack();
        
        setResizable(false);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setVisible(true);
    }
    
    public AlgoFrame(String title) {
        this(title, 1024, 768);
    }
    
    public int getCanvasWidth() {return canvasWidth;}
    public int getCanvasHeight() {return canvasHeight;}

    private class AlgoCanvas extends JPanel{
        
        public AlgoCanvas() {
            super(true);
        }
        
        @Override
        public void paintComponent(Graphics g) {
            
            super.paintComponent(g);
            
            Graphics2D g2d = (Graphics2D)g;
            
            //抗锯齿
            RenderingHints hints = new RenderingHints(
                                        RenderingHints.KEY_ANTIALIASING, 
                                        RenderingHints.VALUE_ANTIALIAS_ON);
            g2d.addRenderingHints(hints);
            
            //具体绘制
            AlgoVisHelper.setStrokeWidth(g2d, 5);
            
            AlgoVisHelper.setColor(g2d,Color.BLUE);
            AlgoVisHelper.fillCircle(g2d, canvasWidth/2, canvasHeight/2, 200);
            
            AlgoVisHelper.setColor(g2d,Color.RED);
            AlgoVisHelper.strokeCircle(g2d, canvasWidth/2, canvasHeight/2, 200);        
        }
        @Override
        public Dimension getPreferredSize() {
            return new Dimension(canvasWidth, canvasHeight);
        }
    }
}