繪製形狀

Java 程式設計
繪製形狀

繪製複雜形狀

導航 使用者介面 主題：( )

圖形簡介

在本章中，我們將使用程式碼建立圖形內容的過程稱為繪製或繪畫。但是，Java 正式將後者作為該過程的正確術語，我們將在後面區分這兩個術語。

現在，您需要的主要類毫無疑問是 Graphics 類。如果您仔細檢視我們在程式碼中用來識別獲取 Graphics 類的程式碼。

程式碼清單 9.3：基本畫布import java.awt.*;
import javax.swing.*;
public class MyCanvas extends Canvas {
    public MyCanvas() {
    }

    public void paint(Graphics graphics) {
        /* We would be using this method only for the sake
         * of brevity throughout the current section. Note
         * that the Graphics class has been acquired along
         * with the method that we overrode. */
    }

    public static void main(String[] args) {
        MyCanvas canvas = new MyCanvas();
        JFrame frame = new JFrame();
        frame.setSize(400, 400);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(canvas);
        frame.setVisible(true);
    }
}

要檢視 Graphics 類的內容，請檢視頁面底部的外部連結以獲取指向線上 API 的連結。

在畫布上刻畫一條線

瞭解座標

開始你的繪畫體驗，可以考慮繪製最基本的形狀——一條線。從繪製例程的角度來看，畫布可以表示為一個倒置的笛卡爾座標系。由 x 軸和 y 軸表示的平面。原點或 $(0,0)$ 是畫布的左上角，畫布的可視區域是 笛卡爾第一象限 或正正 (+,+) 象限。從頂部向下移動，y 軸上的 y 座標值越大，反之亦然，從左側向右側移動，x 軸上的 x 座標值越大。與普通圖形上的值不同，這些值似乎都是正值。因此，位於 $(10,20)$ 的點距離左側 10 個畫素，距離頂部 20 個畫素，因此格式為 $(x,y)$ 。

在螢幕上繪製一條簡單的線

現在，我們已經知道，線是畫布上兩個離散點的連線。所以，如果一個點位於 $(x1,y1)$ ，另一個點位於 $(x2,y2)$ ，繪製一條線將需要您編寫如下程式碼語法。為了簡潔起見，我們將省略示例中未使用的其他方法。

程式碼部分 9.4：繪製簡單的線形

...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.setColor(Color.black);
        graphics.drawLine(40, 30, 330, 380);
        
    }
    ...
}

在上面的示例中，使用一個簡單的方法來精確地定義線上的畫布的笛卡爾尺度上的放置位置。 drawLine(int,int,int,int) 要求您輸入四個引數，依次出現，x1 座標、y1 座標、x2 座標和y2 座標。執行程式將顯示一條簡單的黑色直線斜穿過畫布。

繪製一個簡單的矩形

我們現在繼續進行第二個繪製。一個簡單的矩形就可以滿足要求，請參閱下面的程式碼。

程式碼部分 9.5：繪製一個簡單的矩形

...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.drawRect(10, 10, 100, 100);
    }
    ...
}

在上面的示例中，您可以看到使用 drawRect(int, int, int, int) 方法在 Graphics 例項中繪製一個簡單的矩形是多麼容易。執行程式，您將看到一個簡單的黑色矩形輪廓出現在曾經空白的畫布上。

傳遞給該方法的四個引數是，按照出現的順序，x 座標、y 座標、寬度和高度。因此，生成的矩形將從螢幕上距離左側 10 個畫素，距離頂部 10 個畫素的點開始繪製，寬度為 100 個畫素，高度為 100 個畫素。為了儲存這裡的引數，上面的繪製是一個等邊正方形，但正方形使用相同的方法繪製，沒有 drawSquare(int, int, int) 這樣的方法。

玩轉顏色

您可以透過告訴 Graphics 例項您想要的顏色來更改輪廓的顏色。這可以透過以下方式完成

程式碼部分 9.6：更改矩形輪廓的顏色

...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.setColor(Color.red);
        graphics.drawRect(100, 100, 500, 500);
    }
    ...
}

執行程式將呈現同一個矩形，但輪廓為紅色。

為了給我們的繪圖新增顏色，我們使用了一個方法，即 setColor(Color) 方法。此方法對在其呼叫之後進行的所有繪製有效，直到設定另一種顏色。它需要一個型別為 Color 的引數。由於您不知道如何實際例項化一個 Color 類，因此該類本身具有幾種內建顏色。以下列出了一些您可以使用的內建顏色。

Color.red
Color.blue
Color.green
Color.yellow
Color.pink
Color.black
Color.white

嘗試在對顏色進行編碼更改時執行程式，以便每次都獲得不同的顏色輪廓。用更多顏色玩耍一下。在頁面底部的外部連結中查詢 Color 類的 API 文件。

填充矩形區域

