Day 17：Java GUI (六)

2025 iThome 鐵人賽

DAY 17

Software Development

30天從基礎學起Java，直到做出我的第一個遊戲系列第 17 篇

17th鐵人賽

ahbiee79

2025-08-31 18:23:48

96 瀏覽

分享至

今日內容：2D graphics

2D graphics

是用來畫圖功能基於Component class(他的parent class)，有一個paint method
我們使用Graphics2D，因為他比起Graphics有更多操作且更簡單
如果想要在myFrame裡面進行paint:

import javax.swing.*;
import java.awt.*;

public class MyFrame extends JFrame{
    MyFrame(){
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setLayout(null);
        this.setSize(500, 500);
        this.setLocationRelativeTo(null); // 將視窗生成在螢幕正中心，而非左上角
        this.setVisible(true);
    }

    @Override
    public void paint(Graphics g){
        Graphics2D g2D = (Graphics2D) g; // 將原本的g轉為g2D

        // 然後用g2D進行畫面生成
        g2D.drawLine(0, 0, 500, 500);
    }
}

不過如果我們只在myFrame裡面畫，他的0,0並非我們看到的左上角，而是會被上面的bar擋住
所以改成在myPanel裡面paint，然後將他加入myFrame

import javax.swing.JPanel;
import java.awt.*;

public class MyPanel extends JPanel{
    MyPanel(){
        this.setPreferredSize(new Dimension(500, 500));
    }

    @Override
    public void paint(Graphics g){
        Graphics2D g2D = (Graphics2D) g;

        g2D.drawLine(0, 0, 500, 500);
    }
}

import javax.swing.*;
import java.awt.*;

public class MyFrame extends JFrame{
    MyPanel panel;

    MyFrame(){
        panel = new MyPanel();
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.add(panel);
![/images/emoticon/emoticon43.gif](/images/emoticon/emoticon43.gif)
        this.pack();
        this.setLocationRelativeTo(null); // 將視窗生成在螢幕正中心，而非左上角
        this.setVisible(true);
    }


}

我們可以在這個paint method中做很多有關繪圖的操作

import javax.swing.JPanel;
import java.awt.*;

public class MyPanel extends JPanel{
    MyPanel(){
        this.setPreferredSize(new Dimension(500, 500));
    }

    @Override
    public void paint(Graphics g){
        Graphics2D g2D = (Graphics2D) g;

        g2D.setPaint(Color.blue); // 設定畫筆顏色, 也可以用setColor
        g2D.setStroke(new BasicStroke(5)); // 設定畫筆粗細
        g2D.drawLine(0, 0, 500, 500); // 劃一條線(x1, y1, x2, y2)
        g2D.setPaint(Color.pink);
        g2D.drawRect(0, 0, 100, 200); // 畫空心長方形(x, y, width, height)
        g2D.fillRect(0, 0, 100, 200); // 畫實心長方形(x, y, width, height)

        g2D.setPaint(Color.orange);
        g2D.drawOval(0, 0, 100, 100); // 畫空心圓形(同上)
        g2D.fillOval(0, 0, 100, 100); // 畫實心圓形(同上)

        g2D.setPaint(Color.red);
        g2D.fillArc(0, 0, 100, 100, 0, 180);
        // 畫實心弧度(x, y, width, height, 開始弧度, 畫多少度)，drawArc是劃一條弧度線
        g2D.setPaint(Color.white);
        g2D.fillArc(0,0,100,100,180,180);
    }
}

簡單操作一下可以畫出神奇寶貝球

// 在paint中執行這些指令
g2D.setPaint(Color.red);
g2D.fillArc(0, 0, 100, 100, 0, 180);
g2D.setPaint(Color.white);
g2D.fillArc(0,0,100,100,180,180);
g2D.setPaint(Color.black);
g2D.fillOval(25,25,50,50);
g2D.setStroke(new BasicStroke(5));
g2D.drawLine(0, 50, 100, 50);
g2D.drawArc(0, 0, 100, 100, 0, 360);
g2D.setPaint(Color.white);
g2D.fillOval(35, 35, 30, 30);

也可以用來畫多邊形

int[] xPoints = {150, 250, 350};
int[] yPoints = {300, 150, 300};
g2D.setPaint(Color.yellow);
g2D.fillPolygon(xPoints, yPoints, 3); //畫多邊形，(x點陣列，y點陣列, 點的數量)
// 一樣fill是實心，draw是空心

再來也可以寫字(String)
注意String的起始位址不可設為0,0，因為起始位址是設定第一個字的左下角位址，因此如果設為0, 0會超出視窗範圍

g2D.setPaint(Color.magenta);
g2D.setFont(new Font("Ink Free", Font.BOLD, 50));
g2D.drawString("U R A WINNER!", 50, 50); // (String, x, y)

最後是設置背景+全部組合起來

import javax.swing.JPanel;
import java.awt.*;
import javax.swing.ImageIcon;

public class MyPanel extends JPanel{
    Image image;

    MyPanel(){
        image = new ImageIcon("background.png").getImage();
        this.setPreferredSize(new Dimension(500, 500));
    }

    public void paint(Graphics g){
        Graphics2D g2D = (Graphics2D) g;

        g2D.drawImage(image, 0, 0, null);

        g2D.setPaint(Color.blue); // 設定畫筆顏色

        g2D.setPaint(Color.red);
        g2D.fillArc(0, 0, 100, 100, 0, 180);
        g2D.setPaint(Color.white);
        g2D.fillArc(0,0,100,100,180,180);
        g2D.setPaint(Color.black);
        g2D.fillOval(25,25,50,50);
        g2D.setStroke(new BasicStroke(5));
        g2D.drawLine(0, 50, 100, 50);
        g2D.drawArc(0, 0, 100, 100, 0, 360);
        g2D.setPaint(Color.white);
        g2D.fillOval(35, 35, 30, 30);

        int[] xPoints = {150, 250, 350};
        int[] yPoints = {300, 150, 300};
        g2D.setPaint(Color.yellow);
        g2D.fillPolygon(xPoints, yPoints, 3);

        g2D.setPaint(Color.magenta);
        g2D.setFont(new Font("Ink Free", Font.BOLD, 50));
        g2D.drawString("U R A WINNER!", 100, 50);
    }
}