形狀和填充 · ZetCode 中文系列教程

# 形狀和填充 > 原文： [https://zetcode.com/gfx/java2d/shapesandfills/](https://zetcode.com/gfx/java2d/shapesandfills/) 在 Java 2D 教程的這一部分中，我們創建一些基本的和更高級的形狀。我們用純色，漸變和紋理填充形狀。 ## 基本形狀首先，我們繪制一些基本的 Java 2D 形狀。 `BasicShapes.java` ```java package com.zetcode; import java.awt.Color; import java.awt.EventQueue; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.geom.Ellipse2D; import javax.swing.JFrame; import javax.swing.JPanel; class Surface extends JPanel { private void doDrawing(Graphics g) { Graphics2D g2d = (Graphics2D) g; g2d.setPaint(new Color(150, 150, 150)); RenderingHints rh = new RenderingHints( RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); rh.put(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY); g2d.setRenderingHints(rh); g2d.fillRect(30, 20, 50, 50); g2d.fillRect(120, 20, 90, 60); g2d.fillRoundRect(250, 20, 70, 60, 25, 25); g2d.fill(new Ellipse2D.Double(10, 100, 80, 100)); g2d.fillArc(120, 130, 110, 100, 5, 150); g2d.fillOval(270, 130, 50, 50); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } } public class BasicShapesEx extends JFrame { public BasicShapesEx() { initUI(); } private void initUI() { add(new Surface()); setTitle("Basic shapes"); setSize(350, 250); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { @Override public void run() { BasicShapesEx ex = new BasicShapesEx(); ex.setVisible(true); } }); } } ``` 在此示例中，我們在面板上繪制了六個基本形狀：正方形，矩形，圓角矩形，橢圓形，弧形和圓形。 ```java g2d.setPaint(new Color(150, 150, 150)); ``` 形狀將以灰色背景繪制。 ```java g2d.fillRect(20, 20, 50, 50); g2d.fillRect(120, 20, 90, 60); ``` `fillRect()`方法用于繪制矩形和正方形。前兩個參數是要繪制的形狀的 x，y 坐標。最后兩個參數是形狀的寬度和高度。 ```java g2d.fillRoundRect(250, 20, 70, 60, 25, 25); ``` 在這里，我們創建一個圓角矩形。最后兩個參數是四個角處圓弧的水平和垂直直徑。 ```java g2d.fill(new Ellipse2D.Double(10, 100, 80, 100)); ``` `fill()`方法繪制給定形狀的內部-橢圓。 ```java g2d.fillArc(120, 130, 110, 100, 5, 150); ``` `fillArc()`方法填充覆蓋指定矩形的圓弧或橢圓弧。圓弧是圓的圓周的一部分。 ```java g2d.fillOval(270, 130, 50, 50); ``` 使用`fillOval()`方法繪制一個圓。 ![Basic shapes](https://img.kancloud.cn/43/ad/43ad144750a36518f1b44c5affba7c03_350x250.jpg) 圖：基本形狀 ## 一般路徑可以使用`GeneralPath`構造更復雜的形狀。它代表由直線，二次貝塞爾曲線和三次貝塞爾曲線構成的幾何路徑。下面的示例使用此類創建星形。 `StarEx.java` ```java package com.zetcode; import java.awt.Color; import java.awt.EventQueue; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.geom.GeneralPath; import javax.swing.JFrame; import javax.swing.JPanel; class Surface extends JPanel { private final double points[][] = { { 0, 85 }, { 75, 75 }, { 100, 10 }, { 125, 75 }, { 200, 85 }, { 150, 125 }, { 160, 190 }, { 100, 150 }, { 40, 190 }, { 50, 125 }, { 0, 85 } }; private void doDrawing(Graphics g) { Graphics2D g2d = (Graphics2D) g.create(); g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); g2d.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY); g2d.setPaint(Color.gray); g2d.translate(25, 5); GeneralPath star = new GeneralPath(); star.moveTo(points[0][0], points[0][1]); for (int k = 1; k < points.length; k++) star.lineTo(points[k][0], points[k][1]); star.closePath(); g2d.fill(star); g2d.dispose(); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } } public class StarEx extends JFrame { public StarEx() { initUI(); } private void initUI() { add(new Surface()); setTitle("Star"); setSize(350, 250); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { @Override public void run() { StarEx ex = new StarEx(); ex.setVisible(true); } }); } } ``` 我們從一系列角度創造一顆星星。 ```java private final double points[][] = { { 0, 85 }, { 75, 75 }, { 100, 10 }, { 125, 75 }, { 200, 85 }, { 150, 125 }, { 160, 190 }, { 100, 150 }, { 40, 190 }, { 50, 125 }, { 0, 85 } }; ``` 這些是星星的坐標。 ```java GeneralPath star = new GeneralPath(); ``` 在這里，我們實例化了`GeneralPath`類。 ```java star.moveTo(points[0][0], points[0][1]); ``` 我們移到`GeneralPath`的初始坐標。 ```java for (int k = 1; k < points.length; k++) star.lineTo(points[k][0], points[k][1]); ``` 在這里，我們連接星的所有坐標。 ```java star.closePath(); g2d.fill(star); ``` 我們封閉路徑并填充星星內部。 ![Star](https://img.kancloud.cn/03/72/037276a598339c924926e7ca55bc92ae_350x250.jpg) 圖：星星 ## 區域創建復雜形狀的另一種方法是組成區域。 `Area`存儲和操縱二維空間的封閉區域的與分辨率無關的描述。可以通過加，減，交，異或運算來操縱它。 `AreasEx.java` ```java package com.zetcode; import java.awt.Color; import java.awt.EventQueue; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.RenderingHints; import java.awt.geom.Area; import java.awt.geom.Ellipse2D; import java.awt.geom.Rectangle2D; import javax.swing.JFrame; import javax.swing.JPanel; class Surface extends JPanel { public void doDrawing(Graphics g) { Graphics2D g2d = (Graphics2D) g; RenderingHints rh = new RenderingHints( RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); rh.put(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY); g2d.setRenderingHints(rh); g2d.setPaint(Color.gray); Area a1 = new Area(new Rectangle2D.Double(20, 20, 100, 100)); Area a2 = new Area(new Ellipse2D.Double(50, 50, 100, 100)); a1.subtract(a2); g2d.fill(a1); Area a3 = new Area(new Rectangle2D.Double(150, 20, 100, 100)); Area a4 = new Area(new Ellipse2D.Double(150, 20, 100, 100)); a3.subtract(a4); g2d.fill(a3); Area a5 = new Area(new Rectangle2D.Double(280, 20, 100, 100)); Area a6 = new Area(new Ellipse2D.Double(320, 40, 100, 100)); a5.add(a6); g2d.fill(a5); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } } public class AreasEx extends JFrame { public AreasEx() { initUI(); } private void initUI() { add(new Surface()); setTitle("Areas"); setSize(450, 200); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { @Override public void run() { AreasEx ex = new AreasEx(); ex.setVisible(true); } }); } } ``` 該示例通過操縱區域來創建三種不同的形狀。 ```java Area a1 = new Area(new Rectangle2D.Double(20, 20, 100, 100)); Area a2 = new Area(new Ellipse2D.Double(50, 50, 100, 100)); a1.subtract(a2); g2d.fill(a1); ``` 此代碼通過從矩形中減去橢圓來構造形狀。 ```java Area a5 = new Area(new Rectangle2D.Double(280, 20, 100, 100)); Area a6 = new Area(new Ellipse2D.Double(320, 40, 100, 100)); a5.add(a6); g2d.fill(a5); ``` 這些線通過在橢圓上添加矩形來構造形狀。 ![Areas](https://img.kancloud.cn/d7/8f/d78f6a10acbcf381514f2e395cd26a3d_450x200.jpg) 圖：區域 ## 色彩 `Color`類用于處理 Java 2D 中的顏色。要使用當前顏色填充矩形，我們使用`fillRect()`方法。 `ColoursEx.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 Surface extends JPanel { public void doDrawing(Graphics g) { Graphics2D g2d = (Graphics2D) g; g2d.setColor(new Color(125, 167, 116)); g2d.fillRect(10, 10, 90, 60); g2d.setColor(new Color(42, 179, 231)); g2d.fillRect(130, 10, 90, 60); g2d.setColor(new Color(70, 67, 123)); g2d.fillRect(250, 10, 90, 60); g2d.setColor(new Color(130, 100, 84)); g2d.fillRect(10, 100, 90, 60); g2d.setColor(new Color(252, 211, 61)); g2d.fillRect(130, 100, 90, 60); g2d.setColor(new Color(241, 98, 69)); g2d.fillRect(250, 100, 90, 60); g2d.setColor(new Color(217, 146, 54)); g2d.fillRect(10, 190, 90, 60); g2d.setColor(new Color(63, 121, 186)); g2d.fillRect(130, 190, 90, 60); g2d.setColor(new Color(31, 21, 1)); g2d.fillRect(250, 190, 90, 60); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } } public class ColoursEx extends JFrame { public ColoursEx() { initUI(); } private void initUI() { add(new Surface()); setTitle("Colours"); setSize(360, 300); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { @Override public void run() { ColoursEx ex = new ColoursEx(); ex.setVisible(true); } }); } } ``` 在示例中，我們繪制了九個彩色矩形。 ```java Graphics2D g2d = (Graphics2D) g; ``` 更改圖形上下文的`color`屬性時，無需創建`Graphics2D`類的副本或重置該值。 ```java g2d.setColor(new Color(125, 167, 116)); ``` 使用`Color`類創建新的顏色。構造器的參數是新顏色的紅色，綠色和藍色部分。 `setColor()`方法將圖形上下文的當前顏色設置為指定的顏色值。所有后續圖形操作均使用此顏色值。 ```java g2d.fillRect(10, 15, 90, 60); ``` 為了用顏色填充矩形，我們使用`fillRect()`方法。 ![Colours](https://img.kancloud.cn/09/66/0966d8781a02045ecd50bc16a556f8e2_360x300.jpg) 圖：顏色 ## 漸變在計算機圖形學中，漸變是從淺到深或從一種顏色到另一種顏色的陰影的平滑混合。在 2D 繪圖程序和繪畫程序中，漸變用于創建彩色背景和特殊效果以及模擬燈光和陰影。（answers.com） `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 Surface extends JPanel { private void doDrawing(Graphics g) { Graphics2D g2d = (Graphics2D) g.create(); GradientPaint gp1 = new GradientPaint(5, 5, Color.red, 20, 20, Color.black, true); g2d.setPaint(gp1); g2d.fillRect(20, 20, 300, 40); GradientPaint gp2 = new GradientPaint(5, 25, Color.yellow, 20, 2, Color.black, true); g2d.setPaint(gp2); g2d.fillRect(20, 80, 300, 40); GradientPaint gp3 = new GradientPaint(5, 25, Color.green, 2, 2, Color.black, true); g2d.setPaint(gp3); g2d.fillRect(20, 140, 300, 40); GradientPaint gp4 = new GradientPaint(25, 25, Color.blue, 15, 25, Color.black, true); g2d.setPaint(gp4); g2d.fillRect(20, 200, 300, 40); GradientPaint gp5 = new GradientPaint(0, 0, Color.orange, 0, 20, Color.black, true); g2d.setPaint(gp5); g2d.fillRect(20, 260, 300, 40); g2d.dispose(); } @Override public void paintComponent(Graphics g) { super.paintComponent(g); doDrawing(g); } } public class GradientsEx extends JFrame { public GradientsEx() { initUI(); } private void initUI() { add(new Surface()); setTitle("Gradients"); setSize(350, 350); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { @Override public void run() { GradientsEx ex = new GradientsEx(); ex.setVisible(true); } }); } } ``` 我們的代碼示例展示了五個帶有漸變的矩形。 ```java GradientPaint gp4 = new GradientPaint(25, 25, Color.blue, 15, 25, Color.black, true); ``` 要使用漸變，我們使用`GradientPaint`類。通過操縱顏色值以及起點和終點，我們可以獲得不同的結果。 ```java g2d.setPaint(gp4); ``` 通過調用`setPaint()`方法激活漸變。 ![Gradients](https://img.kancloud.cn/f5/d4/f5d40e20673d5314b0c8f4cd1e049d33_350x350.jpg) 圖：漸變 ## 紋理紋理是應用于形狀的位圖圖像。要在 Java 2D 中使用紋理，我們使用`TexturePaint`類。通過`setPaint()`方法應用紋理。 `TexturesEx.java` ```java package com.zetcode; 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; import java.util.logging.Level; import java.util.logging.Logger; import javax.imageio.ImageIO; import javax.swing.JFrame; import javax.swing.JPanel; class Surface extends JPanel { private BufferedImage slate; private BufferedImage java; private BufferedImage pane; private TexturePaint slatetp; private TexturePaint javatp; private TexturePaint panetp; public Surface() { loadImages(); } private void loadImages() { try { slate = ImageIO.read(new File("slate.png")); java = ImageIO.read(new File("java.png")); pane = ImageIO.read(new File("pane.png")); } catch (IOException ex) { Logger.getLogger(Surface.class.getName()).log( Level.SEVERE, null, ex); } } private void doDrawing(Graphics g) { Graphics2D g2d = (Graphics2D) g.create(); slatetp = new TexturePaint(slate, new Rectangle(0, 0, 90, 60)); javatp = new TexturePaint(java, new Rectangle(0, 0, 90, 60)); 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); } } public class TexturesEx extends JFrame { public TexturesEx() { initUI(); } private void initUI() { add(new Surface()); setTitle("Textures"); setSize(360, 120); setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { EventQueue.invokeLater(new Runnable() { @Override public void run() { TexturesEx ex = new TexturesEx(); ex.setVisible(true); } }); } } ``` 在代碼示例中，我們用三個不同的紋理填充三個矩形。 ```java slate = ImageIO.read(new File("slate.png")); ``` 使用`ImageIO`類，我們將圖像讀取到緩沖圖像中。 ```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/f4/5c/f45cf55dbb66c69fa323e314e4a18784_360x120.jpg) 圖：紋理在 Java 2D 教程的這一部分中，我們介紹了 Java 2D 庫的一些基本形狀和更高級的形狀。