Java入門：繪制簡單圖形

在上一節，我們學習了如何使用swing和awt工具創建一個空的窗口，本節學習如何繪制簡單圖形。

基本繪圖介紹

Java中繪制基本圖形，可以使用Java類庫中的Graphics類，此類位於java.awt包中。在我們自己的java程序文件中，要使用Graphics類就需要使用import java.awt.Graphics語句將Graphics類導入進來。

Graphics類提供基本的幾何圖形繪制方法，主要有：畫線段、畫矩形、畫圓、畫帶顏色的圖形、畫橢圓、畫圓弧、畫多邊形等。本項目僅用到畫直線的功能，其它圖形繪制請自行點擊查閱Java API。

Graphics類的drawLine()方法：drawLine(int x1,int y1,int x2,int y2)

此方法的功能是：在此圖形上下文的坐標系中，使用當前顏色在點 (x1,y1) 和 (x2,y2)之間畫一條線。

這里需要理解幾個概念：

1)圖形上下文：通俗點講，就是畫圖環境。每個窗口構件（如主窗口、按鈕等），都有一個自己的圖形上下文對象，我們就是使用這個對象來實現在構件上畫圖。這個對象就是Graphics對象。

2)如何獲得圖形上下文：我們要在哪個構件上繪圖，就調用那個構件的getGraphics()方法即可獲得該構件的圖形上下文對象，然后使用這個對象繪圖。

3)Java坐標系：

Java的坐標原點（0，0）位於 屏幕的左上角，坐標度量以象素為單位，水平向右為X軸的正方向，豎直向下為Y軸的正方向，每個坐標點的值表示屏幕上的一個像素點的位置，所有坐標點的值都取整數，如下圖所示。

4)當前顏色：指圖形上下文當前的顏色。每個圖形上下文都有自己當前的顏色。通過Graphics對象的getColor()方法可獲取改顏色，setColor()方法可設置顏色。

實踐訓練：繪制游戲區域

第一步：給DrawSee類添加成員變量，用來描述游戲區域的特征。

對DrawSee類來說，此類主要完成的功能是與用戶交互，即顯示游戲區域，顯示數字，響應用戶鼠標點擊，顯示用戶鼠標點擊后的結果等。我們現在考慮繪制10行10列游戲區域的問題。先給DrawSee類添加如下四個成員變量：

DrawSee.java文件

import java.awt.Color;
import java.awt.Container;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;

import javax.swing.JFrame;

public class DrawSee extends JFrame {
    private static final int sx = 50;//游戲區域10*10方塊的起始橫坐標
    private static final int sy = 50;//游戲區域10*10方塊的起始縱坐標
    private static final int w = 40;//每個小方格的邊長
    private static final int rw = 400;//游戲區域10*10方塊的邊長
    ...
}

之所以把這些成員作為DrawSee類的成員變量，而沒有作為某個成員方法的局部變量，這是因為這幾個變量所描述的是DrawSee這個窗口的特征，把他們作為類成員變量更符合邏輯。但是，這幾個變量只在下面第二步描述的方法中用過，其它方法中並沒有使用，所以即使你將這介個變量定義在paintComponent()方法里面，也不會出現錯誤，程序仍能得到正確結果。

 

第二步：添加繪制游戲區域的方法（即繪制10行10列的紅色網格）

