原文： http://zetcode.com/gui/rubygtk/cairo/

在 Ruby GTK 教程的这一部分中，我们将使用 Cairo 库进行一些绘图。

Cairo 是用于创建 2D 矢量图形的库。 我们可以使用它来绘制自己的小部件，图表或各种效果和动画。

色彩

在第一个示例中，我们将处理颜色。 颜色是代表红色，绿色和蓝色（RGB）强度值的组合的对象。 Cario 有效 RGB 值在 0 到 1 的范围内。

  1. #!/usr/bin/ruby
  3. '''
  4. ZetCode Ruby GTK tutorial
  6. This program draws tree rectangles filled
  7. with different colours.
  9. Author: Jan Bodnar
  10. Website: www.zetcode.com
  11. Last modified: May 2014
  12. '''
  14. require 'gtk3'
  16. class RubyApp < Gtk::Window
  18.     def initialize
  19.         super
  21.         set_title "Colours"
  22.         signal_connect "destroy" do 
  23.             Gtk.main_quit 
  24.         end
  26.         init_ui
  28.         set_default_size 360, 100
  29.         set_window_position :center
  30.         show_all
  31.     end
  33.     def init_ui
  35.         @darea = Gtk::DrawingArea.new  
  37.         @darea.signal_connect "draw" do  
  38.             on_draw
  39.         end
  41.         add @darea
  42.     end
  44.     def on_draw
  46.         cr = @darea.window.create_cairo_context  
  47.         draw_colors cr
  48.     end 
  50.     def draw_colors cr
  52.         cr.set_source_rgb 0.2, 0.23, 0.9
  53.         cr.rectangle 10, 15, 90, 60
  54.         cr.fill
  56.         cr.set_source_rgb 0.9, 0.1, 0.1
  57.         cr.rectangle 130, 15, 90, 60
  58.         cr.fill
  60.         cr.set_source_rgb 0.4, 0.9, 0.4
  61.         cr.rectangle 250, 15, 90, 60
  62.         cr.fill
  63.     end
  64. end
  66. Gtk.init
  67.     window = RubyApp.new
  68. Gtk.main

在我们的示例中，我们将绘制三个矩形，并用三种不同的颜色填充它们。

  1. @darea = Gtk::DrawingArea.new

我们将在Gtk::DrawingArea小部件上进行绘制操作。

  1. @darea.signal_connect "draw" do  
  2.     on_draw
  3. end

当需要重绘窗口时，会触发draw信号。 响应此信号，我们称为on_draw方法。

  1. cr = @darea.window.create_cairo_context

我们从绘图区域的Gdk::Window创建 cairo 上下文对象。 上下文是我们绘制所有图纸的对象。

  1. draw_colors cr

实际图形委托给draw_colors方法。 我们通过 Cario 语境。

  1. cr.set_source_rgb 0.2, 0.23, 0.9

set_source_rgb方法为 Cario 上下文设置颜色。 该方法的三个参数是颜色强度值。

  1. cr.rectangle 10, 15, 90, 60

我们画一个矩形。 前两个参数是矩形左上角的 x，y 坐标。 最后两个参数是矩形的宽度和高度。

  1. cr.fill

我们用当前颜色填充矩形的内部。

Ruby GTK Cario 绘图 - 图1

图：颜色

基本形状

下一个示例将一些基本形状绘制到窗口上。

  1. #!/usr/bin/ruby
  3. '''
  4. ZetCode Ruby GTK tutorial
  6. This code example draws basic shapes.
  8. Author: Jan Bodnar
  9. Website: www.zetcode.com
  10. Last modified: May 2014
  11. '''
  13. require 'gtk3'
  15. class RubyApp < Gtk::Window
  17.     def initialize
  18.         super
  20.         set_title "Basic shapes"
  21.         signal_connect "destroy" do 
  22.             Gtk.main_quit 
  23.         end
  25.         init_ui
  27.         set_default_size 390, 240
  28.         set_window_position :center
  30.         show_all
  31.     end
  33.     def init_ui
  35.         @darea = Gtk::DrawingArea.new  
  37.         @darea.signal_connect "draw" do  
  38.             on_draw
  39.         end
  41.         add @darea
  42.     end
  44.     def on_draw
  46.         cr = @darea.window.create_cairo_context  
  47.         draw_shapes cr
  48.     end
  50.     def draw_shapes cr
  52.         cr.set_source_rgb 0.6, 0.6, 0.6
  54.         cr.rectangle 20, 20, 120, 80
  55.         cr.rectangle 180, 20, 80, 80
  56.         cr.fill
  58.         cr.arc 330, 60, 40, 0, 2*Math::PI
  59.         cr.fill
  61.         cr.arc 90, 160, 40, Math::PI/4, Math::PI
  62.         cr.fill
  64.         cr.translate 220, 180
  65.         cr.scale 1, 0.7
  66.         cr.arc 0, 0, 50, 0, 2*Math::PI
  67.         cr.fill
  68.     end
  69. end
  71. Gtk.init
  72.     window = RubyApp.new
  73. Gtk.main

