绘图后端
Cairo支持不同的绘图后端。本节里,我们用Cairo创建一个PNG图形,PDF文件,SVG文件,在一个GTK窗口上绘图。
PNG图形
第一个例子里,我们会创建一个PNG图形
这是一个很小的控制台程序,它创建了一个PNG图形。
#include <cairo.h>
我们可以在这个头文件里看到声明了我们需要的函数和常量。
cairo_surface_t *surface;
cairo_t *cr;
在这里定义了一个绘图面和一个绘图上下文。
surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 390, 60);
cr = cairo_create(surface);
创建绘图面和绘图上下文。创建的绘图面为390×360像素大小。
cairo_set_source_rgb(cr, 0, 0, 0);
我们将使用黑色绘图。(颜色的取值范围为0.0-1.0)
cairo_select_font_face(cr, "Sans", CAIRO_FONT_SLANT_NORMAL,
CAIRO_FONT_WEIGHT_NORMAL);
cairo_set_font_size(cr, 40.0);
选择一个字体,设置字体的大小。
cairo_move_to(cr, 10.0, 50.0);
cairo_show_text(cr, "Disziplin ist Macht.");
移动到(10.0,50.0)点,然后画出这个字符串。
cairo_surface_write_to_png(surface, "image.png");
这个函数会创建一个png文件,文件内容是绘制出来的图形。
cairo_destroy(cr);
cairo_surface_destroy(surface);
绘制完成,清理资源。
(在这里,插入一个图片)
PDF文件
第二个例子,我们会用Cairo图形库去创建一个PDF文件。
我们可以用pdf浏览器打开PDF文件,Linux用户可以用KPDF或是Evince打开pdf文件。
surface = cairo_pdf_surface_create("pdffile.pdf", 504, 648);
为了渲染一个PDF文件,我们必须通过cairo_pdf_surface_create()函数创建一个PDF绘图面。
文件大小是用磅来设定的,这是排版的通用单位。
cairo_show_page(cr);
这个函数完成pdf的渲染。
SVG文件
下面这个例子创建了一个简单的SVG(Scalable Vector Graphics)文件。SVG是最近比较流行的一种技术。
我们可能通过FireFox,Opera或是Inkscape等程序打开这个svg文件。
surface = cairo_svg_surface_create("svgfile.svg", 390, 60);
为了创建SVG文件,我们必须通过调用cairo_svg_surface_create()函数来创建绘图面。
剩下的代码和上一个例子相似。
GTK Window
最后一个例子,我们会在GTK窗口上画一些文字。这个绘图后端会用到本指南后面的例子中。
这个例子弹出一个GTK窗口,并在窗口上写出了Disziplin ist Macht.。
#include <cairo.h>
#include <gtk/gtk.h>
包含需要的cairo和GTK的头文件。
g_signal_connect(window, "expose-event",
G_CALLBACK(on_expose_event), NULL);
当窗口需要重新绘制时,会发出expose-event这个信号,我们把这个信号和on_expose_event这个回调函数相连接。
GTK窗口如果需要重绘,它只是简单的清空背景。如果你想在上面画一些自己的东西,需要用gtk_widget_set_app_paintable ()这个函数通知GTK。
gtk_widget_set_app_paintable(window, TRUE)
我们可能在GtkDrawingArea或是一个简单的GtkWindow窗口上面进行绘图操作。我选择了后面这种方法。为了在GtkWindow上面绘图,我们必须用gtk_widget_set_app_paintable这个函数通知GTK+。这个函数会使widget默认的绘制背景的函数失效。如果是用GtkDrawingArea,就不需要调用这个函数了。
cairo_t *cr;
cr = gdk_cairo_create(widget->window);
绘图操作会在on_expose_event()这个回调函数中完成。在这个回调里,我们像通常一样,创建了一个绘图上下文。
在本节里面,我们介绍了Cairo支持的绘图后端。