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

工具箱通常仅提供最常见的窗口小部件，例如按钮，文本窗口小部件，滑块等。没有工具箱可以提供所有可能的窗口小部件。 程序员必须自己创建此类小部件。 他们使用工具箱提供的绘图工具来完成此任务。 有两种可能：程序员可以修改或增强现有的小部件，或者可以从头开始创建自定义小部件。

刻录小部件

这是我们从头开始创建的小部件的示例。 可以在各种媒体刻录应用（例如 K3B）中找到此小部件。

custom.rb

  1. #!/usr/bin/ruby
  3. '''
  4. ZetCode Ruby GTK tutorial
  6. This example creates a custom widget.
  8. Author: Jan Bodnar
  9. Website: www.zetcode.com
  10. Last modified: May 2014
  11. '''
  13. require 'gtk3'
  15. class Burning < Gtk::DrawingArea
  17.     def initialize parent
  18.         @parent = parent
  20.         super()
  22.         @num = [ "75", "150", "225", "300", 
  23.             "375", "450", "525", "600", "675" ]
  25.         set_size_request 1, 30
  26.         signal_connect "draw" do
  27.             on_draw
  28.         end
  29.     end
  31.     def on_draw
  33.         cr = window.create_cairo_context
  34.         draw_widget cr
  35.     end
  37.     def draw_widget cr
  39.         cr.set_line_width 0.8
  41.         cr.select_font_face "Courier", 
  42.             Cairo::FONT_SLANT_NORMAL, Cairo::FONT_WEIGHT_NORMAL
  43.         cr.set_font_size 11
  45.         width = allocation.width
  47.         @cur_width = @parent.get_cur_value
  49.         step = (width / 10.0).round
  51.         till = (width / 750.0) * @cur_width
  52.         full = (width / 750.0) * 700
  54.         if @cur_width >= 700
  56.             cr.set_source_rgb 1.0, 1.0, 0.72
  57.             cr.rectangle 0, 0, full, 30
  58.             cr.clip
  59.             cr.paint
  60.             cr.reset_clip
  62.             cr.set_source_rgb 1.0, 0.68, 0.68
  63.             cr.rectangle full, 0, till-full, 30
  64.             cr.clip
  65.             cr.paint
  66.             cr.reset_clip
  68.         else
  69.             cr.set_source_rgb 1.0, 1.0, 0.72
  70.             cr.rectangle 0, 0, till, 30
  71.             cr.clip
  72.             cr.paint
  73.             cr.reset_clip
  74.         end
  76.         cr.set_source_rgb(0.35, 0.31, 0.24)
  78.         for i in 1..@num.length
  79.             cr.move_to i*step, 0
  80.             cr.line_to i*step, 5
  81.             cr.stroke
  83.             te = cr.text_extents @num[i-1]
  84.             cr.move_to i*step-te.width/2, 15
  85.             cr.text_path @num[i-1]
  86.             cr.stroke
  87.         end         
  88.     end
  89. end
  91. class RubyApp < Gtk::Window
  93.     def initialize
  94.         super
  96.         set_title "Burning"
  97.         signal_connect "destroy" do 
  98.             Gtk.main_quit 
  99.         end
  101.         set_size_request 350, 200        
  102.         set_window_position :center
  104.         @cur_value = 0
  106.         vbox = Gtk::Box.new :vertical, 2
  108.         scale = Gtk::Scale.new :horizontal
  109.         scale.set_range 0, 750
  110.         scale.set_digits 0
  111.         scale.set_size_request 160, 35
  112.         scale.set_value @cur_value
  114.         scale.signal_connect "value-changed" do |w|
  115.             on_changed w
  116.         end
  118.         fix = Gtk::Fixed.new
  119.         fix.put scale, 50, 50
  121.         vbox.pack_start fix
  123.         @burning = Burning.new self
  124.         vbox.pack_start @burning, :expand => false, 
  125.             :fill => false, :padding => 0
  127.         add vbox
  128.         show_all
  129.     end    
  131.     def on_changed widget
  133.         @cur_value = widget.value
  134.         @burning.queue_draw
  135.     end
  137.     def get_cur_value
  138.         return @cur_value
  139.     end
  140. end
  142. Gtk.init
  143.     window = RubyApp.new
  144. Gtk.main

我们在窗口底部放置一个Gtk::DrawingArea并手动绘制整个窗口小部件。 所有重要的代码都驻留在draw_widget中，这是从 Burning 类的on_draw方法调用的。 此小部件以图形方式显示介质的总容量和可用空间。 该小部件由比例小部件控制。 自定义窗口小部件的最小值为 0，最大值为 750。如果值达到 700，则开始绘制红色。 这通常表示过度燃烧。

  1. @num = [ "75", "150", "225", "300", 
  2.     "375", "450", "525", "600", "675" ]

这些数字显示在刻录小部件上。 它们显示了介质的容量。

  1. @cur_width = @parent.get_cur_value

从父小部件中，我们获得了比例小部件的当前值。

  1. till = (width / 750.0) * @cur_width
  2. full = (width / 750.0) * 700

我们使用width变量在小数位的值和自定义小部件的度量之间进行转换。 请注意，我们使用浮点值-在绘图中获得更高的精度。 till参数确定要绘制的总大小。 该值来自滑块小部件。 它占整个面积的一部分。 full参数确定我们开始绘制红色的点。

  1. cr.set_source_rgb 1.0, 1.0, 0.72
  2. cr.rectangle 0, 0, till, 30
  3. cr.clip
  4. cr.paint
  5. cr.reset_clip

我们绘制一个黄色矩形，直到介质充满的地方。

  1. te = cr.text_extents @num[i-1]
  2. cr.move_to i*step-te.width/2, 15
  3. cr.text_path @num[i-1]
  4. cr.stroke

这里的代码在刻录小部件上绘制数字。 我们计算文本范围以正确定位文本。

  1. def on_changed widget
  3.     @cur_value = widget.value
  4.     @burning.queue_draw
  5. end

我们从小部件中获取值，并将其存储在@cur_value变量中以备后用。 我们重新绘制刻录的小部件。

Ruby GTK 中的自定义小部件 - 图1

图：刻录小部件

在本章中，我们使用 GTK 和 Ruby 编程语言创建了一个自定义小部件。