原文： http://zetcode.com/gui/jrubyswing/painting/

在 JRuby Swing 编程教程的这一部分中，我们将进行绘图。

我们使用绘图来创建图表，自定义组件或创建游戏。 要进行绘图，我们使用 Swing 工具包提供的绘图 API。 绘图是在paintComponent方法中完成的。 在绘图过程中，我们使用Graphics2D对象。 它是一个图形上下文，允许应用绘制到组件上。 它是渲染二维形状，文本和图像的基础类。

色彩

颜色是代表红色，绿色和蓝色（RGB）强度值的组合的对象。 我们使用Color类在 Swing 中处理颜色。

  1. #!/usr/local/bin/jruby
  3. # ZetCode JRuby Swing tutorial
  4. # 
  5. # In this example we draw nine rectangles
  6. # filled with nine different colors.
  7. # 
  8. # author: Jan Bodnar
  9. # website: www.zetcode.com
  10. # last modified: December 2010
  12. include Java
  14. import java.awt.Color
  15. import javax.swing.JFrame
  16. import javax.swing.JPanel
  18. class Canvas < JPanel
  20.     def paintComponent g
  22.         self.drawColorRectangles g
  24.     end
  26.     def drawColorRectangles g
  28.         g.setColor Color.new 125, 167, 116
  29.         g.fillRect 10, 15, 90, 60
  31.         g.setColor Color.new 42, 179, 231
  32.         g.fillRect 130, 15, 90, 60
  34.         g.setColor Color.new 70, 67, 123
  35.         g.fillRect 250, 15, 90, 60
  37.         g.setColor Color.new 130, 100, 84
  38.         g.fillRect 10, 105, 90, 60
  40.         g.setColor Color.new 252, 211, 61
  41.         g.fillRect 130, 105, 90, 60
  43.         g.setColor Color.new 241, 98, 69
  44.         g.fillRect 250, 105, 90, 60
  46.         g.setColor Color.new 217, 146, 54
  47.         g.fillRect 10, 195, 90, 60
  49.         g.setColor Color.new 63, 121, 186
  50.         g.fillRect 130, 195, 90, 60
  52.         g.setColor Color.new 31, 21, 1
  53.         g.fillRect 250, 195, 90, 60
  55.     end
  56. end    
  58. class Example < JFrame
  60.     def initialize
  61.         super "Colors"
  63.         self.initUI
  64.     end
  66.     def initUI
  68.         canvas = Canvas.new
  69.         self.getContentPane.add canvas
  71.         self.setDefaultCloseOperation JFrame::EXIT_ON_CLOSE
  72.         self.setSize 360, 300
  73.         self.setLocationRelativeTo nil
  74.         self.setVisible true
  75.     end
  76. end
  78. Example.new

在代码示例中，我们绘制了九个矩形，并用不同的颜色值填充它们。

  1. def paintComponent g

在大多数情况下，自定义绘图是在paintComponent中完成的。 g参数是图形上下文。 我们称此对象为绘图操作。

  1. g.setColor Color.new 125, 167, 116

我们将上下文的当前颜色设置为指定的颜色。 使用此图形上下文的所有后续图形操作均使用此指定的颜色。

  1. g.fillRect 10, 15, 90, 60

我们使用上面指定的颜色值填充位于x = 10，y = 15且宽度= 90和高度= 60的矩形。

在 JRuby Swing 中绘图 - 图1

图：颜色

形状

