Cairo 图形指南 (3) —— Cairo 后端

LiYanrui posted @ Apr 21, 2008 02:35:09 AM in 程序设计 with tags Cairo , 18704 阅读

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 环境，并在该环境中绘制了一行文本。

Small_feed 评论 (25)
1
[回复]
Yue Wang 说:
2008年4月25日 04:39 托你一件事情。这件事情的来龙去脉如下： 我们知道，中文排版，pdftex产生的pdf文件，不管嵌入的是ttf还是pfb，都会有粗细不均匀的问题。而dvipdfmx，虽然不会不均匀，但是普遍很细。但是现在，xetex->xdvipdfmx, luatex, pdftex->dvipdfmx这三者，都在使用dvipdfmx的代码(xdvipdfmx是使用dvipdfmx改过来的，luatex抛掉了早期的pdf生成输出，嵌入了dvipdfmx的代码),结果，现在不管使用什么TeX引擎，产生的pdf文件，中文字体都会非常细。然而，使用相同的字体，使用不同的pdf后端，就会有不同的效果。word/openoffice/cairo/quartz产生的pdf文件都很正常，就是dvipdfmx过细，但现在又不知道怎么导致的。我写了一封邮件给Taco，他希望看到pdf文件的比较。你有空的话，就用相同的字体（最好是simsun)，使用这些库产生不同的pdf文件，发送到yuleopen at gmail dot com，我来给taco继续说说。因为我不太懂cairo之类的东西，先前托过别人，不过搁置起来了。如果你有空的话，不妨试试。
2
[回复]
ageng 说:
2009年3月06日 23:38

您好，我用您写的这些例子，在linux编译过去之后生成的文件汉字都显示乱码，怎么回事呀

3
[回复]
Avatar_small
LiYanrui 说:
2009年3月07日 00:17

@ageng: 能否把你编译的二进制文件发给我一份，我试试

lyanry@gmail.com

4
[回复]
ageng 说:
2009年3月07日 00:36

请查收一下邮件

5
[回复]
Avatar_small
LiYanrui 说:
2009年3月07日 01:04

