基本繪圖 · ZetCode 中文系列教程

# 基本繪圖 > 原文： [https://zetcode.com/gfx/java2d/basicdrawing/](https://zetcode.com/gfx/java2d/basicdrawing/) 在 Java 2D 教程的這一部分中，我們進行一些基本繪制。 ## 點最簡單的圖形原語就是點。它是窗口上的一個點。有一個`Point`類用于表示坐標空間中的一個點，但是沒有繪制點的方法。為了繪制一個點，我們使用了`drawLine()`方法，其中為該方法的兩個參數都提供了一個點。 `PointsEx.java` ```java package com.zetcode; import java.awt.Color; import java.awt.EventQueue; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; import java.util.Random; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.Timer; class Surface extends JPanel implements ActionListener { private final int DELAY = 150; private Timer timer; public Surface() { initTimer(); } private void initTimer() { timer = new Timer(DELAY, this); timer.start(); } public Timer getTimer() { return timer; } private void doDrawing(Graphics g) { Graphics2D g2d = (Graphics2D) g; g2d.setPaint(Color.blue); int w = getWidth(); int h = getHeight(); Random r = new Random(); for (int i = 0; i < 2000; i++) { int x = Math.abs(r.nextInt()) % w; int y = Math.abs(r.nextInt()) % h; g2d.drawLine(x, y, x, y); } } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } @Override public void actionPerformed(ActionEvent e) { repaint(); } } public class PointsEx extends JFrame { public PointsEx() { initUI(); } private void initUI() { final Surface surface = new Surface(); add(surface); addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent e) { Timer timer = surface.getTimer(); timer.stop(); } }); setTitle("Points"); setSize(350, 250); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { @Override public void run() { PointsEx ex = new PointsEx(); ex.setVisible(true); } }); } } ``` 該示例在窗口上隨機繪制 2000 個點。計時器用于繪制循環中的點。 ```java private void initTimer() { timer = new Timer(DELAY, this); timer.start(); } ``` `javax.swing.Timer`用于創建動畫。它以指定的時間間隔觸發`ActionEvents`。 ```java g2d.setPaint(Color.blue); ``` 這些點被涂成藍色。 ```java int w = getWidth(); int h = getHeight(); ``` 我們得到組件的寬度和高度。 ```java Random r = new Random(); int x = Math.abs(r.nextInt()) % w; int y = Math.abs(r.nextInt()) % h; ``` 我們得到一個上面計算出的區域大小范圍內的隨機數。 ```java g2d.drawLine(x, y, x, y); ``` 在這里，我們指出了這一點。如前所述，我們使用`drawLine()`方法。我們兩次指定相同的點。 ```java @Override public void actionPerformed(ActionEvent e) { repaint(); } ``` 每個動作事件，我們都調用`repaint()`方法。這將導致整個客戶區被重繪。 ```java addWindowListener(new WindowAdapter() { @Override public void windowClosing(WindowEvent e) { Timer timer = surface.getTimer(); timer.stop(); } }); ``` 當窗口即將關閉時，我們檢索計時器并使用其`stop()`方法將其關閉。未明確取消的計時器可能無限期地占用資源。 `EXIT_ON_CLOSE`默認關閉操作將關閉 JVM 及其所有線程，因此對于我們的示例而言，這不是必需的。但是，盡管如此，作為一種好的編程習慣，我們仍然會這樣做。 ![Points](https://img.kancloud.cn/9b/0d/9b0db3f464399f495fb9a0d5a90895a9_350x250.jpg) 圖：點 ## 直線線是簡單的圖形基元。線是連接兩個點的對象。使用`drawLine()`方法繪制線。 `LinesEx.java` ```java package com.zetcode; import java.awt.EventQueue; import java.awt.Graphics; import java.awt.Graphics2D; import javax.swing.JFrame; import javax.swing.JPanel; class Surface extends JPanel { private void doDrawing(Graphics g) { Graphics2D g2d = (Graphics2D) g; g2d.drawLine(30, 30, 200, 30); g2d.drawLine(200, 30, 30, 200); g2d.drawLine(30, 200, 200, 200); g2d.drawLine(200, 200, 30, 30); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } } public class LinesEx extends JFrame { public LinesEx() { initUI(); } private void initUI() { add(new Surface()); setTitle("Lines"); setSize(350, 250); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { @Override public void run() { LinesEx ex = new LinesEx(); ex.setVisible(true); } }); } } ``` 我們用四個線畫一個簡單的對象。 ```java g2d.drawLine(30, 30, 200, 30); ``` 畫一條直線。該方法的參數是兩點的 x，y 坐標。 ![Lines](https://img.kancloud.cn/f5/8e/f58e3bebb8491c907ee746e67a00c711_350x250.jpg) 圖：直線 ## 基本輪廓 `BasicStroke`類為圖形基元的輪廓定義了一組基本的渲染屬性。這些渲染屬性包括寬度，端蓋，線連接，斜接限制和筆劃線。 `BasicStrokesEx.java` ```java package com.zetcode; import java.awt.BasicStroke; import java.awt.EventQueue; import java.awt.Graphics; import java.awt.Graphics2D; import javax.swing.JFrame; import javax.swing.JPanel; class Surface extends JPanel { private void doDrawing(Graphics g) { Graphics2D g2d = (Graphics2D) g.create(); float[] dash1 = {2f, 0f, 2f}; float[] dash2 = {1f, 1f, 1f}; float[] dash3 = {4f, 0f, 2f}; float[] dash4 = {4f, 4f, 1f}; g2d.drawLine(20, 40, 250, 40); BasicStroke bs1 = new BasicStroke(1, BasicStroke.CAP_BUTT, BasicStroke.JOIN_ROUND, 1.0f, dash1, 2f); BasicStroke bs2 = new BasicStroke(1, BasicStroke.CAP_BUTT, BasicStroke.JOIN_ROUND, 1.0f, dash2, 2f); BasicStroke bs3 = new BasicStroke(1, BasicStroke.CAP_BUTT, BasicStroke.JOIN_ROUND, 1.0f, dash3, 2f); BasicStroke bs4 = new BasicStroke(1, BasicStroke.CAP_BUTT, BasicStroke.JOIN_ROUND, 1.0f, dash4, 2f); g2d.setStroke(bs1); g2d.drawLine(20, 80, 250, 80); g2d.setStroke(bs2); g2d.drawLine(20, 120, 250, 120); g2d.setStroke(bs3); g2d.drawLine(20, 160, 250, 160); g2d.setStroke(bs4); g2d.drawLine(20, 200, 250, 200); g2d.dispose(); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } } public class BasicStrokesEx extends JFrame { public BasicStrokesEx() { initUI(); } private void initUI() { add(new Surface()); setTitle("Basic strokes"); setSize(280, 270); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { @Override public void run() { BasicStrokesEx ex = new BasicStrokesEx(); ex.setVisible(true); } }); } } ``` 在此示例中，我們顯示了各種筆劃線。筆劃線屬性是一種模式，通過混合不透明部分和透明部分來創建。 ```java Graphics2D g2d = (Graphics2D) g.create(); ``` 我們將更改`Graphics`對象的`stroke`屬性；因此，我們使用`Graphics`對象的副本。（請記住，如果我們更改字體，顏色或渲染提示以外的屬性，則必須創建一個副本。） ```java float[] dash1 = { 2f, 0f, 2f }; float[] dash2 = { 1f, 1f, 1f }; float[] dash3 = { 4f, 0f, 2f }; float[] dash4 = { 4f, 4f, 1f }; ``` 在這里，我們定義了四種不同的筆劃線模式。 ```java BasicStroke bs1 = new BasicStroke(1, BasicStroke.CAP_BUTT, BasicStroke.JOIN_ROUND, 1.0f, dash1, 2f ); ``` 該行構造一個`BasicStroke`對象。 ```java g2d.setStroke(bs1); ``` 我們使用`setStroke()`方法將`BasicStroke`應用于當前圖形上下文。 ```java g2d.drawLine(20, 80, 250, 80); ``` 用`drawLine()`方法畫一條線。 ```java g2d.dispose(); ``` 最后，我們放置`Graphics`對象的副本。 ![Basic strokes](https://img.kancloud.cn/1d/98/1d98b3d9a03dac26913663288e3a3b54_280x270.jpg) 圖：基本描邊 ## 端帽上限是應用于未封閉子路徑和破折線段末端的裝飾。 Java 2D 中有三種不同的端蓋：`CAP_BUTT`，`CAP_ROUND`和`CAP_SQUARE`。 * `CAP_BUTT` - 結束未封閉的子路徑和虛線段，不添加任何修飾。 * `CAP_ROUND` - 用圓形裝飾結束未封閉的子路徑和虛線段，該圓形裝飾的半徑等于筆的寬度的一半。 * `CAP_SQUARE` - 以方形投影結束未封閉的子路徑和虛線段，該方形投影超出段的末端并延伸到等于線寬一半的距離。 `CapsEx.java` ```java package com.zetcode; import java.awt.BasicStroke; import java.awt.EventQueue; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import javax.swing.JFrame; import javax.swing.JPanel; class Surface extends JPanel { private void doDrawing(Graphics g) { Graphics2D g2d = (Graphics2D) g.create(); RenderingHints rh = new RenderingHints( RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); rh.put(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY); g2d.setRenderingHints(rh); BasicStroke bs1 = new BasicStroke(8, BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL); g2d.setStroke(bs1); g2d.drawLine(20, 30, 250, 30); BasicStroke bs2 = new BasicStroke(8, BasicStroke.CAP_ROUND, BasicStroke.JOIN_BEVEL); g2d.setStroke(bs2); g2d.drawLine(20, 80, 250, 80); BasicStroke bs3 = new BasicStroke(8, BasicStroke.CAP_SQUARE, BasicStroke.JOIN_BEVEL); g2d.setStroke(bs3); g2d.drawLine(20, 130, 250, 130); BasicStroke bs4 = new BasicStroke(); g2d.setStroke(bs4); g2d.drawLine(20, 20, 20, 140); g2d.drawLine(250, 20, 250, 140); g2d.drawLine(254, 20, 254, 140); g2d.dispose(); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } } public class CapsEx extends JFrame { public CapsEx() { initUI(); } private void initUI() { add(new Surface()); setTitle("Caps"); setSize(280, 270); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { @Override public void run() { CapsEx ex = new CapsEx(); ex.setVisible(true); } }); } } ``` 在我們的示例中，我們顯示了所有三種類型的端蓋。 ```java BasicStroke bs1 = new BasicStroke(8, BasicStroke.CAP_BUTT, BasicStroke.JOIN_BEVEL); g2d.setStroke(bs1); ``` 創建并應用帶有對接蓋的基本描邊。 `CAP_BUTT`不添加裝飾。 ```java g2d.drawLine(20, 20, 20, 140); g2d.drawLine(250, 20, 250, 140); g2d.drawLine(254, 20, 254, 140); ``` 我們畫了三根垂直線來解釋端蓋之間的差異。具有`CAP_ROUND`和`CAP_SQUARE`的線比具有`CAP_BUTT`的線大。究竟多大取決于行的大小。在我們的情況下，線的寬度為 8 像素。線長 8 像素-左側 4 像素，右側 4 像素。從圖片中應該清楚。 ![Caps](https://img.kancloud.cn/f3/2c/f32c8ce71a35998ce34f8f0006ce47e1_280x270.jpg) 圖：端帽 ## 連接線連接是應用于兩個路徑段的交點以及子路徑端點的交點的修飾。一共有三種裝飾：`JOIN_BEVEL`，`JOIN_MITER`和`JOIN_ROUND`。 * `JOIN_BEVEL` - 通過將寬輪廓的外角與直線段相連來連接路徑段。 * `JOIN_MITER` - 通過擴展路徑段的外部邊緣直到它們交匯來連接路徑段。 * `JOIN_ROUND` - 通過以線寬一半的半徑四舍五入拐角來連接路徑段。 `JoinsEx.java` ```java package com.zetcode; import java.awt.BasicStroke; import java.awt.EventQueue; import java.awt.Graphics; import java.awt.Graphics2D; import javax.swing.JFrame; import javax.swing.JPanel; class Surface extends JPanel { private void doDrawing(Graphics g) { Graphics2D g2d = (Graphics2D) g.create(); BasicStroke bs1 = new BasicStroke(8, BasicStroke.CAP_ROUND, BasicStroke.JOIN_BEVEL); g2d.setStroke(bs1); g2d.drawRect(15, 15, 80, 50); BasicStroke bs2 = new BasicStroke(8, BasicStroke.CAP_ROUND, BasicStroke.JOIN_MITER); g2d.setStroke(bs2); g2d.drawRect(125, 15, 80, 50); BasicStroke bs3 = new BasicStroke(8, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND); g2d.setStroke(bs3); g2d.drawRect(235, 15, 80, 50); g2d.dispose(); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } } public class JoinsEx extends JFrame { public JoinsEx() { initUI(); } private void initUI() { add(new Surface()); setTitle("Joins"); setSize(340, 110); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { @Override public void run() { JoinsEx ex = new JoinsEx(); ex.setVisible(true); } }); } } ``` 此代碼示例顯示了三個不同的線聯接在起作用。 ```java BasicStroke bs1 = new BasicStroke(8, BasicStroke.CAP_ROUND, BasicStroke.JOIN_BEVEL); g2d.setStroke(bs1); g2d.drawRect(15, 15, 80, 50); ``` 在這里，我們創建一個帶有`JOIN_BEVEL`聯接的矩形。 ![Joins](https://img.kancloud.cn/6b/88/6b8860eb08c93583ac21716c42fcd38a_340x110.jpg) 圖：`Joins` 在 Java 2D 教程的這一部分中，我們做了一些基本的繪制。