在此示例中，我们将创建一个矩形，一个正方形，一个圆形，一个弧形和一个椭圆形。 我们用蓝色绘制轮廓，内部用白色绘制。

  1. cr.rectangle 20, 20, 120, 80
  2. cr.rectangle 180, 20, 80, 80
  3. cr.fill

这些线绘制一个矩形和一个正方形。

  1. cr.arc 330, 60, 40, 0, 2*Math::PI
  2. cr.fill

此处arc方法绘制一个完整的圆。

  1. cr.translate 220, 180
  2. cr.scale 1, 0.7
  3. cr.arc 0, 0, 50, 0, 2*Math::PI
  4. cr.fill

translate方法将对象移动到特定点。 如果要绘制椭圆形，请先进行一些缩放。 在这里scale方法缩小 y 轴。

Ruby GTK Cario 绘图 - 图2

图：基本形状

透明矩形

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

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

  1. #!/usr/bin/ruby
  3. '''
  4. ZetCode Ruby GTK tutorial
  6. This program shows transparent rectangles.
  8. Author: Jan Bodnar
  9. Website: www.zetcode.com
  10. Last modified: May 2014
  11. '''
  13. require 'gtk3'
  15. class RubyApp < Gtk::Window
  17.     def initialize
  18.         super
  20.         set_title "Transparent rectangles"
  21.         signal_connect "destroy" do 
  22.             Gtk.main_quit 
  23.         end
  25.         init_ui
  27.         set_default_size 590, 90
  28.         set_window_position :center
  30.         show_all
  31.     end
  33.     def init_ui
  35.         @darea = Gtk::DrawingArea.new  
  37.         @darea.signal_connect "draw" do  
  38.             on_draw
  39.         end
  41.         add @darea
  42.     end
  44.     def on_draw
  46.         cr = @darea.window.create_cairo_context  
  47.         draw_rectangles cr        
  48.     end
  50.     def draw_rectangles cr
  52.         for i in 1..10
  53.             cr.set_source_rgba 0, 0, 1, i*0.1
  54.             cr.rectangle 50*i, 20, 40, 40
  55.             cr.fill
  56.         end    
  57.     end 
  58. end
  60. Gtk.init
  61.     window = RubyApp.new
  62. Gtk.main

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

  1. cr.set_source_rgba 0, 0, 1, i*0.1

set_source_rgba方法的最后一个参数是 alpha 透明度。

Ruby GTK Cario 绘图 - 图3

图：透明矩形

甜甜圈

在下面的示例中，我们通过旋转一堆椭圆来创建复杂的形状。

  1. #!/usr/bin/ruby
  3. '''
  4. ZetCode Ruby GTK tutorial
  6. This program draws a donut shape.
  8. Author: Jan Bodnar
  9. Website: www.zetcode.com
  10. Last modified: May 2014
  11. '''
  13. require 'gtk3'
  15. class RubyApp < Gtk::Window
  17.     def initialize
  18.         super
  20.         set_title "Donut"
  21.         signal_connect "destroy" do 
  22.             Gtk.main_quit 
  23.         end
  25.         init_ui
  27.         set_default_size 350, 250
  28.         set_window_position :center
  30.         show_all
  31.     end
  33.     def init_ui
  35.         @darea = Gtk::DrawingArea.new  
  37.         @darea.signal_connect "draw" do  
  38.             on_draw
  39.         end
  41.         add @darea
  42.     end
  44.     def on_draw
  46.         cr = @darea.window.create_cairo_context  
  47.         draw_donut cr
  48.     end
  50.     def draw_donut cr
  52.         cr.set_line_width 0.5
  54.         w = allocation.width
  55.         h = allocation.height
  57.         cr.translate w/2, h/2
  58.         cr.arc 0, 0, 120, 0, 2*Math::PI
  59.         cr.stroke
  61.         for i in 1..36
  62.             cr.save
  63.             cr.rotate i*Math::PI/36
  64.             cr.scale 0.3, 1
  65.             cr.arc 0, 0, 120, 0, 2*Math::PI
  66.             cr.restore
  67.             cr.stroke
  68.         end
  69.     end
  70. end
  72. Gtk.init
  73.     window = RubyApp.new
  74. Gtk.main

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

  1. cr.translate w/2, h/2