Swing 绘图 API 可以绘制各种形状。 以下编程代码示例将显示其中的一些。

  1. #!/usr/local/bin/jruby
  3. # ZetCode JRuby Swing tutorial
  4. # 
  5. # This example draws simple shapes
  6. # on a panel.
  7. # 
  8. # author: Jan Bodnar
  9. # website: www.zetcode.com
  10. # last modified: December 2010
  12. include Java
  14. import java.awt.Color
  15. import java.awt.RenderingHints
  16. import java.awt.geom.Ellipse2D
  17. import javax.swing.JFrame
  18. import javax.swing.JPanel
  20. class Canvas < JPanel
  22.     def paintComponent g
  24.         self.drawShapes g      
  25.     end  
  27.     def drawShapes g
  29.         g.setColor Color.new 150, 150, 150
  31.         rh = RenderingHints.new RenderingHints::KEY_ANTIALIASING,
  32.              RenderingHints::VALUE_ANTIALIAS_ON
  34.         rh.put RenderingHints::KEY_RENDERING,
  35.                RenderingHints::VALUE_RENDER_QUALITY
  37.         g.setRenderingHints rh
  39.         g.fillRect 20, 20, 50, 50
  40.         g.fillRect 120, 20, 90, 60
  41.         g.fillRoundRect 250, 20, 70, 60, 25, 25
  43.         g.fill Ellipse2D::Double.new 10, 100, 80, 100
  44.         g.fillArc 120, 130, 110, 100, 5, 150
  45.         g.fillOval 270, 130, 50, 50
  47.     end
  48. end    
  50. class Example < JFrame
  52.     def initialize
  53.         super "Shapes"
  55.         self.initUI
  56.     end
  58.     def initUI
  60.         canvas = Canvas.new
  61.         self.getContentPane.add canvas
  63.         self.setDefaultCloseOperation JFrame::EXIT_ON_CLOSE
  64.         self.setSize 350, 250
  65.         self.setLocationRelativeTo nil
  66.         self.setVisible true
  67.     end
  68. end
  70. Example.new

在此代码示例中，我们在窗口上绘制了六个不同的形状。 正方形，矩形，圆角矩形，椭圆形，弧形和椭圆形。 我们不会绘制形状的轮廓，但是会用灰色填充形状的内部空间。

  1. rh = RenderingHints.new RenderingHints::KEY_ANTIALIASING,
  2.       RenderingHints::VALUE_ANTIALIAS_ON

借助渲染提示，我们可以控制绘图的质量。 在上面的代码中，我们实现了抗锯齿。 使用抗锯齿，形状更平滑。

  1. g.setColor Color.new 150, 150, 150

我们将以某种灰色绘图。

  1. g.fillRect 20, 20, 50, 50
  2. g.fillRect 120, 20, 90, 60
  3. g.fillRoundRect 250, 20, 70, 60, 25, 25

在这里，我们绘制一个矩形，一个正方形和一个圆角矩形。 这些方法中的前四个参数是 x，y 坐标以及宽度和高度。 fillRoundRect的最后两个参数是四个角处圆弧的水平和垂直直径。

  1. g.fill Ellipse2D::Double.new 10, 100, 80, 100
  2. g.fillArc 120, 130, 110, 100, 5, 150
  3. g.fillOval 270, 130, 50, 50

这三条线绘制一个椭圆，一个弧形和一个椭圆形。

在 JRuby Swing 中绘图 - 图2

图：形状

透明矩形

透明性是指能够透视材料的质量。 了解透明度的最简单方法是想象一块玻璃或水。 从技术上讲，光线可以穿过玻璃，这样我们就可以看到玻璃后面的物体。

