# Ruby GTK 中的自定義小部件 > 原文： [http://zetcode.com/gui/rubygtk/customwidget/](http://zetcode.com/gui/rubygtk/customwidget/) 工具箱通常僅提供最常見的窗口小部件，例如按鈕，文本窗口小部件，滑塊等。沒有工具箱可以提供所有可能的窗口小部件。 程序員必須自己創建此類小部件。 他們使用工具箱提供的繪圖工具來完成此任務。 有兩種可能：程序員可以修改或增強現有的小部件，或者可以從頭開始創建自定義小部件。 ## 刻錄小部件 這是我們從頭開始創建的小部件的示例。 可以在各種媒體刻錄應用（例如 K3B）中找到此小部件。 `custom.rb` ```rb #!/usr/bin/ruby ''' ZetCode Ruby GTK tutorial This example creates a custom widget. Author: Jan Bodnar Website: www.zetcode.com Last modified: May 2014 ''' require 'gtk3' class Burning < Gtk::DrawingArea def initialize parent @parent = parent super() @num = [ "75", "150", "225", "300", "375", "450", "525", "600", "675" ] set_size_request 1, 30 signal_connect "draw" do on_draw end end def on_draw cr = window.create_cairo_context draw_widget cr end def draw_widget cr cr.set_line_width 0.8 cr.select_font_face "Courier", Cairo::FONT_SLANT_NORMAL, Cairo::FONT_WEIGHT_NORMAL cr.set_font_size 11 width = allocation.width @cur_width = @parent.get_cur_value step = (width / 10.0).round till = (width / 750.0) * @cur_width full = (width / 750.0) * 700 if @cur_width >= 700 cr.set_source_rgb 1.0, 1.0, 0.72 cr.rectangle 0, 0, full, 30 cr.clip cr.paint cr.reset_clip cr.set_source_rgb 1.0, 0.68, 0.68 cr.rectangle full, 0, till-full, 30 cr.clip cr.paint cr.reset_clip else cr.set_source_rgb 1.0, 1.0, 0.72 cr.rectangle 0, 0, till, 30 cr.clip cr.paint cr.reset_clip end cr.set_source_rgb(0.35, 0.31, 0.24) for i in 1..@num.length cr.move_to i*step, 0 cr.line_to i*step, 5 cr.stroke te = cr.text_extents @num[i-1] cr.move_to i*step-te.width/2, 15 cr.text_path @num[i-1] cr.stroke end end end class RubyApp < Gtk::Window def initialize super set_title "Burning" signal_connect "destroy" do Gtk.main_quit end set_size_request 350, 200 set_window_position :center @cur_value = 0 vbox = Gtk::Box.new :vertical, 2 scale = Gtk::Scale.new :horizontal scale.set_range 0, 750 scale.set_digits 0 scale.set_size_request 160, 35 scale.set_value @cur_value scale.signal_connect "value-changed" do |w| on_changed w end fix = Gtk::Fixed.new fix.put scale, 50, 50 vbox.pack_start fix @burning = Burning.new self vbox.pack_start @burning, :expand => false, :fill => false, :padding => 0 add vbox show_all end def on_changed widget @cur_value = widget.value @burning.queue_draw end def get_cur_value return @cur_value end end Gtk.init window = RubyApp.new Gtk.main ``` 我們在窗口底部放置一個`Gtk::DrawingArea`并手動繪制整個窗口小部件。 所有重要的代碼都駐留在`draw_widget`中，這是從 Burning 類的`on_draw`方法調用的。 此小部件以圖形方式顯示介質的總容量和可用空間。 該小部件由比例小部件控制。 自定義窗口小部件的最小值為 0，最大值為 750。如果值達到 700，則開始繪制紅色。 這通常表示過度燃燒。 ```rb @num = [ "75", "150", "225", "300", "375", "450", "525", "600", "675" ] ``` 這些數字顯示在刻錄小部件上。 它們顯示了介質的容量。 ```rb @cur_width = @parent.get_cur_value ``` 從父小部件中，我們獲得了比例小部件的當前值。 ```rb till = (width / 750.0) * @cur_width full = (width / 750.0) * 700 ``` 我們使用`width`變量在小數位的值和自定義小部件的度量之間進行轉換。 請注意，我們使用浮點值-在繪圖中獲得更高的精度。 `till`參數確定要繪制的總大小。 該值來自滑塊小部件。 它占整個面積的一部分。 `full`參數確定我們開始繪制紅色的點。 ```rb cr.set_source_rgb 1.0, 1.0, 0.72 cr.rectangle 0, 0, till, 30 cr.clip cr.paint cr.reset_clip ``` 我們繪制一個黃色矩形，直到介質充滿的地方。 ```rb te = cr.text_extents @num[i-1] cr.move_to i*step-te.width/2, 15 cr.text_path @num[i-1] cr.stroke ``` 這里的代碼在刻錄小部件上繪制數字。 我們計算文本范圍以正確定位文本。 ```rb def on_changed widget @cur_value = widget.value @burning.queue_draw end ``` 我們從小部件中獲取值，并將其存儲在`@cur_value`變量中以備后用。 我們重新繪制刻錄的小部件。  圖：刻錄小部件 在本章中，我們使用 GTK 和 Ruby 編程語言創建了一個自定義小部件。