# 自定義小部件 > 原文： [http://zetcode.com/gui/phpgtktutorial/customwidget/](http://zetcode.com/gui/phpgtktutorial/customwidget/) 工具箱通常僅提供最常見的窗口小部件，例如按鈕，文本窗口小部件，滑塊等。沒有工具箱可以提供所有可能的窗口小部件。 如果需要更專業的小部件，我們必須自己創建它。 使用工具箱提供的繪圖工具創建自定義窗口小部件。 有兩種可能性。 程序員可以修改或增強現有的小部件。 或者，他可以從頭開始創建自定義窗口小部件。 ## 刻錄小部件 這是我們從頭開始創建的小部件的示例。 它基于最小的`GtkWidget`小部件。 可以在各種媒體刻錄應用（例如 Nero Burning ROM）中找到此自定義窗口小部件。 ```php <?php /* ZetCode PHP GTK tutorial This example creates a burning custom widget. author: Jan Bodnar website: www.zetcode.com last modified: August 2011 */ class Burning extends GtkDrawingArea { public function __construct($par) { parent::__construct(); $this->par = $par; $this->init_ui(); } public function init_ui() { $this->num = array("75", "150", "225", "300", "375", "450", "525", "600", "675"); $this->set_size_request(1, 30); $this->connect('expose_event', array($this, 'on_expose')); } public function on_expose() { $cr = $this->window->cairo_create(); $this->draw_widget($cr); } public function draw_widget($cr) { $cr->SetLineWidth(0.8); $cr->SelectFontFace("Courier", CairoFontSlant::NORMAL, CairoFontWeight::NORMAL); $cr->SetFontSize(11); $width = $this->get_allocation()->width; $this->cur_width = $this->par->get_cur_value(); $step = round($width / 10.0); $till = ($width / 750.0) * $this->cur_width; $full = ($width / 750.0) * 700; if ($this->cur_width >= 700) { $cr->SetSourceRgb(1.0, 1.0, 0.72); $cr->Rectangle(0, 0, $full, 30); $cr->Clip(); $cr->Paint(); $cr->ResetClip(); $cr->SetSourceRgb(1.0, 0.68, 0.68). $cr->Rectangle($full, 0, $till-$full, 30); $cr->Clip(); $cr->Paint(); $cr->ResetClip(); } else { $cr->SetSourceRgb(1.0, 1.0, 0.72); $cr->Rectangle(0, 0, $till, 30); $cr->Clip(); $cr->Paint(); $cr->ResetClip(); } $cr->SetSourceRgb(0.35, 0.31, 0.24); $len = count($this->num); for ($i=1; $i <= $len; $i++) { $cr->MoveTo($i*$step, 0); $cr->LineTo($i*$step, 5); $cr->Stroke(); $te = $cr->TextExtents($this->num[$i-1]); $cr->MoveTo($i*$step-$te['width']/2, 15); $cr->TextPath($this->num[$i-1]); $cr->Stroke(); } } } class Example extends GtkWindow { public function __construct() { parent::__construct(); $this->init_ui(); } private function init_ui() { $this->set_title('Burning widget'); $this->connect_simple('destroy', array('gtk', 'main_quit')); $this->cur_value = 0; $vbox = new GtkVBox(false, 2); $scale = new GtkHScale(); $scale->set_range(0, 750); $scale->set_digits(0); $scale->set_size_request(160, 35); $scale->set_value($this->cur_value); $scale->connect('value-changed', array($this, 'on_changed')); $fixed = new GtkFixed(); $fixed->put($scale, 50, 50); $vbox->pack_start($fixed); $this->burning = new Burning($this); $vbox->pack_start($this->burning, false, false, 0); $this->add($vbox); $this->set_default_size(350, 200); $this->set_position(GTK::WIN_POS_CENTER); $this->show_all(); } public function on_changed($sender) { $this->cur_value = $sender->get_value(); $this->burning->queue_draw(); } public function get_cur_value() { return $this->cur_value; } } new Example(); Gtk::main(); ?> ``` 我們在窗口底部放置一個`GtkDrawingArea`并手動繪制整個窗口小部件。 所有重要的代碼都駐留在`draw_widget()`中，這是從 Burning 類的`on_expose()`方法調用的。 此小部件以圖形方式顯示了介質的總容量和可供我們使用的可用空間。 該小部件由比例小部件控制。 自定義窗口小部件的最小值為 0，最大值為 750。如果值達到 700，則開始繪制紅色。 這通常表示過度燃燒。 ```php $this->num = array("75", "150", "225", "300", "375", "450", "525", "600", "675"); ``` 這些數字顯示在刻錄小部件上。 它們顯示了介質的容量。 ```php $this->cur_width = $this->par->get_cur_value(); ``` 從父小部件中，我們獲得了比例小部件的當前值。 ```php $till = ($width / 750.0) * $this->cur_width; $full = ($width / 750.0) * 700; ``` 我們使用`$width`變量進行轉換。 在比例尺值和自定義小部件的度量之間。 請注意，我們使用浮點值。 我們在繪圖中獲得了更高的精度。 `$till`參數確定要繪制的總大小。 該值來自滑塊小部件。 它占整個面積的一部分。 `$full`參數確定了我們開始繪制紅色的點。 ```php $cr->SetSourceRgb(1.0, 1.0, 0.72); $cr->Rectangle(0, 0, $full, 30); $cr->Clip(); $cr->Paint(); $cr->ResetClip(); ``` 我們繪制一個黃色矩形，直到介質充滿為止。 ```php $te = $cr->TextExtents($this->num[$i-1]); $cr->MoveTo($i*$step-$te['width']/2, 15); $cr->TextPath($this->num[$i-1]); $cr->Stroke(); ``` 這里的代碼在刻錄小部件上繪制數字。 我們計算文本范圍以正確定位文本。 ```php public function on_changed($sender) { $this->cur_value = $sender->get_value(); $this->burning->queue_draw(); } ``` 我們從小部件中獲取值，并將其存儲在`$this->cur_value`變量中以備后用。 我們重新繪制刻錄的小部件。  圖：刻錄小部件 在本章中，我們使用 GTK 和 PHP 編程語言創建了一個自定義窗口小部件。