原文： http://zetcode.com/gui/phpgtktutorial/cairo/

在 PHP GTK 教程的这一部分中，我们将使用 Cairo 库进行一些绘图。 目前，Seed 仅支持 Cario 库的一小部分。

Cairo 是用于创建 2D 矢量图形的库。 我们可以使用它来绘制自己的小部件，图表或各种效果或动画。

Cairo for PHP 是与 PHP GTK 分开的项目。 除了 PHP GTK，我们还需要安装 Cairo。 在构建库之前，我们必须在系统上安装libcairo2-dev包。

  1. svn co http://svn.php.net/repository/pecl/cairo/trunk cairo
  2. cd cairo/
  3. $ phpize5
  4. $ ./configure 
  5. $ make
  6. $ make install

在创建本教程时，以上命令用于为 PHP 安装 Cairo。

最后，在安装 Cairo 之后，我们需要为我们的 PHP 脚本启用 Cairo 库。

  1. $ sudo vi /etc/php5/cli/php.ini 
  3. ;;;;;;;;;;;;;;;;;;;;;;
  4. ; Dynamic Extensions ;
  5. ;;;;;;;;;;;;;;;;;;;;;;
  7. ;
  8. extension=php_gtk2.so
  9. extension=cairo.so

我们编辑php.ini文件并添加 Cairo 动态扩展。

色彩

在第一个示例中，我们将处理颜色。 颜色是代表红色，绿色和蓝色（RGB）强度值的组合的对象。 Cario 有效 RGB 值在 0 到 1 的范围内。

  1. <?php
  3. /* 
  4. ZetCode PHP GTK tutorial
  6. In this program, we will draw three
  7. colored rectangles on the drawing area
  8. using Cairo.
  10. author: Jan Bodnar
  11. website: www.zetcode.com
  12. last modified: August 2011
  13. */
  15. class Example extends GtkWindow { 
  17.     public function __construct() { 
  19.         parent::__construct(); 
  21.         $this->init_ui();
  23.     } 
  25.     public function init_ui() {
  27.         $this->set_title('Colors');         
  28.         $this->connect_simple('destroy', array('gtk', 'main_quit')); 
  30.         $darea = new GtkDrawingArea();
  31.         $darea->connect('expose_event', array($this, 'on_expose')); 
  33.         $this->add($darea);    
  35.         $this->set_default_size(360, 100); 
  36.         $this->set_position(GTK::WIN_POS_CENTER);
  37.         $this->show_all();         
  38.     }
  40.     public function on_expose($darea, $event) {
  42.             $cr = $darea->window->cairo_create();
  43.             $this->draw_colors($cr);        
  45.     }
  47.     public function draw_colors($cr) {
  49.         $cr->setSourceRgb(0.2, 0.23, 0.9);
  50.         $cr->rectangle(10, 15, 90, 60);
  51.         $cr->fill();
  53.         $cr->setSourceRgb(0.9, 0.1, 0.1);
  54.         $cr->rectangle(130, 15, 90, 60);
  55.         $cr->fill();
  57.         $cr->setSourceRgb(0.4, 0.9, 0.4);
  58.         $cr->rectangle(250, 15, 90, 60);
  59.         $cr->fill();            
  60.     }   
  61. } 
  63. new Example(); 
  64. Gtk::main();
  66. ?>

在我们的示例中，我们将绘制三个矩形，并用三种不同的颜色填充它们。

  1. $darea = new GtkDrawingArea();

我们将在GtkDrawingArea小部件上进行绘制操作。

  1. $darea->connect('expose_event', array($this, 'on_expose'));

当需要重绘窗口时，将触发expose_event。 为响应此事件，我们调用on_expose()方法。

  1. $cr = $darea->window->cairo_create();

我们从绘图区域的GdkWindow创建 cairo 上下文对象。 上下文是我们绘制所有图纸的对象。

  1. $this->draw_colors($cr);

实际图形委托给draw_colors()方法。

  1. $cr->setSourceRgb(0.2, 0.23, 0.9);

setSourceRgb()方法为 Cario 上下文设置颜色。 该方法的三个参数是颜色强度值。

  1. $cr->rectangle(10, 15, 90, 60);

我们画一个矩形。 前两个参数是矩形左上角的 x，y 坐标。 最后两个参数是矩形的宽度和高度。

  1. $cr->fill();

我们用当前颜色填充矩形的内部。

Cario 绘图 - 图1

图：颜色

基本形状

