# Ruby GTK Cario 繪圖 > 原文： [http://zetcode.com/gui/rubygtk/cairo/](http://zetcode.com/gui/rubygtk/cairo/) 在 Ruby GTK 教程的這一部分中，我們將使用 Cairo 庫進行一些繪圖。 Cairo 是用于創建 2D 矢量圖形的庫。 我們可以使用它來繪制自己的小部件，圖表或各種效果和動畫。 ## 色彩 在第一個示例中，我們將處理顏色。 顏色是代表紅色，綠色和藍色（RGB）強度值的組合的對象。 Cario 有效 RGB 值在 0 到 1 的范圍內。 ```rb #!/usr/bin/ruby ''' ZetCode Ruby GTK tutorial This program draws tree rectangles filled with different colours. Author: Jan Bodnar Website: www.zetcode.com Last modified: May 2014 ''' require 'gtk3' class RubyApp < Gtk::Window def initialize super set_title "Colours" signal_connect "destroy" do Gtk.main_quit end init_ui set_default_size 360, 100 set_window_position :center show_all end def init_ui @darea = Gtk::DrawingArea.new @darea.signal_connect "draw" do on_draw end add @darea end def on_draw cr = @darea.window.create_cairo_context draw_colors cr end def draw_colors cr cr.set_source_rgb 0.2, 0.23, 0.9 cr.rectangle 10, 15, 90, 60 cr.fill cr.set_source_rgb 0.9, 0.1, 0.1 cr.rectangle 130, 15, 90, 60 cr.fill cr.set_source_rgb 0.4, 0.9, 0.4 cr.rectangle 250, 15, 90, 60 cr.fill end end Gtk.init window = RubyApp.new Gtk.main ``` 在我們的示例中，我們將繪制三個矩形，并用三種不同的顏色填充它們。 ```rb @darea = Gtk::DrawingArea.new ``` 我們將在`Gtk::DrawingArea`小部件上進行繪制操作。 ```rb @darea.signal_connect "draw" do on_draw end ``` 當需要重繪窗口時，會觸發`draw`信號。 響應此信號，我們稱為`on_draw`方法。 ```rb cr = @darea.window.create_cairo_context ``` 我們從繪圖區域的`Gdk::Window`創建 cairo 上下文對象。 上下文是我們繪制所有圖紙的對象。 ```rb draw_colors cr ``` 實際圖形委托給`draw_colors`方法。 我們通過 Cario 語境。 ```rb cr.set_source_rgb 0.2, 0.23, 0.9 ``` `set_source_rgb`方法為 Cario 上下文設置顏色。 該方法的三個參數是顏色強度值。 ```rb cr.rectangle 10, 15, 90, 60 ``` 我們畫一個矩形。 前兩個參數是矩形左上角的 x，y 坐標。 最后兩個參數是矩形的寬度和高度。 ```rb cr.fill ``` 我們用當前顏色填充矩形的內部。  圖：顏色 ## 基本形狀 下一個示例將一些基本形狀繪制到窗口上。 ```rb #!/usr/bin/ruby ''' ZetCode Ruby GTK tutorial This code example draws basic shapes. Author: Jan Bodnar Website: www.zetcode.com Last modified: May 2014 ''' require 'gtk3' class RubyApp < Gtk::Window def initialize super set_title "Basic shapes" signal_connect "destroy" do Gtk.main_quit end init_ui set_default_size 390, 240 set_window_position :center show_all end def init_ui @darea = Gtk::DrawingArea.new @darea.signal_connect "draw" do on_draw end add @darea end def on_draw cr = @darea.window.create_cairo_context draw_shapes cr end def draw_shapes cr cr.set_source_rgb 0.6, 0.6, 0.6 cr.rectangle 20, 20, 120, 80 cr.rectangle 180, 20, 80, 80 cr.fill cr.arc 330, 60, 40, 0, 2*Math::PI cr.fill cr.arc 90, 160, 40, Math::PI/4, Math::PI cr.fill cr.translate 220, 180 cr.scale 1, 0.7 cr.arc 0, 0, 50, 0, 2*Math::PI cr.fill end end Gtk.init window = RubyApp.new Gtk.main ``` 在此示例中，我們將創建一個矩形，一個正方形，一個圓形，一個弧形和一個橢圓形。 我們用藍色繪制輪廓，內部用白色繪制。 ```rb cr.rectangle 20, 20, 120, 80 cr.rectangle 180, 20, 80, 80 cr.fill ``` 這些線繪制一個矩形和一個正方形。 ```rb cr.arc 330, 60, 40, 0, 2*Math::PI cr.fill ``` 此處`arc`方法繪制一個完整的圓。 ```rb cr.translate 220, 180 cr.scale 1, 0.7 cr.arc 0, 0, 50, 0, 2*Math::PI cr.fill ``` `translate`方法將對象移動到特定點。 如果要繪制橢圓形，請先進行一些縮放。 在這里`scale`方法縮小 y 軸。  圖：基本形狀 ## 透明矩形 透明度是能夠透視材料的質量。 了解透明度的最簡單方法是想象一塊玻璃或水。 從技術上講，光線可以穿過玻璃，這樣我們就可以看到玻璃后面的物體。 在計算機圖形學中，我們可以使用 alpha 合成實現透明效果。 Alpha 合成是將圖像與背景組合以創建部分透明外觀的過程。 合成過程使用 Alpha 通道。 （wikipedia.org，answers.com） ```rb #!/usr/bin/ruby ''' ZetCode Ruby GTK tutorial This program shows transparent rectangles. Author: Jan Bodnar Website: www.zetcode.com Last modified: May 2014 ''' require 'gtk3' class RubyApp < Gtk::Window def initialize super set_title "Transparent rectangles" signal_connect "destroy" do Gtk.main_quit end init_ui set_default_size 590, 90 set_window_position :center show_all end def init_ui @darea = Gtk::DrawingArea.new @darea.signal_connect "draw" do on_draw end add @darea end def on_draw cr = @darea.window.create_cairo_context draw_rectangles cr end def draw_rectangles cr for i in 1..10 cr.set_source_rgba 0, 0, 1, i*0.1 cr.rectangle 50*i, 20, 40, 40 cr.fill end end end Gtk.init window = RubyApp.new Gtk.main ``` 在示例中，我們將繪制十個具有不同透明度級別的矩形。 ```rb cr.set_source_rgba 0, 0, 1, i*0.1 ``` `set_source_rgba`方法的最后一個參數是 alpha 透明度。  圖：透明矩形 ## 甜甜圈 在下面的示例中，我們通過旋轉一堆橢圓來創建復雜的形狀。 ```rb #!/usr/bin/ruby ''' ZetCode Ruby GTK tutorial This program draws a donut shape. Author: Jan Bodnar Website: www.zetcode.com Last modified: May 2014 ''' require 'gtk3' class RubyApp < Gtk::Window def initialize super set_title "Donut" signal_connect "destroy" do Gtk.main_quit end init_ui set_default_size 350, 250 set_window_position :center show_all end def init_ui @darea = Gtk::DrawingArea.new @darea.signal_connect "draw" do on_draw end add @darea end def on_draw cr = @darea.window.create_cairo_context draw_donut cr end def draw_donut cr cr.set_line_width 0.5 w = allocation.width h = allocation.height cr.translate w/2, h/2 cr.arc 0, 0, 120, 0, 2*Math::PI cr.stroke for i in 1..36 cr.save cr.rotate i*Math::PI/36 cr.scale 0.3, 1 cr.arc 0, 0, 120, 0, 2*Math::PI cr.restore cr.stroke end end end Gtk.init window = RubyApp.new Gtk.main ``` 在此示例中，我們創建一個甜甜圈。 形狀類似于曲奇，因此得名“甜甜圈”。 ```rb cr.translate w/2, h/2 ``` 用戶空間原點移動到窗口的中心。 圓和所有其他橢圓的中心都位于此處。 ```rb cr.translate w/2, h/2 cr.arc 0, 0, 120, 0, 2*Math::PI cr.stroke ``` 這是外部橢圓。 在此橢圓內，我們繪制所有其他橢圓。 ```rb for i in 1..36 cr.save cr.rotate i*Math::PI/36 cr.scale 0.3, 1 cr.arc 0, 0, 120, 0, 2*Math::PI cr.restore cr.stroke end ``` 我們沿著邊界圓的路徑創建了 36 個橢圓。 我們使用`save()`和`restore()`方法將每個旋轉和縮放操作相互隔離。  圖：多納圈 ## 繪制文字 在下一個示例中，我們在窗口上繪制一些文本。 ```rb #!/usr/bin/ruby ''' ZetCode Ruby GTK tutorial This program draws text. Author: Jan Bodnar Website: www.zetcode.com Last modified: May 2014 ''' require 'gtk3' class RubyApp < Gtk::Window def initialize super set_title "Soulmate" signal_connect "destroy" do Gtk.main_quit end init_ui set_default_size 370, 240 set_window_position :center show_all end def init_ui @darea = Gtk::DrawingArea.new @darea.signal_connect "draw" do on_draw end add @darea end def on_draw cr = @darea.window.create_cairo_context draw_lyrics cr end def draw_lyrics cr cr.set_source_rgb 0.1, 0.1, 0.1 cr.select_font_face "Purisa", Cairo::FONT_SLANT_NORMAL, Cairo::FONT_WEIGHT_NORMAL cr.set_font_size 13 cr.move_to 20, 30 cr.show_text "Most relationships seem so transitory" cr.move_to 20, 60 cr.show_text "They're all good but not the permanent one" cr.move_to 20, 120 cr.show_text "Who doesn't long for someone to hold" cr.move_to 20, 150 cr.show_text "Who knows how to love without being told" cr.move_to 20, 180 cr.show_text "Somebody tell me why I'm on my own" cr.move_to 20, 210 cr.show_text "If there's a soulmate for everyone" end end Gtk.init window = RubyApp.new Gtk.main ``` 我們將展示 Natasha Bedingfield 的 Soulmate 歌曲的歌詞的一部分。 ```rb cr.select_font_face "Purisa", Cairo::FONT_SLANT_NORMAL, Cairo::FONT_WEIGHT_NORMAL ``` 在這里，我們指定使用的字體：Purisa normal。 ```rb cr.set_font_size 13 ``` `set_font_size`方法指定字體的大小。 ```rb cr.move_to 20, 30 ``` 我們移至將要繪制文本的位置。 ```rb cr.show_text "Most relationships seem so transitory" ``` `show_text`方法在窗口上繪制文本。  圖：靈魂伴侶 在 Ruby GTK 教程的這一章中，我們使用 Cairo 庫繪圖。