在计算机图形学中，我们可以使用 alpha 合成来实现透明效果。 Alpha 合成是将图像与背景组合以创建部分透明外观的过程。 合成过程使用 Alpha 通道。 （wikipedia.org，answers.com）

  1. #!/usr/local/bin/jruby
  3. # ZetCode JRuby Swing tutorial
  4. # 
  5. # This program draws ten
  6. # rectangles with different
  7. # levels of transparency.
  8. # 
  9. # author: Jan Bodnar
  10. # website: www.zetcode.com
  11. # last modified: December 2010
  13. include Java
  15. import java.awt.Color
  16. import java.awt.AlphaComposite
  17. import javax.swing.JFrame
  18. import javax.swing.JPanel
  20. class Canvas < JPanel
  22.     def paintComponent g
  24.         g.setColor Color::BLUE
  26.         for i in 1..10 do
  27.             g.setComposite AlphaComposite.getInstance AlphaComposite::SRC_OVER,
  28.                                                         i * 0.1
  29.             g.fillRect 50 * i, 20, 40, 40
  30.         end
  32.     end
  33. end    
  35. class Example < JFrame
  37.     def initialize
  38.         super "Transparent rectangles"
  40.         self.initUI
  41.     end
  43.     def initUI
  45.         canvas = Canvas.new
  46.         self.getContentPane.add canvas
  48.         self.setDefaultCloseOperation JFrame::EXIT_ON_CLOSE
  49.         self.setSize 590, 120
  50.         self.setLocationRelativeTo nil
  51.         self.setVisible true
  52.     end
  53. end
  55. Example.new

在示例中，我们将绘制十个具有不同透明度级别的矩形。

  1. g.setComposite AlphaComposite.getInstance AlphaComposite::SRC_OVER,
  2.                                                         i * 0.1

AlphaComposite类实现基本的 alpha 合成规则。

在 JRuby Swing 中绘图 - 图3

图：透明矩形

甜甜圈形状

在下面的示例中，我们通过旋转一堆椭圆来创建复杂的形状。 仿射变换由零个或多个线性变换（旋转，缩放或剪切）和平移（移位）组成。 AffineTransform是 Swing 中用于执行仿射变换的类。

  1. #!/usr/local/bin/jruby
  3. # ZetCode JRuby Swing tutorial
  4. # 
  5. # In this code example, we create
  6. # a Donut shape.
  7. # 
  8. # author: Jan Bodnar
  9. # website: www.zetcode.com
  10. # last modified: December 2010
  12. include Java
  14. import java.awt.BasicStroke
  15. import java.awt.Color
  16. import java.awt.RenderingHints
  17. import java.awt.geom.AffineTransform
  18. import java.awt.geom.Ellipse2D
  19. import javax.swing.JFrame
  20. import javax.swing.JPanel
  22. class Canvas < JPanel
  24.     def paintComponent g
  26.         self.drawDonut g
  28.     end
  30.     def drawDonut g
  32.         rh = RenderingHints.new RenderingHints::KEY_ANTIALIASING,
  33.              RenderingHints::VALUE_ANTIALIAS_ON
  35.         rh.put RenderingHints::KEY_RENDERING,
  36.                RenderingHints::VALUE_RENDER_QUALITY
  38.         g.setRenderingHints rh
  40.         size = self.getSize
  41.         w = size.getWidth
  42.         h = size.getHeight
  44.         e = Ellipse2D::Double.new 0, 0, 80, 130
  45.         g.setStroke BasicStroke.new 1
  46.         g.setColor Color.gray
  48.         deg = 0
  50.         72.times do
  51.             at = AffineTransform.getTranslateInstance w / 2, h / 2
  52.             at.rotate deg/180.0 * Math::PI 
  53.             g.draw at.createTransformedShape e
  54.             deg += 5
  55.         end
  57.     end
  58. end    
  60. class Example < JFrame
  62.     def initialize
  63.         super "Donut"
  65.         self.initUI
  66.     end
  68.     def initUI
  70.         canvas = Canvas.new
  71.         self.getContentPane.add canvas
  73.         self.setDefaultCloseOperation JFrame::EXIT_ON_CLOSE
  74.         self.setSize 350, 320
  75.         self.setLocationRelativeTo nil
  76.         self.setVisible true
  77.     end
  78. end
  80. Example.new

在此示例中，我们创建一个甜甜圈。 形状类似于曲奇，因此得名“甜甜圈”。 甜甜圈在窗口中居中。

  1. size = self.getSize
  2. w = size.getWidth
  3. h = size.getHeight

