Cairo图形指南（3）

Cairo 后端

Cairo 支持多种后端，本文基于几个示例讲述如何使用 Cairo 各种后端创建 PNG 图像、PDF 文件与 SVG 文件以及如何使用 Cairo 在 GTK 窗口中绘图。

1. PNG 图像

第一个示例 (example-1.c) 用于生成 PNG 图像。

#include <cairo.h>

int
main ( int argc, char *argv [ ] )
{
        cairo_surface_t *surface;
        cairo_t *cr;

        surface =
            cairo_image_surface_create ( CAIRO_FORMAT_ARGB32, 320 , 48 ) ;
        cr = cairo_create ( surface ) ;

        cairo_set_source_rgb ( cr, 0.627 , 0 , 0 ) ;
        cairo_select_font_face ( cr, "Adobe Heiti Std" ,
                                CAIRO_FONT_SLANT_NORMAL,
                                CAIRO_FONT_WEIGHT_NORMAL ) ;
        cairo_set_font_size ( cr, 24.0 ) ;

        cairo_move_to ( cr, 10.0 , 34.0 ) ;
        cairo_show_text ( cr, "我是中国人，我爱我的祖国。" ) ;

        cairo_surface_write_to_png ( surface, "image.png" ) ;

        cairo_destroy ( cr ) ;
        cairo_surface_destroy ( surface ) ;

        return 0 ;
}

这个示例是一个很小的控制台程序，运行后可生成一份 PNG 图像文件。

 #include <cairo.h>

上述头文件声明了上面示例中调用的函数以及一些常量的定义。

 cairo_surface_t *surface;
 cairo_t *cr;

这两行代码声明了一个 Cairo 外观与一个 Cairo 环境。

 surface = cairo_image_surface_create ( CAIRO_FORMAT_ARGB32, 320 , 48 ) ;
 cr = cairo_create ( surface ) ;

现在我们生成了 Cairo 外观与 Cairo 环境，所生成的外观是一份 320x48 px 的图像。

 cairo_set_source_rgb ( cr, 0.627 , 0 , 0 ) ;

设置源的颜色为 darkred，就好比是选择了暗红色的颜料。

 cairo_select_font_face ( cr, " Adobe Heiti Std " , CAIRO_FONT_SLANT_NORMAL,
      CAIRO_FONT_WEIGHT_NORMAL ) ;
 cairo_set_font_size ( cr, 24.0 ) ;

选择字体类型并设置其尺寸。（注：可使用 "fc-list" 命令查看系统所安装字体）

 cairo_move_to ( cr, 10.0 , 34.0 ) ;
 cairo_show_text ( cr, "我是中国人，我爱我的祖国。" ) ;

将“画笔”移动到图像区域的 (10.0, 34.0) 位置开始绘制文本。

 cairo_surface_write_to_png ( surface, "image.png" ) ;

这个函数创建 PNG 图像。

 cairo_destroy ( cr ) ;
 cairo_surface_destroy ( surface ) ;

最后，回收所有 Cairo 环境与外观所占用的内存资源。

编译这个示例：

$ gcc -o example -1 `pkg-config --cflags --libs gtk+ -2.0 ` example -1 .c

生成的 PNG 图像如下图所示：

2. PDF 文件

在第二个示例 (example-2.c) 中，将使用 Cairo 生成一份 PDF 文件，其内容与第一个示例所生成的图像是相同的。

#include <cairo.h>
#include <cairo-pdf.h>

int
main ( int argc, char *argv [ ] )
{
        cairo_surface_t *surface;
        cairo_t *cr;

        surface = cairo_pdf_surface_create ( "pdffile.pdf" , 320 , 48 ) ;
        cr = cairo_create ( surface ) ;

        cairo_set_source_rgb ( cr, 0.627 , 0 , 0 ) ;
        cairo_select_font_face ( cr, "Adobe Heiti Std" ,
                                CAIRO_FONT_SLANT_NORMAL,
                                CAIRO_FONT_WEIGHT_NORMAL ) ;
        cairo_set_font_size ( cr, 24.0 ) ;

        cairo_move_to ( cr, 10.0 , 34.0 ) ;
        cairo_show_text ( cr, "我是中国人，我爱我的祖国。" ) ;

        cairo_show_page ( cr ) ;

        cairo_destroy ( cr ) ;
        cairo_surface_destroy ( surface ) ;

        return 0 ;
}

编译这个示例：

$ gcc -o example -2 `pkg-config --cflags --libs gtk+ -2.0 ` example -2 .c

生成的 PDF 文件，请使用 PDF 阅读器查看，Linux 用户可使用 Evince 或 KPDF。

 surface = cairo_pdf_surface_create ( "pdffile.pdf" , 320 , 48 ) ;

要生成 pdf 文件，必须使用 cairo_pdf_surface () 函数创建一个 pdf 外观。pdf 文件的页面大小是以排版标准中的像素点尺寸为单位控制的。

 cairo_show_page ( cr ) ;

 

生成的 PDF 文档在 Evince 中显示效果如下图所示：

