5.Cario图形库-图形和填充

在本节Cairo图形库指南中，我们会创建一些基本的和高级的图形，然后用颜色，模式，渐变色填充它们。

基本图形：
Cario图形库有一些API用于创建基本图形
#include <cairo.h> #include <gtk/gtk.h> #include <math.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, 0, 0 ); cairo_set_line_width ( cr, 1 ); cairo_rectangle ( cr, 20, 20, 120, 80 ); cairo_rectangle ( cr, 180, 20, 80, 80 ); cairo_stroke_preserve ( cr ); cairo_set_source_rgb ( cr, 1, 1, 1 ); cairo_fill ( cr ); cairo_set_source_rgb ( cr, 0, 0, 0 ); cairo_arc ( cr, 330, 60, 40, 0, 2 * M_PI ); cairo_stroke_preserve ( cr ); cairo_set_source_rgb ( cr, 1, 1, 1 ); cairo_fill ( cr ); cairo_set_source_rgb ( cr, 0, 0, 0 ); cairo_arc ( cr, 90, 160, 40, M_PI / 4, M_PI ); cairo_close_path ( cr ); cairo_stroke_preserve ( cr ); cairo_set_source_rgb ( cr, 1, 1, 1 ); cairo_fill ( cr ); cairo_set_source_rgb ( cr, 0, 0, 0 ); cairo_translate ( cr, 220, 180 ); cairo_scale ( cr, 1, 0.7 ); cairo_arc ( cr, 0, 0, 50, 0, 2 * M_PI ); cairo_stroke_preserve ( cr ); cairo_set_source_rgb ( cr, 1, 1, 1 ); cairo_fill ( cr ); cairo_destroy ( cr ); return FALSE; } int main ( int argc, char *argv[] ) { GtkWidget *window; GtkWidget *darea; gtk_init ( &argc, &argv ); window = gtk_window_new ( GTK_WINDOW_TOPLEVEL ); darea = gtk_drawing_area_new(); gtk_container_add ( GTK_CONTAINER ( window ), darea ); g_signal_connect ( darea, "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 ), 390, 240 ); gtk_widget_show_all ( window ); gtk_main(); return 0; }

这个例子中，我们创建了一个矩形，一个正方形，一个圆，一个弧形和一个椭圆形。

 

cairo_rectangle ( cr, 20, 20, 120, 80 ); cairo_rectangle ( cr, 180, 20, 80, 80 );

函数cairo_rectangle用来创建矩形和正方形。一个正方形只是一个特殊的矩形。

 

cairo_arc ( c4, 330, 60, 40, 0, 2 * M_PI );

这一行创建了一个圆。

 

cairo_scale ( cr, 1, 0.7 ); cairo_arc ( cr, 0 , 0, 50, 0, 2 * M_PI );

这个函数创建了一个椭圆。

 

其它图形可以用上面的基本图形的组合来表示。

#include <cairo.h> #include <gtk/gtk.h> int points[11][2] = { {0, 85}, {75, 75}, {100, 10}, {125, 75}, {200, 85}, {150, 125}, {160, 190}, {100, 150}, {40, 190}, {50, 125}, {0, 85} }; 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, 0, 0 ); cairo_set_line_width ( cr, 1 ); gint i; for ( i = 0; i < 10; i ++ ) { cairo_line_to ( cr, points[i][0], points[i][1] ); } cairo_close_path ( cr ); cairo_stroke_preserve ( cr ); cairo_set_source_rgb ( cr, 1, 1, 1 ); cairo_fill ( cr ); cairo_move_to ( cr, 240, 40 ); cairo_line_to ( cr, 240, 160 ); cairo_line_to ( cr, 350, 160 ); cairo_close_path ( cr ); cairo_set_source_rgb ( cr, 0, 0, 0 ); cairo_stroke_preserve ( cr ); cairo_set_source_rgb ( cr, 1, 1, 1 ); cairo_fill ( cr ); cairo_move_to ( cr, 380, 40 ); cairo_line_to ( cr, 380, 160 ); cairo_line_to ( cr, 450, 160 ); cairo_curve_to ( cr, 440, 155, 380, 145, 380, 40 ); cairo_set_source_rgb ( cr, 0, 0, 0 ); cairo_stroke_preserve ( cr ); cairo_set_source_rgb ( cr, 1, 1, 1 ); cairo_fill ( cr ); cairo_destroy ( cr ); return FALSE; } int main ( int argc, char *argv[] ) { GtkWidget *window; GtkWidget *darea; gtk_init ( &argc, &argv ); window = gtk_window_new ( GTK_WINDOW_TOPLEVEL ); darea = gtk_drawing_area_new(); gtk_container_add(GTK_CONTAINER(window), darea ); g_signal_connect( darea, "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), 460, 240 ); gtk_widget_show_all ( window ); gtk_main(); return 0; }