到目前為止，您已經能夠為自己繪製一個簡單的矩形，同時默默地問自己，“為什麼繪製的是矩形的輪廓，而不是整個區域？”答案很簡單。任何以 drawXxxx(...) 開頭的函式只會繪製輪廓。要繪製輪廓內的區域，我們使用 fillXxxx(...) 方法。例如，下面的程式碼將用黃色填充矩形，並帶有紅色輪廓。請注意，引數保持不變。

程式碼部分 9.7：繪製一個帶紅色輪廓的黃色矩形

...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.setColor(Color.yellow);
        graphics.fillRect(10, 10, 100, 100);
        graphics.setColor(Color.red);
        graphics.drawRect(10, 10, 100, 100);
    }
    ...
}

圓圈呢？

繪製圓圈非常容易？它與上面的語法相同，只是將 Rect 替換為 Oval。不要問我為什麼是橢圓？您沒有 drawCircle(int, int, int) 這樣的方法，因為您沒有 drawSquare(int, int, int) 這樣的方法。下面是使用 Graphics 程式碼繪製圓圈的應用，只是為了吊起您的胃口。

程式碼部分 9.8：繪製一個帶有藍色輪廓的白色圓圈

...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.setColor(new Color(0,0,255));
        graphics.drawOval(50, 50, 100, 100);
    }
    ...
}

矩形的新形式

到目前為止很簡單，不是嗎？在所有這些形狀中，只有這兩種形狀是您目前需要構建的形狀。需要複雜的圖形例程來構建菱形、三角形、梯形或平行四邊形等形狀。我們將在另一節中討論這些形狀。但是，最後，我將為您留下另一個有趣的形狀——橢圓形和矩形的組合。想象一個帶圓角的矩形，一個圓角矩形（RoundRect）。

程式碼部分 9.9：繪製一個帶有紅色輪廓的粉紅色圓角矩形

...
public class MyCanvas extends Canvas {
    ...
    public void paint(Graphics graphics) {
        graphics.setColor(Color.pink);
        graphics.fillRoundRect(10, 10, 100, 100, 5, 5);
        graphics.setColor(Color.red);
        graphics.drawRoundRect(10, 10, 100, 100, 5, 5);
    }
    ...
}

請注意，drawRoundRect(int, int, int, int, int, int) 方法的語法與簡單矩形繪製例程 drawRect(int, int, int, int) 的語法略有不同。最後新增的兩個新引數分別是 **圓弧的寬度（以畫素為單位）** 和 **圓弧的高度（以畫素為單位）**。執行程式時，效果相當驚人。您無需眯起眼睛就能看出矩形的角略微圓潤。圓弧寬度和高度的值越大，角周圍的圓潤度越明顯。

嗯，一切都完美，但是...

有時人們在建立了像上面這樣的簡單程式後會問類似這樣的問題

為什麼我必須在每次繪製例程之前告訴 Graphics 例項顏色？ 為什麼它不能記住我為輪廓和填充顏色選擇的顏色？答案比看起來更簡單。但是，要完全理解它，我們需要關注一個叫做 **圖形上下文** 的小東西。圖形上下文是附加到 Graphics 類單個例項的資訊。這樣的例項一次只記住一種顏色，這就是為什麼我們需要使用 setColor(Color) 方法確保上下文知道我們需要使用的顏色。
我可以操作這些形狀，例如傾斜和裁剪它們嗎？ 等等，牛仔！在 Java 中一切皆有可能，甚至包括傾斜和裁剪圖形。我們將在後面的部分中重點介紹這些問題。
製作三角形、菱形和其他複雜形狀很麻煩嗎？ 說實話，你需要回到塵土飛揚的書櫃裡，拿出那本高中幾何書，因為我們在處理這些形狀時會涉及一些幾何基礎知識。為什麼不閱讀一本關於幾何的華夏公益教科書？

測試您的知識

問題 9.3：在上面的練習清單中，我們一直先填充形狀，然後再繪製它們的輪廓。如果我們反過來做會怎樣？請考慮以下程式碼。

...
public void paint(Graphics graphics) {
    graphics.setColor(Color.red);
    graphics.drawRect(10, 10, 100, 100);
    graphics.setColor(Color.yellow);
    graphics.fillRect(10, 10, 100, 100);
}
...

左邊和上面的輪廓消失了。
右邊和下面的輪廓消失了。
輪廓的顏色變成了填充區域的顏色。
所有輪廓都消失了。

答案

所有輪廓都消失了。

問題 9.4：drawLine(10, 100, 100, 100) 會給你什麼？

一條水平線。
一條垂直線。
一條對角線。

答案

一條水平線。

如果您對這裡提供的內容有任何疑問，請隨時在本頁的討論中發表評論。

外部連結

Java 程式設計
繪製形狀

繪製複雜形狀