Cairo 支持多种后端,本文基于几个示例讲述如何使用 Cairo 各种后端创建 PNG 图像、PDF 文件与 SVG 文件以及如何使用 Cairo 在 GTK 窗口中绘图。
1. PNG 图像
第一个示例 (example-1.c) 用于生成 PNG 图像。
#include
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 图像文件。
上述头文件声明了上面示例中调用的函数以及一些常量的定义。
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 图像如下图所示:
![](http://img.e-com-net.com/image/info8/6fa477c518b04b16a637228d6aafef0c.jpg)
2. PDF 文件
在第二个示例 (example-2.c) 中,将使用 Cairo 生成一份 PDF 文件,其内容与第一个示例所生成的图像是相同的。
#include
#include
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 文件的页面大小是以排版标准中的像素点尺寸为单位控制的。
生成的 PDF 文档在 Evince 中显示效果如下图所示:
![Cairo图形指南(3)_第1张图片](http://img.e-com-net.com/image/info8/8412d570fb274f8ebd38505be022b192.png)
3. SVG 文件
第三个示例演示如何使用 Cairo SVG 后端生成一份简单的 SVG (Scalble Vector Graphics) 文件。SVG 技术近几年很热门。
#include
#include
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 查看结果如下图所示:
![Cairo图形指南(3)_第2张图片](http://img.e-com-net.com/image/info8/a998a391058a47488cbaa740bd5a6a09.png)
4. GTK 窗口
在最后这个示例中,演示如何在 GTK 窗口中使用 Cairo 绘制图形。基于 GTK 后端的 Cairo 绘图模型将贯穿于本指南。
#include
#include
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+ 窗口,上面绘制了一串文本,如下图所示:
![](http://img.e-com-net.com/image/info8/dd4715e39a0d414fb92bfb6fd85f3d8c.png)
首先要包含 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 环境,并在该环境中绘制了一行文本。