这个例子中，我们创建了一个星星，一个三角形，一个修改过的三角形。这些图形是用线条和弧线组成的。

 

gint i; for ( i = 0; i < 10; i ++ ) { cairo_line_to ( cr, points[i][0], poings[i][1] ); } cairo_close_path( cr );

星星是用保存在数组里面的点连接到一起形成的线画出来的。这个星星用cairo_close_path()把路径封闭，把最后一个和最开始的点连接到一起。

 

cairo_move_to ( cr, 380, 40 ); cairo_line_to ( cr, 300, 160 ); cairo_line_to ( cr, 450, 160 ); cairo_curve_to ( cr, 440, 155, 380, 145, 380, 40 );

这个修改过的三角形是由两个线段和一个弧形组成的。

 

填充
一个颜色值由RGB三个分量组合而成。Cairo中，RGB取值范围为0-1.

#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 ); int width, height; gtk_window_get_size ( GTK_WINDOW(widget), &width, &height ); cairo_set_source_rgb ( cr, 0.5, 0.5, 1 ); cairo_rectangle( cr, 20, 20, 100, 100 ); cairo_fill( cr ); cairo_set_source_rgb ( cr, 0.6, 0.6, 0.6 ); cairo_rectangle ( cr, 150, 20, 100, 100 ); cairo_fill ( cr ); cairo_set_source_rgb ( cr, 0, 0.3, 0 ); cairo_rectangle ( cr, 20, 140, 100, 100 ); cairo_fill ( cr ); cairo_set_source_rgb ( cr, 1, 0, 0.5 ); cairo_rectangle ( cr, 150, 140, 100, 100 ); cairo_fill ( 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 ( G_OBJECT ( window ), "expose-event", G_CALLBACK( on_expose_event ), NULL ); g_signal_connect ( G_OBJECT ( 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 ), 270, 260 ); gtk_window_set_title ( GTK_WINDOW ( window ), "colors" ); gtk_widget_set_app_paintable ( window, TRUE ); gtk_widget_show_all ( window ); gtk_main(); return 0; }

这个例子中，我们画了四个填充过的矩形。

 

cairo_set_source_rgb ( cr, 0.5, 0.5, 1 ); cairo_rectangle ( cr, 20, 20, 100, 100 ); caior_fill ( cr );

调用cairo_set_source_rgb()函数设置一个不透明的颜色值。参数为红，绿，蓝三个颜色分量。通过调用cairo_fill()，把设置这个颜色值填充到矩形里面。

 

模式