用户空间原点移动到窗口的中心。 圆和所有其他椭圆的中心都位于此处。

  1. cr.translate w/2, h/2
  2. cr.arc 0, 0, 120, 0, 2*Math::PI
  3. cr.stroke

这是外部椭圆。 在此椭圆内，我们绘制所有其他椭圆。

  1. for i in 1..36
  2.     cr.save
  3.     cr.rotate i*Math::PI/36
  4.     cr.scale 0.3, 1
  5.     cr.arc 0, 0, 120, 0, 2*Math::PI
  6.     cr.restore
  7.     cr.stroke
  8. end

我们沿着边界圆的路径创建了 36 个椭圆。 我们使用save()和restore()方法将每个旋转和缩放操作相互隔离。

Ruby GTK Cario 绘图 - 图4

图：多纳圈

绘制文字

在下一个示例中，我们在窗口上绘制一些文本。

  1. #!/usr/bin/ruby
  3. '''
  4. ZetCode Ruby GTK tutorial
  6. This program draws text.
  8. Author: Jan Bodnar
  9. Website: www.zetcode.com
  10. Last modified: May 2014
  11. '''
  13. require 'gtk3'
  15. class RubyApp < Gtk::Window
  17.     def initialize
  18.         super
  20.         set_title "Soulmate"
  21.         signal_connect "destroy" do 
  22.             Gtk.main_quit 
  23.         end
  25.         init_ui
  27.         set_default_size 370, 240
  28.         set_window_position :center
  30.         show_all
  31.     end
  33.     def init_ui
  35.         @darea = Gtk::DrawingArea.new  
  37.         @darea.signal_connect "draw" do  
  38.             on_draw
  39.         end
  41.         add @darea 
  42.     end
  44.     def on_draw
  46.         cr = @darea.window.create_cairo_context  
  47.         draw_lyrics cr
  48.     end
  50.     def draw_lyrics cr
  52.         cr.set_source_rgb 0.1, 0.1, 0.1
  54.         cr.select_font_face "Purisa", Cairo::FONT_SLANT_NORMAL, 
  55.             Cairo::FONT_WEIGHT_NORMAL
  56.         cr.set_font_size 13 
  58.         cr.move_to 20, 30
  59.         cr.show_text "Most relationships seem so transitory"
  60.         cr.move_to 20, 60
  61.         cr.show_text "They're all good but not the permanent one"
  62.         cr.move_to 20, 120
  63.         cr.show_text "Who doesn't long for someone to hold"
  64.         cr.move_to 20, 150
  65.         cr.show_text "Who knows how to love without being told"
  66.         cr.move_to 20, 180
  67.         cr.show_text "Somebody tell me why I'm on my own"
  68.         cr.move_to 20, 210
  69.         cr.show_text "If there's a soulmate for everyone"
  70.     end
  71. end
  73. Gtk.init
  74.     window = RubyApp.new
  75. Gtk.main

我们将展示 Natasha Bedingfield 的 Soulmate 歌曲的歌词的一部分。

  1. cr.select_font_face "Purisa", Cairo::FONT_SLANT_NORMAL, 
  2.     Cairo::FONT_WEIGHT_NORMAL

在这里，我们指定使用的字体：Purisa normal。

  1. cr.set_font_size 13

set_font_size方法指定字体的大小。

  1. cr.move_to 20, 30

我们移至将要绘制文本的位置。

  1. cr.show_text "Most relationships seem so transitory"

show_text方法在窗口上绘制文本。

Ruby GTK Cario 绘图 - 图5

图：灵魂伴侣

在 Ruby GTK 教程的这一章中，我们使用 Cairo 库绘图。