# Cario 繪圖 > 原文： [http://zetcode.com/gui/phpgtktutorial/cairo/](http://zetcode.com/gui/phpgtktutorial/cairo/) 在 PHP GTK 教程的這一部分中，我們將使用 Cairo 庫進行一些繪圖。 目前，Seed 僅支持 Cario 庫的一小部分。 Cairo 是用于創建 2D 矢量圖形的庫。 我們可以使用它來繪制自己的小部件，圖表或各種效果或動畫。 Cairo for PHP 是與 PHP GTK 分開的項目。 除了 PHP GTK，我們還需要安裝 Cairo。 在構建庫之前，我們必須在系統上安裝`libcairo2-dev`包。 ```php svn co http://svn.php.net/repository/pecl/cairo/trunk cairo cd cairo/ $ phpize5 $ ./configure $ make $ make install ``` 在創建本教程時，以上命令用于為 PHP 安裝 Cairo。 最后，在安裝 Cairo 之后，我們需要為我們的 PHP 腳本啟用 Cairo 庫。 ```php $ sudo vi /etc/php5/cli/php.ini ;;;;;;;;;;;;;;;;;;;;;; ; Dynamic Extensions ; ;;;;;;;;;;;;;;;;;;;;;; ; extension=php_gtk2.so extension=cairo.so ``` 我們編輯`php.ini`文件并添加 Cairo 動態擴展。 ## 色彩 在第一個示例中，我們將處理顏色。 顏色是代表紅色，綠色和藍色（RGB）強度值的組合的對象。 Cario 有效 RGB 值在 0 到 1 的范圍內。 ```php <?php /* ZetCode PHP GTK tutorial In this program, we will draw three colored rectangles on the drawing area using Cairo. author: Jan Bodnar website: www.zetcode.com last modified: August 2011 */ class Example extends GtkWindow { public function __construct() { parent::__construct(); $this->init_ui(); } public function init_ui() { $this->set_title('Colors'); $this->connect_simple('destroy', array('gtk', 'main_quit')); $darea = new GtkDrawingArea(); $darea->connect('expose_event', array($this, 'on_expose')); $this->add($darea); $this->set_default_size(360, 100); $this->set_position(GTK::WIN_POS_CENTER); $this->show_all(); } public function on_expose($darea, $event) { $cr = $darea->window->cairo_create(); $this->draw_colors($cr); } public function draw_colors($cr) { $cr->setSourceRgb(0.2, 0.23, 0.9); $cr->rectangle(10, 15, 90, 60); $cr->fill(); $cr->setSourceRgb(0.9, 0.1, 0.1); $cr->rectangle(130, 15, 90, 60); $cr->fill(); $cr->setSourceRgb(0.4, 0.9, 0.4); $cr->rectangle(250, 15, 90, 60); $cr->fill(); } } new Example(); Gtk::main(); ?> ``` 在我們的示例中，我們將繪制三個矩形，并用三種不同的顏色填充它們。 ```php $darea = new GtkDrawingArea(); ``` 我們將在`GtkDrawingArea`小部件上進行繪制操作。 ```php $darea->connect('expose_event', array($this, 'on_expose')); ``` 當需要重繪窗口時，將觸發`expose_event`。 為響應此事件，我們調用`on_expose()`方法。 ```php $cr = $darea->window->cairo_create(); ``` 我們從繪圖區域的`GdkWindow`創建 cairo 上下文對象。 上下文是我們繪制所有圖紙的對象。 ```php $this->draw_colors($cr); ``` 實際圖形委托給`draw_colors()`方法。 ```php $cr->setSourceRgb(0.2, 0.23, 0.9); ``` `setSourceRgb()`方法為 Cario 上下文設置顏色。 該方法的三個參數是顏色強度值。 ```php $cr->rectangle(10, 15, 90, 60); ``` 我們畫一個矩形。 前兩個參數是矩形左上角的 x，y 坐標。 最后兩個參數是矩形的寬度和高度。 ```php $cr->fill(); ``` 我們用當前顏色填充矩形的內部。  圖：顏色 ## 基本形狀 下一個示例將一些基本形狀繪制到窗口上。 ```php <?php /* ZetCode PHP GTK tutorial This code example draws basic shapes with the Cairo library. author: Jan Bodnar website: www.zetcode.com last modified: August 2011 */ class Example extends GtkWindow { public function __construct() { parent::__construct(); $this->init_ui(); } public function init_ui() { $this->set_title('Basic shapes'); $this->connect_simple('destroy', array('gtk', 'main_quit')); $darea = new GtkDrawingArea(); $darea->connect('expose_event', array($this, 'on_expose')); $this->add($darea); $this->set_default_size(390, 240); $this->set_position(GTK::WIN_POS_CENTER); $this->show_all(); } public function on_expose($darea, $event) { $cr = $darea->window->cairo_create(); $this->draw_shapes($cr); } public function draw_shapes($cr) { $cr->SetSourceRgb(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*M_PI); $cr->fill(); $cr->arc(90, 160, 40, M_PI/4, M_PI); $cr->fill(); $cr->translate(220, 180); $cr->scale(1, 0.7); $cr->arc(0, 0, 50, 0, 2*M_PI); $cr->fill(); } } new Example(); Gtk::main(); ?> ``` 在此示例中，我們將創建一個矩形，一個正方形，一個圓形，一個弧形和一個橢圓形。 我們用藍色繪制輪廓，內部用白色繪制。 ```php $cr->rectangle(20, 20, 120, 80); $cr->rectangle(180, 20, 80, 80); $cr->fill(); ``` 這些線繪制一個矩形和一個正方形。 ```php $cr->arc(330, 60, 40, 0, 2*M_PI); $cr->fill(); ``` 此處`arc()`方法繪制一個完整的圓。 ```php $cr->translate(220, 180); $cr->scale(1, 0.7); $cr->arc(0, 0, 50, 0, 2*M_PI); $cr->fill(); ``` `translate()`方法將對象移動到特定點。 如果要繪制橢圓形，請先進行一些縮放。 在這里`scale()`方法縮小 y 軸。  圖：基本形狀 ## 透明矩形 透明性是指能夠透視材料的質量。 了解透明度的最簡單方法是想象一塊玻璃或水。 從技術上講，光線可以穿過玻璃，這樣我們就可以看到玻璃后面的物體。 在計算機圖形學中，我們可以使用 alpha 合成來實現透明效果。 Alpha 合成是將圖像與背景組合以創建部分透明外觀的過程。 合成過程使用 Alpha 通道。 （wikipedia.org，answers.com） ```php <?php /* ZetCode PHP GTK tutorial This code example draws nine rectangles with different levels of transparency. author: Jan Bodnar website: www.zetcode.com last modified: August 2011 */ class Example extends GtkWindow { public function __construct() { parent::__construct(); $this->init_ui(); } public function init_ui() { $this->set_title('Transparent rectangles'); $this->connect_simple('destroy', array('gtk', 'main_quit')); $darea = new GtkDrawingArea(); $darea->connect('expose_event', array($this, 'on_expose')); $this->add($darea); $this->set_default_size(590, 90); $this->set_position(GTK::WIN_POS_CENTER); $this->show_all(); } public function on_expose($darea, $event) { $cr = $darea->window->cairo_create(); $this->draw_recs($cr); } public function draw_recs($cr) { for ($i=1; $i<=10; $i++) { $cr->SetSourceRgba(0, 0, 1, $i*0.1); $cr->rectangle(50*$i, 20, 40, 40); $cr->fill(); } } } new Example(); Gtk::main(); ?> ``` 在示例中，我們將繪制十個具有不同透明度級別的矩形。 ```php $cr->SetSourceRgba(0, 0, 1, $i*0.1); ``` `set_source_rgba()`方法的最后一個參數是 alpha 透明度。  圖：透明矩形 ## 甜甜圈 在下面的示例中，我們通過旋轉一堆橢圓來創建復雜的形狀。 ```php <?php /* ZetCode PHP GTK tutorial In this program, we draw a donut shape by rotating a bunch of ellipses. author: Jan Bodnar website: www.zetcode.com last modified: August 2011 */ class Example extends GtkWindow { public function __construct() { parent::__construct(); $this->init_ui(); } public function init_ui() { $this->set_title('Donut'); $this->connect_simple('destroy', array('gtk', 'main_quit')); $darea = new GtkDrawingArea(); $darea->connect('expose_event', array($this, 'on_expose')); $this->add($darea); $this->set_default_size(350, 250); $this->set_position(GTK::WIN_POS_CENTER); $this->show_all(); } public function on_expose($darea, $event) { $cr = $darea->window->cairo_create(); $this->draw_donut($cr); } public function draw_donut($cr) { $cr->SetLineWidth(0.5); $w = $this->get_allocation()->width; $h = $this->get_allocation()->height; $cr->translate($w/2, $h/2); $cr->arc(0, 0, 120, 0, 2*M_PI); $cr->stroke(); for ($i=1; $i<=36; $i++) { $cr->save(); $cr->rotate($i*M_PI/36); $cr->scale(0.3, 1); $cr->arc(0, 0, 120, 0, 2*M_PI); $cr->restore(); $cr->stroke(); } } } new Example(); Gtk::main(); ?> ``` 在此示例中，我們創建一個甜甜圈。 形狀類似于曲奇，因此得名“甜甜圈”。 ```php $cr->translate($w/2, $h/2); $cr->arc(0, 0, 120, 0, 2*M_PI); $cr->stroke(); ``` 剛開始時有一個橢圓。 ```php for ($i=1; $i<=36; $i++) { $cr->save(); $cr->rotate($i*M_PI/36); $cr->scale(0.3, 1); $cr->arc(0, 0, 120, 0, 2*M_PI); $cr->restore(); $cr->stroke(); } ``` 旋轉幾圈后，有一個甜甜圈。 ## 繪制文字 在下一個示例中，我們在窗口上繪制一些文本。 ```php <?php /* ZetCode PHP GTK tutorial In this program, we draw text on the window. author: Jan Bodnar website: www.zetcode.com last modified: August 2011 */ class Example extends GtkWindow { public function __construct() { parent::__construct(); $this->init_ui(); } public function init_ui() { $this->set_title('Soulmate'); $this->connect_simple('destroy', array('gtk', 'main_quit')); $darea = new GtkDrawingArea(); $darea->connect('expose_event', array($this, 'on_expose')); $this->add($darea); $this->set_default_size(350, 250); $this->set_position(GTK::WIN_POS_CENTER); $this->show_all(); } public function on_expose($darea, $event) { $cr = $darea->window->cairo_create(); $this->draw_text($cr); } public function draw_text($cr) { $cr->SetSourceRgb(0.1, 0.1, 0.1); $cr->SelectFontFace("Purisa", CairoFontSlant::NORMAL, CairoFontWeight::NORMAL); $cr->SetFontSize(13); $cr->MoveTo(20, 30); $cr->ShowText("Most relationships seem so transitory"); $cr->MoveTo(20, 60); $cr->ShowText("They're all good but not the permanent one"); $cr->MoveTo(20, 120); $cr->ShowText("Who doesn't long for someone to hold"); $cr->MoveTo(20, 150); $cr->ShowText("Who knows how to love without being told"); $cr->MoveTo(20, 180); $cr->ShowText("Somebody tell me why I'm on my own"); $cr->MoveTo(20, 210); $cr->ShowText("If there's a soulmate for everyone"); } } new Example(); Gtk::main(); ?> ``` 我們顯示 Natasha Bedingfields Soulmate 歌曲的部分歌詞。 ```php $cr->SelectFontFace("Purisa", CairoFontSlant::NORMAL, CairoFontWeight::NORMAL); ``` 在這里，我們指定使用的字體。 Purisa 正常字體。 ```php $cr->SetFontSize(13); ``` 我們指定字體的大小。 ```php $cr->MoveTo(20, 30); ``` 我們移動到要繪制文本的位置。 ```php $cr->ShowText("Most relationships seem so transitory"); ``` `ShowText()`方法將文本繪制到窗口上。  圖：靈魂伴侶 在 PHP GTK 教程的這一章中，我們使用 Cairo 庫進行繪圖。