DrawSee.java文件

    public void paintComponents(Graphics g) {
        try {
            
            // 設置線條顏色為紅色
            g.setColor(Color.RED);
            
            // 繪制外層矩形框
            g.drawRect(sx, sy, rw, rw);
            
            /* 繪制水平10個，垂直10個方格。
             * 即水平方向9條線，垂直方向9條線，
             * 外圍四周4條線已經畫過了，不需要再畫。
             * 同時內部64個方格填寫數字。
             */
            for(int i = 1; i < 10; i ++) {
                // 繪制第i條豎直線
                g.drawLine(sx + (i * w), sy, sx + (i * w), sy + rw);
                
                // 繪制第i條水平線
                g.drawLine(sx, sy + (i * w), sx + rw, sy + (i * w));
                
                
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

為簡單起見，我們在DrawSee類的構造方法中直接調用 paintComponents方法，讓其繪制10行10列的游戲網格。（重載paint方法，在其中繪制才是合理的選擇）這里直接調用paintComponents會看不到繪圖結果，需要在調用paintComponents之前插入一段代碼，讓進程等待500毫秒。代碼見第48至61行：

DrawSee.java文件

import java.awt.Color;
import java.awt.Container;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;

import javax.swing.JFrame;
  

/**
 * 
 * 程序入口
 *
 */
public class TestDrawLine {   
    public static void main(String[] args) {   
        new DrawSee();
    }   
}   

class DrawSee extends JFrame {
    
    private static final int sx = 50;//小方格寬度
    private static final int sy = 50;//小方格高度
    private static final int w = 40;
    private static final int rw = 400;
    
    
    private Graphics jg;
    
    
    
    private Color rectColor = new Color(0xf5f5f5);
    
    /**
     * DrawSee構造方法
     */
    public DrawSee() {
        Container p = getContentPane();
        setBounds(100, 100, 500, 500);
        setVisible(true);
        p.setBackground(rectColor);
        setLayout(null);   
        setResizable(false);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);        
        
        try {
            
            
            
            Thread.sleep(500);
        } catch (Exception e) {
            e.printStackTrace();
        }        

        // 獲取專門用於在窗口界面上繪圖的對象
        jg =  this.getGraphics();
        
        // 繪制游戲區域
        paintComponents(jg);
        
        
    }
    
    
    
    public void paintComponents(Graphics g) {
        try {
            
            // 設置線條顏色為紅色
            g.setColor(Color.RED);
            
            // 繪制外層矩形框
            g.drawRect(sx, sy, rw, rw);
            
            /* 繪制水平10個，垂直10個方格。
             * 即水平方向9條線，垂直方向9條線，
             * 外圍四周4條線已經畫過了，不需要再畫。
             * 同時內部64個方格填寫數字。
             */
            for(int i = 1; i < 10; i ++) {
                // 繪制第i條豎直線
                g.drawLine(sx + (i * w), sy, sx + (i * w), sy + rw);
                
                // 繪制第i條水平線
                g.drawLine(sx, sy + (i * w), sx + rw, sy + (i * w));
                
                // 填寫第i行從第1個方格到第8個方格里面的數字（方格序號從0開始）
                for(int j = 0; j < 10; j ++) {
                    //drawString(g, j, i);                    
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    
    
}

現在運行程序，可以看到已經繪制出10行10列的區域了。

注意，在窗口元素上繪制直線、寫文字等操作，使用到的是一個叫做Graphics的對象。在構造函數的第58行語句中，this.getGraphics()語句是獲取游戲窗口的繪圖對象（一個Graphics對象），這里的this是指程序運行后用戶看到的那個窗口，getGraphics()方法就是得到繪圖對象。獲取到這個對象后，被保存到成員變量jg中，這樣，在其他成員方法中就可以直接使用這個jg對象來繪圖了。

DrawSee類另外幾個成員：

setGrid(int cx,int cy,Color color):設置被選中的cx行，cy列網格的背景

compare(int cx,int cy)：比較cx行cy列網格和之前選中的網格是否可以消除

drawString(Graphics g, int x, int y)：在x行y列網格上寫數字

isEnd(int[][] map) ：判斷二維數組map是不是全0

上敘方法請讀者自己分析代碼，在分析時，主要抓住兩個角度，一個是這個方法的邏輯過程是怎樣的，第二個是方法體內用到了哪些語法知識。

下面給出DrawSee類的完整代碼：

import java.awt.Color;
import java.awt.Container;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;

import javax.swing.JFrame;
  

/**
 * 
 * 程序入口
 *
 */
public class TestDrawLine {   
    public static void main(String[] args) {   
        new DrawSee();
    }   
}   

class DrawSee extends JFrame {
    private static final long serialVersionUID = 2L;
    private static final int sx = 50;//小方格寬度
    private static final int sy = 50;//小方格高度
    private static final int w = 40;
    private static final int rw = 400;
    private int px = 0, py = 0;
    
    private Graphics jg;
    private int cc = 0;// 被選中的方格個數
    private int[][] map;// 存放游戲數據的二維數組
    private boolean isEnd = false;
    private Color rectColor = new Color(0xf5f5f5);
    
    /**
     * DrawSee構造方法
     */
    public DrawSee() {
        Container p = getContentPane();
        setBounds(100, 100, 500, 500);
        setVisible(true);
        p.setBackground(rectColor);
        setLayout(null);   
        setResizable(false);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);        
        
        try {
            // 創建游戲數據地圖
            map = SeeAgain.createMap();
            
            Thread.sleep(500);
        } catch (Exception e) {
            e.printStackTrace();
        }        

        // 獲取專門用於在窗口界面上繪圖的對象
        jg =  this.getGraphics();
        
        // 繪制游戲區域
        paintComponents(jg);
        
        
        // 添加鼠監聽事件，當鼠標點擊時觸發
        this.addMouseListener(new MouseAdapter() {
            
            // 定義鼠標點擊事件響應過程
            @Override
            public void mouseClicked(MouseEvent e) {
                // 如果游戲結束，返回，不執行后面的代碼
                if(isEnd) {                    
                    return;
                }                

                //獲取鼠標點擊的那一點的x，y坐標
                int x = e.getX(), y = e.getY();
                
                /**
                 * 計算當前點擊的方格是第幾個
                 * cx：當前點擊的方格處於水平方向第幾個
                 * cy: 當前點擊的方格處於豎直方向第幾個
                 */
                int cx = (x - sx) / w, cy = (y - sy) / w;                

                /**
                 * 如果點擊的方格處於游戲區域之外，
                 * 直接返回，不執行后面的代碼
                 */
                if(cx < 1 || cy < 1 || cx > 8 || cy > 8) {
                    return;
                }
                
                // 被選中的方格個數增加一個
                cc ++;
                
                compare(cx,cy);
                
            }
        });
        
    }
    
    /**
     * 判斷二維數組map中的所有元素是否均為0，
     * 只要有一個不為0，返回false，表示游戲還沒結束；否則返回true表示游戲結束
     * @param map 二維數組，元素為int類型
     * @return
     */
    public boolean isEnd(int[][] map) {
        for(int[] ms : map) {
            for(int m : ms) {
                if(m != 0) {
                    return false;
                }
            }
        }
        return true;
    }    

    
    public void paintComponents(Graphics g) {
        try {
            
            // 設置線條顏色為紅色
            g.setColor(Color.RED);
            
            // 繪制外層矩形框
            g.drawRect(sx, sy, rw, rw);
            
            /* 繪制水平10個，垂直10個方格。
             * 即水平方向9條線，垂直方向9條線，
             * 外圍四周4條線已經畫過了，不需要再畫。
             * 同時內部64個方格填寫數字。
             */
            for(int i = 1; i < 10; i ++) {
                // 繪制第i條豎直線
                g.drawLine(sx + (i * w), sy, sx + (i * w), sy + rw);
                
                // 繪制第i條水平線
                g.drawLine(sx, sy + (i * w), sx + rw, sy + (i * w));
                
                // 填寫第i行從第1個方格到第8個方格里面的數字（方格序號從0開始）
                for(int j = 0; j < 10; j ++) {
                    drawString(g, j, i);                    
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    
    private void drawString(Graphics g, int x, int y) {
        // 為0就不顯示
        if(map[x][y] != 0) {
            g.setColor(Color.RED);// Graphics對象顏色在之前又被修改過，所以每次需要將顏色重新設置為紅色
            g.setFont(new Font("Arial", 0, 40));// 設置Graphics對象字體大小
            g.drawString(map[x][y] + "", sx + (y  * w) + 5, sy + ((x + 1) * w) - 5);// 繪制字符
        }
    }

    /***
     * 講制定小方格設置為指定背景顏色
     * @param cx 方格的水平方向序號
     * @param cy 方格的垂直方向序號
     * @param color
     */
    private void setGrid(int cx,int cy,Color color){
        // 將繪圖對象設置為灰色，后面會將所點擊的方格背景設置為此顏色
        jg.setColor(color);
        
        /**
         * 將所點擊的方格上繪制一個小一點的矩形，矩形背景顏色為color,
         * 繪制的這個Rect會導致該方格上原有的文字被覆蓋
         */
        jg.fillRect(sx + (cx * w) + 1, sy + (cy * w) + 1, w - 2, w - 2);
        
        // 將覆蓋的數字重新寫出來，這樣就又看到紅色的文字了。
        drawString(jg, cy, cx);
    }
    
    private void compare(int cx,int cy){
        /**
         *  如果cc是1，表示當前一共選中了一個方格，用px，py來記住這個方格的位置；
         *  否則，表示現在選中的這個方格要與之前選中的方案比較，決定是否要刪除
         */
        if(cc == 1) {
            px = cx;
            py = cy;
            
            // 將所點擊的方格背景設置為灰色
            setGrid(cx,cy,Color.LIGHT_GRAY);                        
        }                
        else{//此時，cc肯定是大於1的，表示要比較兩個方格的值是否相同
            SeeAgain.removed(map, py, px, cy, cx );// 讓SeeAgain類的remove方法去判斷上一次所選
                                                //的（px,py）處的方格值與本次選擇的(cx,cy)處的方格值是否可以消掉
            
            // 處理第一個方格
            setGrid(cx,cy,rectColor);
            
            // 處理第二個方格
            setGrid(px,py,rectColor);

            cc = 0;//將cc的值復位
        }
        
        // 判斷是否結束游戲
        isEnd = isEnd(map);        
        if(isEnd) {
            jg.setColor(Color.RED);
            jg.setFont(new Font("Arial", 0, 62));
            jg.drawString("Game Over!", 100, 220);
        }
    }
}

上述代碼第65行至第99行，是添加窗口的鼠標點擊事件，鼠標每次點擊一下小方格，就要判斷所點擊的放個是否要被消掉。

至此，本項目任務繪圖部分的知識點就介紹到這里。