下一个示例将一些基本形状绘制到窗口上。

  1. <?php
  3. /* 
  4. ZetCode PHP GTK tutorial
  6. This code example draws basic shapes
  7. with the Cairo library.
  9. author: Jan Bodnar
  10. website: www.zetcode.com
  11. last modified: August 2011
  12. */
  14. class Example extends GtkWindow { 
  16.     public function __construct() { 
  18.         parent::__construct(); 
  20.         $this->init_ui();
  22.     } 
  24.     public function init_ui() {
  26.         $this->set_title('Basic shapes');         
  27.         $this->connect_simple('destroy', array('gtk', 'main_quit')); 
  29.         $darea = new GtkDrawingArea();
  30.         $darea->connect('expose_event', array($this, 'on_expose')); 
  32.         $this->add($darea);    
  34.         $this->set_default_size(390, 240); 
  35.         $this->set_position(GTK::WIN_POS_CENTER);
  36.         $this->show_all();         
  37.     }
  39.     public function on_expose($darea, $event) {
  41.         $cr = $darea->window->cairo_create();
  42.         $this->draw_shapes($cr);        
  44.     }
  46.     public function draw_shapes($cr) {
  48.         $cr->SetSourceRgb(0.6, 0.6, 0.6);
  50.         $cr->rectangle(20, 20, 120, 80);
  51.         $cr->rectangle(180, 20, 80, 80);
  52.         $cr->fill();
  54.         $cr->arc(330, 60, 40, 0, 2*M_PI);
  55.         $cr->fill();
  57.         $cr->arc(90, 160, 40, M_PI/4, M_PI);
  58.         $cr->fill();
  60.         $cr->translate(220, 180);
  61.         $cr->scale(1, 0.7);
  62.         $cr->arc(0, 0, 50, 0, 2*M_PI);
  63.         $cr->fill();          
  64.     }   
  65. } 
  67. new Example(); 
  68. Gtk::main();
  70. ?>

在此示例中，我们将创建一个矩形，一个正方形，一个圆形，一个弧形和一个椭圆形。 我们用蓝色绘制轮廓，内部用白色绘制。

  1. $cr->rectangle(20, 20, 120, 80);
  2. $cr->rectangle(180, 20, 80, 80);
  3. $cr->fill();

这些线绘制一个矩形和一个正方形。

  1. $cr->arc(330, 60, 40, 0, 2*M_PI);
  2. $cr->fill();

此处arc()方法绘制一个完整的圆。

  1. $cr->translate(220, 180);
  2. $cr->scale(1, 0.7);
  3. $cr->arc(0, 0, 50, 0, 2*M_PI);
  4. $cr->fill();

translate()方法将对象移动到特定点。 如果要绘制椭圆形，请先进行一些缩放。 在这里scale()方法缩小 y 轴。

Cario 绘图 - 图2

图：基本形状

透明矩形

透明性是指能够透视材料的质量。 了解透明度的最简单方法是想象一块玻璃或水。 从技术上讲，光线可以穿过玻璃，这样我们就可以看到玻璃后面的物体。

在计算机图形学中，我们可以使用 alpha 合成来实现透明效果。 Alpha 合成是将图像与背景组合以创建部分透明外观的过程。 合成过程使用 Alpha 通道。 （wikipedia.org，answers.com）

  1. <?php
  3. /* 
  4. ZetCode PHP GTK tutorial
  6. This code example draws nine rectangles
  7. with different levels of transparency.
  9. author: Jan Bodnar
  10. website: www.zetcode.com
  11. last modified: August 2011
  12. */
  14. class Example extends GtkWindow { 
  16.     public function __construct() { 
  18.         parent::__construct(); 
  20.         $this->init_ui();
  22.     } 
  24.     public function init_ui() {
  26.         $this->set_title('Transparent rectangles');         
  27.         $this->connect_simple('destroy', array('gtk', 'main_quit')); 
  29.         $darea = new GtkDrawingArea();
  30.         $darea->connect('expose_event', array($this, 'on_expose')); 
  32.         $this->add($darea);    
  34.         $this->set_default_size(590, 90); 
  35.         $this->set_position(GTK::WIN_POS_CENTER);
  36.         $this->show_all();         
  37.     }
  39.     public function on_expose($darea, $event) {
  41.         $cr = $darea->window->cairo_create();
  42.         $this->draw_recs($cr);        
  44.     }
  46.     public function draw_recs($cr) {
  48.         for ($i=1; $i<=10; $i++) {
  49.             $cr->SetSourceRgba(0, 0, 1, $i*0.1);
  50.             $cr->rectangle(50*$i, 20, 40, 40);
  51.             $cr->fill();
  52.         }     
  53.     }   
  54. } 
  56. new Example(); 
  57. Gtk::main();
  59. ?>

在示例中，我们将绘制十个具有不同透明度级别的矩形。

  1. $cr->SetSourceRgba(0, 0, 1, $i*0.1);

set_source_rgba()方法的最后一个参数是 alpha 透明度。

Cario 绘图 - 图3

图：透明矩形

甜甜圈