#include <cairo.h> #include <gtk/gtk.h> cairo_surface_t *surface1; cairo_surface_t *surface2; cairo_surface_t *surface3; cairo_surface_t *surface4; static void create_surfaces() { surface1 = cairo_image_surface_create_from_png("blueweb.png"); surface2 = cairo_image_surface_create_from_png("maple.png"); surface3 = cairo_image_surface_create_from_png("crack.png"); surface4 = cairo_image_surface_create_from_png("chocolate.png"); } static void destroy_surfaces() { g_print ( "destroying surface" ); cairo_surface_destroy( surface1 ); cairo_surface_destroy( surface2 ); cairo_surface_destroy( surface3 ); cairo_surface_destroy( surface4 ); } static gboolean on_expose_event ( GtkWidget *widget, GdkEventExpose *event, gpointer data ) { cairo_t *cr; cairo_pattern_t *pattern1; cairo_pattern_t *pattern2; cairo_pattern_t *pattern3; cairo_pattern_t *pattern4; cr = gdk_cairo_create ( widget->window ); int width, height; gtk_window_get_size ( GTK_WINDOW ( widget ), &width, &height ); pattern1 = cairo_pattern_create_for_surface ( surface1 ); pattern2 = cairo_pattern_create_for_surface ( surface2 ); pattern3 = cairo_pattern_create_for_surface ( surface3 ); pattern4 = cairo_pattern_create_for_surface ( surface4 ); cairo_set_source ( cr, pattern1 ); cairo_pattern_set_extend ( cairo_get_source(cr), CAIRO_EXTEND_REPEAT ); cairo_rectangle ( cr, 20, 20, 100, 100 ); cairo_fill ( cr ); cairo_set_source ( cr, pattern2 ); cairo_pattern_set_extend ( cairo_get_source(cr), CAIRO_EXTEND_REPEAT ); cairo_rectangle ( cr, 150, 20, 100, 100 ); cairo_fill ( cr ); cairo_set_source ( cr, pattern3 ); cairo_pattern_set_extend ( cairo_get_source(cr), CAIRO_EXTEND_REPEAT ); cairo_rectangle ( cr, 20, 140, 100, 100 ); cairo_fill ( cr ); cairo_set_source ( cr, pattern4 ); cairo_pattern_set_extend ( cairo_get_source(cr), CAIRO_EXTEND_REPEAT ); cairo_rectangle ( cr, 150, 140, 100, 100 ); cairo_fill ( cr ); cairo_pattern_destroy( pattern1 ); cairo_pattern_destroy( pattern2 ); cairo_pattern_destroy( pattern3 ); cairo_pattern_destroy( pattern4 ); 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 ( G_OBJECT ( window ), "expose-event", G_CALLBACK( on_expose_event ), NULL ); g_signal_connect ( G_OBJECT ( window ), "destroy", G_CALLBACK( gtk_main_quit), NULL); create_surfaces(); gtk_window_set_position( GTK_WINDOW(window), GTK_WIN_POS_CENTER ); gtk_window_set_default_size ( GTK_WINDOW(window), 270, 260 ); gtk_window_set_title ( GTK_WINDOW(window), "patterns" ); gtk_widget_set_app_paintable( window, TRUE ); gtk_widget_show_all(window); gtk_main(); destroy_surfaces(); return 0; }

在这个例子中，我们又画了四个矩形，这一次，我们用了一些填充模式。我们用了四个从imp里面的图片。我们必须保持这些图片原来的尺寸，因为我们要把它们镶嵌进来。

我们在on_expose_event这个函数外面创建加载。当每次窗口需要重绘时，就不会再次加载了。

pattern1 = cairo_pattern_create_for_surface(surface1);
我们通过调用cairo_pattern_create_for_surface()，创建了一个模式。

 

cairo_set_source(cr, pattern1); cairo_pattern_set_extend(cairo_get_source(cr), CAIRO_EXTEND_REPEAT); cairo_rectangle(cr, 20, 20, 100, 100 ); cairo_fill( cr );

这里，我们画了第一个矩形。cairo_set_source()函数告诉Cairo context用一个绘图模式进行绘图。这个图片大小并没有严格的适合这个矩形。我们设置CAIRO_EXTEND_REPEAT这个值，让这个模式循环镶嵌进来。cairo_rectangle()创建了一个矩形路径。最后，cairo_fill()用指定的模式填充这个路径。

 

原文链接：http://zetcode.com/tutorials/cairographicstutorial/shapesfills/