3. SVG 文件

第三个示例演示如何使用 Cairo SVG 后端生成一份简单的 SVG (Scalble Vector Graphics) 文件。SVG 技术近几年很热门。

#include <cairo.h>
#include <cairo-svg.h>

int
main ( int argc, char *argv [ ] )
{
        cairo_surface_t *surface;
        cairo_t *cr;

        surface = cairo_svg_surface_create ( "svgfile.svg" , 320 , 48 ) ;
        cr = cairo_create ( surface ) ;

        cairo_set_source_rgb ( cr, 0.627 , 0 , 0 ) ;
        cairo_select_font_face ( cr, "Adobe Heiti Std" ,
                                CAIRO_FONT_SLANT_NORMAL,
                                CAIRO_FONT_WEIGHT_NORMAL ) ;
        cairo_set_font_size ( cr, 24.0 ) ;

        cairo_move_to ( cr, 10.0 , 34.0 ) ;
        cairo_show_text ( cr, "我是中国人，我爱我的祖国。" ) ;

        cairo_destroy ( cr ) ;
        cairo_surface_destroy ( surface ) ;

        return 0 ;
}

编译这个示例：

$ gcc -o example -3 `pkg-config --cflags --libs gtk+ -2.0 ` example -3 . c

生成的 SVG 文件可以使用 Firefox、Opera、Inkscape 程序查看。

surface = cairo_svg_surface_create ( "svgfile.svg" , 320 , 48 ) ;

要生成一份 SVG 文件，必须使用 cairo_svg_surface_create () 函数创建一个 svg 外观。除此之外，其余代码的功用与上述示例类似。

本例生成的 SVG 文件，使用 Firefox 查看结果如下图所示：

4. GTK 窗口

在最后这个示例中，演示如何在 GTK 窗口中使用 Cairo 绘制图形。基于 GTK 后端的 Cairo 绘图模型将贯穿于本指南。

#include <cairo.h>
#include <gtk/gtk.h>

static gboolean
on_expose_event ( GtkWidget * widget, GdkEventExpose * event, gpointer data )
{
        cairo_t *cr;

        cr = gdk_cairo_create ( widget->window ) ;

        cairo_set_source_rgb ( cr, 0.627 , 0 , 0 ) ;
        cairo_select_font_face ( cr, "Adobe Heiti Std" , CAIRO_FONT_SLANT_NORMAL,
                                CAIRO_FONT_WEIGHT_NORMAL ) ;
        cairo_set_font_size ( cr, 24.0 ) ;

        cairo_move_to ( cr, 10.0 , 34.0 ) ;
        cairo_show_text ( cr, "我是中国人，我爱我的祖国。" ) ;

        cairo_destroy ( cr ) ;

        return FALSE ;
}


int
main ( int argc, char *argv [ ] )
{

        GtkWidget *window;

        gtk_init ( &argc, &argv ) ;

        window = gtk_window_new ( GTK_WINDOW_TOPLEVEL ) ;

        g_signal_connect ( window, "expose-event" ,
                          G_CALLBACK ( on_expose_event ) , NULL ) ;
        g_signal_connect ( window, "destroy" ,
                          G_CALLBACK ( gtk_main_quit ) , NULL ) ;

        gtk_window_set_position ( GTK_WINDOW ( window ) , GTK_WIN_POS_CENTER ) ;
        gtk_window_set_default_size ( GTK_WINDOW ( window ) , 320 , 48 ) ;
        gtk_widget_set_app_paintable ( window, TRUE ) ;

        gtk_widget_show_all ( window ) ;

        gtk_main ( ) ;

        return 0 ;
}

这个示例程序运行后，会在屏幕中央跳出一个 GTK+ 窗口，上面绘制了一串文本，如下图所示：

 #include <cairo.h>
  #include <gtk/gtk.h>

首先要包含 cairo 与 gtk+ 库的头文件。

 g_signal_connect ( window, "expose-event" ,
                          G_CALLBACK ( on_expose_event ) , NULL ) ;

当 GTK+窗口被重绘时，会发出 expose-event 信号，我们可将这一信号连接到 on_expose_event () 回调函数上。

gtk_widget_set_app_paintable ( window, TRUE ) ;

要在 GTK+ 窗口中绘制 Cairo 图形，可以使用 GtkDrawingArea widget 或者更为简单的 GtkWindow widget，本例选择 GtkWindow 。由 GtkWindow widget 对 expose-event 信号处理后，默认要重新绘制窗口背景，这会将我们在 on_expose_event () 函数中定义的 Cairo 图形覆盖掉，因此需要调用 gtk_widget_set_app_paintable () 函数通知 GTK+ 不要这么干。如果是在 GtkDrawingArea widget 中绘制 Cairo 图形，则可省区这一步。

cairo_t *cr;

 cr = gdk_cairo_create ( widget->window ) ;

Cairo 图形绘制工作是在 on_expose_event () 函数中进行的，在该函数中，我们为 GTK+ 系统创建了一个 Cairo 环境，并在该环境中绘制了一行文本。