在这里，我们确定窗口的宽度和高度。 我们需要这些值来使甜甜圈形状居中。

  1. e = Ellipse2D::Double.new 0, 0, 80, 130

我们创建一个椭圆形。 我们将旋转此椭圆以创建甜甜圈形状。

  1. g.setStroke BasicStroke.new 1
  2. g.setColor Color.gray

我们为形状的轮廓设置笔触和颜色。

  1. deg = 0
  3. 72.times do

我们绘制一个椭圆对象 72 次。 每次，我们再将椭圆旋转 5 度。 这将创建我们的甜甜圈形状。

  1. at = AffineTransform.getTranslateInstance w / 2, h / 2
  2. at.rotate deg/180.0 * Math::PI 
  3. g.draw at.createTransformedShape e

在AffineTransform类的帮助下，我们将图形转换到窗口的中心。 然后我们进行旋转。 createTransformedShape方法会将这些仿射变换应用于椭圆。 然后使用draw方法绘制变换后的椭圆。 rotate方法以弧度表示角度，因此我们以度为单位计算弧度。

绘制文字

在最后一个示例中，我们将在窗口上绘制文本。

  1. #!/usr/local/bin/jruby
  3. # ZetCode JRuby Swing tutorial
  4. # 
  5. # In this example we draw lyrics of a 
  6. # song on the window panel.
  7. # 
  8. # author: Jan Bodnar
  9. # website: www.zetcode.com
  10. # last modified: December 2010
  12. include Java
  14. import java.awt.Color
  15. import java.awt.Font
  16. import java.awt.RenderingHints
  17. import java.awt.geom.Ellipse2D
  18. import javax.swing.JFrame
  19. import javax.swing.JPanel
  21. class Canvas < JPanel
  23.     def paintComponent g
  25.         self.drawLyrics g
  26.     end
  28.     def drawLyrics g
  30.         rh = RenderingHints.new RenderingHints::KEY_ANTIALIASING,
  31.             RenderingHints::VALUE_ANTIALIAS_ON
  33.         rh.put RenderingHints::KEY_RENDERING,
  34.                RenderingHints::VALUE_RENDER_QUALITY
  36.         g.setRenderingHints rh
  38.         g.setFont Font.new "Purisa", Font::PLAIN, 13
  40.         g.drawString "Most relationships seem so transitory", 20, 30
  41.         g.drawString "They're all good but not the permanent one", 20, 60
  42.         g.drawString "Who doesn't long for someone to hold", 20, 90
  43.         g.drawString "Who knows how to love you without being told", 20, 120
  44.         g.drawString "Somebody tell me why I'm on my own", 20, 150
  45.         g.drawString "If there's a soulmate for everyone", 20, 180
  47.     end
  48. end    
  50. class Example < JFrame
  52.     def initialize
  53.         super "Soulmate"
  55.         initUI
  56.     end
  58.     def initUI
  60.         canvas = Canvas.new
  61.         self.getContentPane.add canvas
  63.         self.setDefaultCloseOperation JFrame::EXIT_ON_CLOSE
  64.         self.setSize 400, 250
  65.         self.setLocationRelativeTo nil
  66.         self.setVisible true
  67.     end
  68. end
  70. Example.new

我们在窗口上画一首歌的歌词。

  1. rh = RenderingHints.new RenderingHints::KEY_TEXT_ANTIALIASING,
  2.     RenderingHints::VALUE_TEXT_ANTIALIAS_ON
  4. g.setRenderingHints rh

我们在画上应用文字抗锯齿。

  1. g.setFont Font.new "Purisa", Font::PLAIN, 13

我们指定字体名称，样式和磅值，并在其中绘制歌词。

  1. g.drawString "Most relationships seem so transitory", 20, 30

drawString方法绘制文本。

在 JRuby Swing 中绘图 - 图4

图：绘制文本

在 JRuby Swing 编程教程的这一部分中，我们做了一些绘图。