@ageng: 没有收到 :(

6
[回复]
ageng 说:
2009年3月07日 01:28

又发了一次，请再收一下

7
[回复]
Avatar_small
LiYanrui 说:
2009年3月07日 01:46

@ageng: 知道原因了，你的 .c 文件是 gb2312 编码的，而不是 utf-8

8
[回复]
ageng 说:
2009年3月09日 16:47

可是我用UE把点c转换成utf-8的也不行，而且我的linux的locale设成了en_US.UTF-8

9
[回复]
ageng 说:
2009年3月09日 17:41

怎么才能使我的.c文件能以utf-8的编码格式编写，谢谢了

10
[回复]
Avatar_small
LiYanrui 说:
2009年3月09日 22:12

@ageng: 为什么要用 UE 呢？你的程序不是在 Linux 里写的么？ Emacs、Vim 都支持 utf-8

11
[回复]
ageng 说:
2009年3月09日 22:19

我一开始用linux下直接写的，就是这样了，不知道是不是我装的linux系统有问题，我把vim的编码格式都设成如下，还不行：
set tabstop=4
set softtabstop=4
set shiftwidth=4
set autoindent
set cindent
set fileencodings=utf-8
set fileencoding=utf-8
set encoding=utf-8

12
[回复]
ageng 说:
2009年3月09日 22:21

您的linux下的环境变量是怎么设置的，vim,locale等，我反复试都不行，显示出来的要么是问号，要么是16进制码似的

13
[回复]
Avatar_small
LiYanrui 说:
2009年3月09日 23:34

我用 emacs 23，编码设置都是默认的。我的 locale：

 

$ > locale
LANG=en_US.UTF-8
LC_CTYPE=zh_CN.UTF-8
LC_NUMERIC="en_US.UTF-8"
LC_TIME="en_US.UTF-8"
LC_COLLATE="en_US.UTF-8"
LC_MONETARY="en_US.UTF-8"
LC_MESSAGES="en_US.UTF-8"
LC_PAPER="en_US.UTF-8"
LC_NAME="en_US.UTF-8"
LC_ADDRESS="en_US.UTF-8"
LC_TELEPHONE="en_US.UTF-8"
LC_MEASUREMENT="en_US.UTF-8"
LC_IDENTIFICATION="en_US.UTF-8"
LC_ALL=


你用的是哪个 Linux 发行版？


14
[回复]
ageng 说:
2009年3月09日 23:43

2.6.18-92.1.22.el5

15
[回复]
Avatar_small
LiYanrui 说:
2009年3月10日 00:03

@ageng: 搞不明白为什么会这样。不过，你可以使用 iconv 对文件进行编码转换，见 http://lyanry.is-programmer.com/posts/69.html 的后半部分内容。

16
[回复]
ageng 说:
2009年3月10日 00:10

你在这种locale环境下是不是看到的汉字输入是乱码

17
[回复]
Avatar_small
LiYanrui 说:
2009年3月10日 00:27

@ageng: 只要你的 glibc 支持中文编码，local 的设置成什么，并不影响中文的显示。不过，如果你要是想输入中文，必须要将 LC_CTYPE 设置成 zh_CN.UTF-8 或其他中文编码格式。

18
[回复]
ageng 说:
2009年3月11日 17:11

locale
LANG=zh_CN.UTF-8
LC_CTYPE="zh_CN.UTF-8"
LC_NUMERIC="zh_CN.UTF-8"
LC_TIME="zh_CN.UTF-8"
LC_COLLATE="zh_CN.UTF-8"
LC_MONETARY="zh_CN.UTF-8"
LC_MESSAGES="zh_CN.UTF-8"
LC_PAPER="zh_CN.UTF-8"
LC_NAME="zh_CN.UTF-8"
LC_ADDRESS="zh_CN.UTF-8"
LC_TELEPHONE="zh_CN.UTF-8"
LC_MEASUREMENT="zh_CN.UTF-8"
LC_IDENTIFICATION="zh_CN.UTF-8"
LC_ALL=zh_CN.UTF-8
当我输入你好的时候显示：
浣犲ソ
我用telnet上去的，不知道是不是和telnet 也有关，
当我把locale设成zh_CN.GB2312的时候输入汉字就不会显示乱码，是不是我装的系统有问题

19
[回复]
Avatar_small
LiYanrui 说:
2009年3月11日 17:15

艾？难道你是从 Win 登录到 Linux 机器上去写程序的？如果是这样，应该与你的输入法有关系，因为你的输入法得到的字符是 gb2312 的。

20
[回复]
匿名 说:
2009年3月12日 05:55

我猜啊。
是这位仁兄的机子上没有“Adobe Heiti Std”
字体。
换一个你系统上有的中文字体就好。

21
[回复]
Yue Wang 说:
2009年3月12日 17:55

@LiYanrui: 让他直接在本地搞个然后传上去得了。

22
[回复]
ageng 说:
2009年3月27日 17:08

我用iconv把gb2312转成utf-8汉字显示的是方框，我就是用的telnet登录上去的,最近怎么把汉字转换都不行，我从数据库里提出来的汉字printf都正常显示了，但转成utf-8还是不行，郁闷

23
[回复]
Avatar_small
LiYanrui 说:
2009年3月27日 18:45

你的 telnet 可能不支持 utf-8，找一个支持 utf-8 的 telnet 或者 ssh 客户端试试？

24
[回复]
ageng 说:
2009年3月27日 22:03

真是见鬼了，我下了一个支持utf-8的telnet客户端putty,locale也都设置成了en_US.UTF-8，但是生成的png汉字还是方框的样子，代码直接是复制你上面的，用vi打开的.c文件正常显示

25
[回复]
calvin 说:
2013年2月15日 11:01

我也遇到同样的问题，中文显示方框乱码，


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter