Swing 中的繪圖 · ZetCode 中文系列教程

# Swing 中的繪圖 > 原文： [http://zetcode.com/tutorials/javaswingtutorial/painting/](http://zetcode.com/tutorials/javaswingtutorial/painting/) Swing 的繪圖系統能夠渲染向量圖形，圖像和輪廓基于字體的文本。 [Tweet](https://twitter.com/share) 當我們想要更改或增強現有的小部件，或者要從頭開始創建自定義小部件時，應用中需要繪圖。要進行繪圖，我們使用 Swing 工具箱提供的繪圖 API。繪圖是在`paintComponent()`方法中完成的。在繪圖過程中，我們使用`Graphics2D`對象。 ## Swing 2D 向量圖形有兩種不同的計算機圖形：向量圖形和柵格圖形。柵格圖形將圖像表示為像素的集合。向量圖形是使用諸如點，線，曲線或多邊形之類的幾何圖元來表示圖像。這些基元是使用數學方程式創建的。兩種類型的計算機圖形都有優點和缺點。向量圖形優于柵格的優點是： * 較小的大小 * 無限放大的能力 * 移動，縮放，填充或旋轉不會降低圖像質量 ### 基本類型 * 點 * 線 * 折線 * 多邊形 * 圓圈 * 橢圓 * 樣條 ## Swing 繪制點最簡單的圖形原語是點。它是窗口上的一個點。在 Swing 中沒有方法可以畫點。要畫點，我們使用`drawLine()`方法。我們使用一分兩次。 `PointsEx.java` ```java package com.zetcode; import javax.swing.JFrame; import javax.swing.JPanel; import java.awt.Color; import java.awt.EventQueue; import java.awt.Graphics; import java.awt.Graphics2D; import java.util.Random; class DrawPanel extends JPanel { private void doDrawing(Graphics g) { var g2d = (Graphics2D) g; g2d.setColor(Color.blue); for (int i = 0; i <= 1000; i++) { var size = getSize(); var insets = getInsets(); int w = size.width - insets.left - insets.right; int h = size.height - insets.top - insets.bottom; var r = new Random(); 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); } } public class PointsEx extends JFrame { public PointsEx() { initUI(); } private void initUI() { var drawPanel = new DrawPanel(); add(drawPanel); setSize(350, 250); setTitle("Points"); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(() -> { var ex = new PointsEx(); ex.setVisible(true); }); } } ``` 有一點很難觀察到。因此，我們在面板表面上隨機繪制了 1000 個點。 ```java class DrawPanel extends JPanel { ``` 我們正在自定義繪圖面板上繪圖，該面板是`JPanel`組件。繪圖面板稍后將添加到`JFrame`組件。 ```java @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } ``` 自定義繪圖是在`paintComponent()`方法內部執行的，我們將其覆蓋。 `super.paintComponent()`方法調用父類的方法。準備用于繪圖的組件需要做一些必要的工作。實際圖形委托給`doDrawing()`方法。 ```java var g2d = (Graphics2D) g; ``` Swing 中的繪制是在`Graphics2D`對象上完成的。 ```java g2d.setColor(Color.blue); ``` 我們將點涂成藍色。 ```java var size = getSize(); var insets = getInsets(); ``` 窗口的大小包括邊框和標題欄。我們不在那畫。 ```java int w = size.width - insets.left - insets.right; int h = size.height - insets.top - insets.bottom; ``` 在這里，我們計算面積，在此我們將有效地繪制點。 ```java var 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()`方法。我們兩次指定相同的點。 ![Points](https://img.kancloud.cn/8d/a8/8da8e19b7b21dca7099d4813e57efb2e_350x250.jpg) 圖：點 ## Swing 繪制線線是簡單的圖形基元。它使用兩點繪制。 `LinesEx.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 DrawPanel extends JPanel { private void doDrawing(Graphics g) { var g2d = (Graphics2D) g; 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); var bs1 = new BasicStroke(1, BasicStroke.CAP_BUTT, BasicStroke.JOIN_ROUND, 1.0f, dash1, 2f); var bs2 = new BasicStroke(1, BasicStroke.CAP_BUTT, BasicStroke.JOIN_ROUND, 1.0f, dash2, 2f); var bs3 = new BasicStroke(1, BasicStroke.CAP_BUTT, BasicStroke.JOIN_ROUND, 1.0f, dash3, 2f); var 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); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } } public class LinesEx extends JFrame { public LinesEx() { initUI(); } private void initUI() { var drawPanel = new DrawPanel(); add(drawPanel); setSize(280, 270); setTitle("Lines"); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(() -> { var ex = new LinesEx(); ex.setVisible(true); }); } } ``` 在示例中，我們繪制了五條線。第一行使用默認值繪制。其他將具有不同的粗細。使用`BasicStroke`類創建描邊。它為圖形基元的輪廓定義了一組基本的渲染屬性。 ```java float[] dash1 = { 2f, 0f, 2f }; ``` 在這里，我們創建一個在描邊對象中使用的筆劃線。 ```java var bs1 = new BasicStroke(1, BasicStroke.CAP_BUTT, BasicStroke.JOIN_ROUND, 1.0f, dash1, 2f ) ``` 這段代碼創建了一個筆畫。描邊定義線寬，端蓋，線連接，斜接限制，筆劃線和筆劃線階段。 ![Lines](https://img.kancloud.cn/39/72/39723a5b73c598d24940af0e52a72e5a_280x270.jpg) 圖：直線 ## Swing 繪制矩形要繪制矩形，我們使用`drawRect()`方法。要使用當前顏色填充矩形，我們使用`fillRect()`方法。 `RectanglesEx.java` ```java package com.zetcode; import java.awt.Color; import java.awt.EventQueue; import java.awt.Graphics; import java.awt.Graphics2D; import javax.swing.JFrame; import javax.swing.JPanel; class DrawPanel extends JPanel { private void doDrawing(Graphics g) { var g2d = (Graphics2D) g; g2d.setColor(new Color(212, 212, 212)); g2d.drawRect(10, 15, 90, 60); g2d.drawRect(130, 15, 90, 60); g2d.drawRect(250, 15, 90, 60); g2d.drawRect(10, 105, 90, 60); g2d.drawRect(130, 105, 90, 60); g2d.drawRect(250, 105, 90, 60); g2d.drawRect(10, 195, 90, 60); g2d.drawRect(130, 195, 90, 60); g2d.drawRect(250, 195, 90, 60); g2d.setColor(new Color(125, 167, 116)); g2d.fillRect(10, 15, 90, 60); g2d.setColor(new Color(42, 179, 231)); g2d.fillRect(130, 15, 90, 60); g2d.setColor(new Color(70, 67, 123)); g2d.fillRect(250, 15, 90, 60); g2d.setColor(new Color(130, 100, 84)); g2d.fillRect(10, 105, 90, 60); g2d.setColor(new Color(252, 211, 61)); g2d.fillRect(130, 105, 90, 60); g2d.setColor(new Color(241, 98, 69)); g2d.fillRect(250, 105, 90, 60); g2d.setColor(new Color(217, 146, 54)); g2d.fillRect(10, 195, 90, 60); g2d.setColor(new Color(63, 121, 186)); g2d.fillRect(130, 195, 90, 60); g2d.setColor(new Color(31, 21, 1)); g2d.fillRect(250, 195, 90, 60); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } } public class RectanglesEx extends JFrame { public RectanglesEx() { initUI(); } private void initUI() { var drawPanel = new DrawPanel(); add(drawPanel); setSize(360, 300); setTitle("Rectangles"); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(() -> { var ex = new RectanglesEx(); ex.setVisible(true); }); } } ``` 在示例中，我們繪制了九個彩色矩形。 ```java g2d.setColor(new Color(212, 212, 212)); g2d.drawRect(10, 15, 90, 60); ... ``` 我們將矩形輪廓的顏色設置為柔和的灰色，以免干擾填充顏色。要繪制矩形的輪廓，我們使用`drawRect()`方法。前兩個參數是 x 和 y 值。第三和第四是寬度和高度。 ```java g2d.fillRect(10, 15, 90, 60); ``` 為了用顏色填充矩形，我們使用`fillRect()`方法。 ![Rectangles](https://img.kancloud.cn/b1/51/b1510ca0f8a70a82203bb5350aeff8c0_360x300.jpg) 圖：矩形 ## Swing 使用紋理紋理是應用于形狀的位圖圖像。要在 Java 2D 中使用紋理，我們使用`TexturePaint`類。 `TexturesEx.java` ```java package com.zetcode; import javax.imageio.ImageIO; import javax.swing.JFrame; import javax.swing.JOptionPane; import javax.swing.JPanel; import java.awt.EventQueue; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Rectangle; import java.awt.TexturePaint; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; class DrawingPanel extends JPanel { private BufferedImage slate; private BufferedImage java; private BufferedImage pane; public DrawingPanel() { loadImages(); } private void loadImages() { try { slate = ImageIO.read(new File("src/resources/slate.png")); java = ImageIO.read(new File("src/resources/java.png")); pane = ImageIO.read(new File("src/resources/pane.png")); } catch (IOException ex) { JOptionPane.showMessageDialog(this, "Could not load images", "Error", JOptionPane.ERROR_MESSAGE); System.exit(1); } } private void doDrawing(Graphics g) { var g2d = (Graphics2D) g.create(); var slateTp = new TexturePaint(slate, new Rectangle(0, 0, 90, 60)); var javaTp = new TexturePaint(java, new Rectangle(0, 0, 90, 60)); var paneTp = new TexturePaint(pane, new Rectangle(0, 0, 90, 60)); g2d.setPaint(slateTp); g2d.fillRect(10, 15, 90, 60); g2d.setPaint(javaTp); g2d.fillRect(130, 15, 90, 60); g2d.setPaint(paneTp); g2d.fillRect(250, 15, 90, 60); g2d.dispose(); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } } class TexturesEx extends JFrame { public TexturesEx() { initUI(); } private void initUI() { var drawingPanel = new DrawingPanel(); add(drawingPanel); setTitle("Textures"); setSize(360, 120); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(() -> { var ex = new TexturesEx(); ex.setVisible(true); }); } } ``` 在代碼示例中，我們用三個不同的紋理填充三個矩形。 ```java private BufferedImage slate; private BufferedImage java; private BufferedImage pane; ``` `BufferedImage`是存儲在內存中的像素矩形。它是 Swing 中最重要的圖像類型之一。許多 Swing 方法都返回`BufferedImage`以供使用。 ```java slate = ImageIO.read(new File("src/resources/slate.png")); ``` 在這里，我們使用`ImageIO.read()`方法將圖像讀取到緩沖圖像中。它接受`File`對象并返回`BufferedImage`。 ```java slateTp = new TexturePaint(slate, new Rectangle(0, 0, 90, 60)); ``` 我們從緩沖圖像中創建一個`TexturePaint`類。 ```java g2d.setPaint(slateTp); g2d.fillRect(10, 15, 90, 60); ``` 我們用紋理填充一個矩形。 ![Textures](https://img.kancloud.cn/c4/d9/c4d948b4b22fc190ec93a48a109cb00a_360x120.jpg) 圖：紋理 ## Swing 使用漸變在計算機圖形學中，漸變是從淺到深或從一種顏色到另一種顏色的陰影的平滑混合。在 2D 繪圖程序和繪圖程序中，漸變用于創建彩色背景和特殊效果以及模擬燈光和陰影。 `GradientsEx.java` ```java package com.zetcode; import java.awt.Color; import java.awt.EventQueue; import java.awt.GradientPaint; import java.awt.Graphics; import java.awt.Graphics2D; import javax.swing.JFrame; import javax.swing.JPanel; class DrawPanel extends JPanel { private void doDrawing(Graphics g) { var g2d = (Graphics2D) g; var gp1 = new GradientPaint(5, 5, Color.red, 20, 20, Color.black, true); g2d.setPaint(gp1); g2d.fillRect(20, 20, 300, 40); var gp2 = new GradientPaint(5, 25, Color.yellow, 20, 2, Color.black, true); g2d.setPaint(gp2); g2d.fillRect(20, 80, 300, 40); var gp3 = new GradientPaint(5, 25, Color.green, 2, 2, Color.black, true); g2d.setPaint(gp3); g2d.fillRect(20, 140, 300, 40); var gp4 = new GradientPaint(25, 25, Color.blue, 15, 25, Color.black, true); g2d.setPaint(gp4); g2d.fillRect(20, 200, 300, 40); var gp5 = new GradientPaint(0, 0, Color.orange, 0, 20, Color.black, true); g2d.setPaint(gp5); g2d.fillRect(20, 260, 300, 40); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } } public class GradientsEx extends JFrame { public GradientsEx() { initUI(); } private void initUI() { var drawPanel = new DrawPanel(); add(drawPanel); setSize(350, 350); setTitle("Gradients"); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(() -> { var ex = new GradientsEx(); ex.setVisible(true); }); } } ``` 我們的代碼示例展示了五個帶有漸變的矩形。 ```java var gp4 = new GradientPaint(25, 25, Color.blue, 15, 25, Color.black, true); ``` 要使用漸變，我們使用 Java Swing 的`GradientPaint`類。通過操縱顏色值和起點，終點，我們可以獲得不同類型的漸變。 ```java g2d.setPaint(gp5); ``` 調用`setPaint()`方法激活漸變。 ![Gradients](https://img.kancloud.cn/ad/d3/add3c06e3781e0bb79296fc9f1ef913a_350x350.jpg) 圖：漸變 ## Swing 繪制文字使用`drawString()`方法進行繪制。我們指定我們要繪制的字符串以及文本在窗口區域中的位置。 `DrawingTextEx.java` ```java package com.zetcode; import javax.swing.JFrame; import javax.swing.JPanel; import java.awt.EventQueue; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; class DrawPanel extends JPanel { private void doDrawing(Graphics g) { var g2d = (Graphics2D) g; var rh = new RenderingHints( RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); rh.put(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY); g2d.setRenderingHints(rh); var font = new Font("URW Chancery L", Font.BOLD, 21); g2d.setFont(font); g2d.drawString("Not marble, nor the gilded monuments", 20, 30); g2d.drawString("Of princes, shall outlive this powerful rhyme;", 20, 60); g2d.drawString("But you shall shine more bright in these contents", 20, 90); g2d.drawString("Than unswept stone, besmear'd with sluttish time.", 20, 120); g2d.drawString("When wasteful war shall statues overturn,", 20, 150); g2d.drawString("And broils root out the work of masonry,", 20, 180); g2d.drawString("Nor Mars his sword, nor war's quick " + "fire shall burn", 20, 210); g2d.drawString("The living record of your memory.", 20, 240); g2d.drawString("'Gainst death, and all oblivious enmity", 20, 270); g2d.drawString("Shall you pace forth; your praise shall still " + "find room", 20, 300); g2d.drawString("Even in the eyes of all posterity", 20, 330); g2d.drawString("That wear this world out to the ending doom.", 20, 360); g2d.drawString("So, till the judgment that yourself arise,", 20, 390); g2d.drawString("You live in this, and dwell in lovers' eyes.", 20, 420); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } } public class DrawingTextEx extends JFrame { public DrawingTextEx() { initUI(); } private void initUI() { var drawPanel = new DrawPanel(); add(drawPanel); setSize(500, 470); setTitle("Sonnet55"); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(() -> { var ex = new DrawingTextEx(); ex.setVisible(true); }); } } ``` 在我們的示例中，我們在面板組件上繪制了十四行詩。 ```java var rh = new RenderingHints( RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); rh.put(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY); g2d.setRenderingHints(rh); ``` 這段代碼是為了使我們的文本看起來更好。我們使用`RenderingHints`應用稱為抗鋸齒的技術。 ```java var font = new Font("URW Chancery L", Font.BOLD, 21); g2d.setFont(font); ``` 我們為文本選擇特定的字體。 ```java g2d.drawString("Not marble, nor the gilded monuments", 20, 30); ``` 這是繪制文本的代碼。 ## Swing 繪制圖像工具包最重要的功能之一就是顯示圖像的能力。圖像是像素數組。每個像素代表給定位置的顏色。我們可以使用`JLabel`之類的組件來顯示圖像，也可以使用 Java 2D API 繪制圖像。 `DrawImageEx.java` ```java package com.zetcode; import javax.swing.ImageIcon; import javax.swing.JFrame; import javax.swing.JPanel; import java.awt.Dimension; import java.awt.EventQueue; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Image; class DrawPanel extends JPanel { private Image myImage; public DrawPanel() { initPanel(); } private void initPanel() { loadImage(); var dm = new Dimension(myImage.getWidth(null), myImage.getHeight(null)); setPreferredSize(dm); } private void loadImage() { myImage = new ImageIcon("src/resources/icesid.jpg").getImage(); } private void doDrawing(Graphics g) { var g2d = (Graphics2D) g; g2d.drawImage(myImage, 0, 0, null); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } } public class DrawImageEx extends JFrame { public DrawImageEx() { initUI(); } private void initUI() { var drawPanel = new DrawPanel(); add(drawPanel); setTitle("Image"); pack(); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(() -> { var ex = new DrawImageEx(); ex.setVisible(true); }); } } ``` 本示例將在面板上繪制圖像。圖像適合`JFrame`窗口。 ```java private void initPanel() { loadImage(); var dm = new Dimension(img.getWidth(null), img.getHeight(null)); setPreferredSize(dm); } ``` 在`initPanel()`方法中，我們稱為`loadImage()`方法。我們確定圖像大小并設置面板組件的首選大小。這將與`pack()`方法一起顯示完全適合窗口的圖像。 ```java private void loadImage() { myImage = new ImageIcon("src/resources/icesid.jpg").getImage(); } ``` 該方法從磁盤加載映像。我們使用`ImageIcon`類。此類簡化了 Java Swing 中圖像的處理。 ```java g2d.drawImage(this.img, 0, 0, null); ``` 使用`drawImage()`方法繪制圖像。在本章中，我們使用 Java Swing 進行了一些繪圖。請訪問 ZetCode 的 [Java 2D 教程](/gfx/java2d)，以獲取有關在 Swing 中繪圖的其他信息。