在下面的示例中，我们通过旋转一堆椭圆来创建复杂的形状。

  2. <?php
  4. /* 
  5. ZetCode PHP GTK tutorial
  7. In this program, we draw a donut shape
  8. by rotating a bunch of ellipses. 
  10. author: Jan Bodnar
  11. website: www.zetcode.com
  12. last modified: August 2011
  13. */
  15. class Example extends GtkWindow { 
  17.     public function __construct() { 
  19.         parent::__construct(); 
  21.         $this->init_ui();
  23.     } 
  25.     public function init_ui() {
  27.         $this->set_title('Donut');         
  28.         $this->connect_simple('destroy', array('gtk', 'main_quit')); 
  30.         $darea = new GtkDrawingArea();
  31.         $darea->connect('expose_event', array($this, 'on_expose')); 
  33.         $this->add($darea);    
  35.         $this->set_default_size(350, 250); 
  36.         $this->set_position(GTK::WIN_POS_CENTER);
  37.         $this->show_all();         
  38.     }
  40.     public function on_expose($darea, $event) {
  42.             $cr = $darea->window->cairo_create();
  43.             $this->draw_donut($cr);        
  45.     }
  47.     public function draw_donut($cr) {
  49.         $cr->SetLineWidth(0.5);
  51.         $w = $this->get_allocation()->width;
  52.         $h = $this->get_allocation()->height;
  54.         $cr->translate($w/2, $h/2);
  55.         $cr->arc(0, 0, 120, 0, 2*M_PI);
  56.         $cr->stroke();
  58.         for ($i=1; $i<=36; $i++) {
  59.             $cr->save();
  60.             $cr->rotate($i*M_PI/36);
  61.             $cr->scale(0.3, 1);
  62.             $cr->arc(0, 0, 120, 0, 2*M_PI);
  63.             $cr->restore();
  64.             $cr->stroke();
  65.         }
  66.     }   
  67. } 
  69. new Example(); 
  70. Gtk::main();
  72. ?>

在此示例中，我们创建一个甜甜圈。 形状类似于曲奇，因此得名“甜甜圈”。

  1. $cr->translate($w/2, $h/2);
  2. $cr->arc(0, 0, 120, 0, 2*M_PI);
  3. $cr->stroke();

刚开始时有一个椭圆。

  1. for ($i=1; $i<=36; $i++) {
  2.     $cr->save();
  3.     $cr->rotate($i*M_PI/36);
  4.     $cr->scale(0.3, 1);
  5.     $cr->arc(0, 0, 120, 0, 2*M_PI);
  6.     $cr->restore();
  7.     $cr->stroke();
  8. }

旋转几圈后，有一个甜甜圈。

绘制文字

在下一个示例中，我们在窗口上绘制一些文本。

  1. <?php
  3. /* 
  4. ZetCode PHP GTK tutorial
  6. In this program, we draw text on the
  7. window. 
  9. author: Jan Bodnar
  10. website: www.zetcode.com
  11. last modified: August 2011
  12. */
  14. class Example extends GtkWindow { 
  16.     public function __construct() { 
  18.         parent::__construct(); 
  20.         $this->init_ui();
  22.     } 
  24.     public function init_ui() {
  26.         $this->set_title('Soulmate');         
  27.         $this->connect_simple('destroy', array('gtk', 'main_quit')); 
  29.         $darea = new GtkDrawingArea();
  30.         $darea->connect('expose_event', array($this, 'on_expose')); 
  32.         $this->add($darea);    
  34.         $this->set_default_size(350, 250); 
  35.         $this->set_position(GTK::WIN_POS_CENTER);
  36.         $this->show_all();         
  37.     }
  39.     public function on_expose($darea, $event) {
  41.             $cr = $darea->window->cairo_create();
  42.             $this->draw_text($cr);        
  44.     }
  46.     public function draw_text($cr) {
  48.         $cr->SetSourceRgb(0.1, 0.1, 0.1);
  50.         $cr->SelectFontFace("Purisa", CairoFontSlant::NORMAL, 
  51.             CairoFontWeight::NORMAL);
  52.         $cr->SetFontSize(13);
  54.         $cr->MoveTo(20, 30);
  55.         $cr->ShowText("Most relationships seem so transitory");
  56.         $cr->MoveTo(20, 60);
  57.         $cr->ShowText("They're all good but not the permanent one");
  58.         $cr->MoveTo(20, 120);
  59.         $cr->ShowText("Who doesn't long for someone to hold");
  60.         $cr->MoveTo(20, 150);
  61.         $cr->ShowText("Who knows how to love without being told");
  62.         $cr->MoveTo(20, 180);
  63.         $cr->ShowText("Somebody tell me why I'm on my own");
  64.         $cr->MoveTo(20, 210);
  65.         $cr->ShowText("If there's a soulmate for everyone");
  66.     }   
  67. } 
  69. new Example(); 
  70. Gtk::main();
  72. ?>

我们显示 Natasha Bedingfields Soulmate 歌曲的部分歌词。

  1. $cr->SelectFontFace("Purisa", CairoFontSlant::NORMAL, 
  2.     CairoFontWeight::NORMAL);

在这里，我们指定使用的字体。 Purisa 正常字体。

  1. $cr->SetFontSize(13);

我们指定字体的大小。

  1. $cr->MoveTo(20, 30);

我们移动到要绘制文本的位置。

  1. $cr->ShowText("Most relationships seem so transitory");

ShowText()方法将文本绘制到窗口上。

Cario 绘图 - 图4

图：灵魂伴侣

在 PHP GTK 教程的这一章中，我们使用 Cairo 库进行绘图。