Cairo 图形指南 (5) —— 图像

在这一篇里，要讲述图像的处理。先是演示如何在 GTK+ 窗口中显示一幅图像，然后再制造一些特效。

图像的显示

在第一个例子里，显示了一幅图像。

[html] view plain copy print ?

1. #include<cairo.h>  
2. #include<gtk/gtk.h>  
3.    
4. cairo_surface_t *image;  
5.    
6. staticgboolean  
7. on_expose_event(GtkWidget *widget,  
8.     GdkEventExpose *event,  
9.     gpointer data)  
10. {  
11.   cairo_t *cr;  
12.    
13.   cr = gdk_cairo_create (widget->window);  
14.    
15.   cairo_set_source_surface(cr, image,10,10);  
16.   cairo_paint(cr);  
17.    
18.   cairo_destroy(cr);  
19.    
20.   returnFALSE;  
21. }  
22.    
23.    
24. intmain(intargc, char *argv[])  
25. {  
26.   GtkWidget *window;  
27.    
28.   image = cairo_image_surface_create_from_png("plaveckycastle.png");  
29.    
30.   gtk_init(&argc, &argv);  
31.    
32.   window = gtk_window_new(GTK_WINDOW_TOPLEVEL);  
33.    
34.   g_signal_connect(window,"expose-event",  
35.       G_CALLBACK (on_expose_event), NULL);  
36.   g_signal_connect(window,"destroy",  
37.       G_CALLBACK (gtk_main_quit), NULL);  
38.    
39.   gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);  
40.   gtk_window_set_default_size(GTK_WINDOW(window),320,250);  
41.   gtk_widget_set_app_paintable(window, TRUE);  
42.    
43.   gtk_widget_show_all(window);  
44.    
45.   gtk_main();  
46.    
47.   cairo_surface_destroy(image);  
48.    
49.   return0;  
50. }  

#include<cairo.h> #include<gtk/gtk.h> cairo_surface_t *image; staticgboolean on_expose_event(GtkWidget *widget, GdkEventExpose *event, gpointer data) { cairo_t *cr; cr = gdk_cairo_create (widget->window); cairo_set_source_surface(cr, image,10,10); cairo_paint(cr); cairo_destroy(cr); returnFALSE; } intmain(intargc, char *argv[]) { GtkWidget *window; image = cairo_image_surface_create_from_png("plaveckycastle.png"); 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,250); gtk_widget_set_app_paintable(window, TRUE); gtk_widget_show_all(window); gtk_main(); cairo_surface_destroy(image); return0; }

这个示例显示了一幅图片，其尺寸为 300x225，可从这里下载。这是斯洛伐克西部一个什么地方（Plavecke Podhradie）的中世纪城堡的废墟的一幅照片。 

image = cairo_image_surface_create_from_png( "plaveckycastle.png" );

用一幅 png 图片来创建一份图像外观。出于效率的考虑，应在主函数中调用这个函数。

cairo_set_source_surface(cr, image, 10, 10);

基于前面构造的图像外观来创建源与外观，用于图像的绘制。

cairo_paint(cr);

绘制图片。

 

垂帘效果（Blind Down）

在下面的代码示例中，要垂帘显示图片，就像拉下窗帘的那种效果。

[html] view plain copy print ?

1. #include <cairo.h>  
2. #include <gtk/gtk.h>  
3.    
4.    
5. gboolean timer = TRUE;  
6. cairo_surface_t *image;  
7.    
8.    
9. staticgboolean  
10. on_expose_event(GtkWidget *widget,  
11.     GdkEventExpose *event,  
12.     gpointer data)  
13. {  
14.   cairo_t *cr;  
15.   cairo_t *ic;  
16.    
17.   cairo_surface_t *surface;  
18.    
19.   staticgdouble angle = 0;  
20.   staticgint image_width = 0;  
21.   staticgint image_height = 0;  
22.    
23.   staticgint w = 0;  
24.   staticgint h = 0;  
25.    
26.   cr = gdk_cairo_create(widget->window);  
27.    
28.   gint width, height;  
29.   gtk_window_get_size(GTK_WINDOW(widget), &width, &height);  
30.    
31.   image_width = cairo_image_surface_get_width(image);  
32.   image_height = cairo_image_surface_get_height(image);  
33.   w = image_width;  
34.    
35.   surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, image_width, image_height);  
36.   ic = cairo_create(surface);  
37.    
38.   cairo_rectangle(ic, 0, 0, w, h);  
39.   cairo_fill(ic);  
40.    
41.   h += 1;  
42.   if( h == image_height) timer = FALSE;  
43.    
44.   cairo_set_source_surface(cr, image, 10, 10);  
45.   cairo_mask_surface(cr, surface, 10, 10);  
46.    
47.   cairo_surface_destroy(surface);  
48.    
49.   cairo_destroy(cr);  
50.   cairo_destroy(ic);  
51.   returnFALSE;  
52. }  
53.    
54. staticgboolean  
55. time_handler(GtkWidget *widget)  
56. {  
57.   if(widget->window == NULL) returnFALSE;  
58.    
59.   if(!timer) returnFALSE;  
60.    
61.   gtk_widget_queue_draw(widget);  
62.   returnTRUE;  
63. }  
64.    
65. int main(int argc,char *argv[])  
66. {  
67.   GtkWidget *window;  
68.    
69.   image = cairo_image_surface_create_from_png("plaveckycastle.png");  
70.    
71.   gtk_init(&argc, &argv);  
72.    
73.   window = gtk_window_new(GTK_WINDOW_TOPLEVEL);  
74.    
75.   g_signal_connect(G_OBJECT(window),"expose-event",  
76.       G_CALLBACK(on_expose_event), NULL);  
77.   g_signal_connect(G_OBJECT(window),"destroy",  
78.       G_CALLBACK(gtk_main_quit), NULL);  
79.    
80.   gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);  
81.   gtk_window_set_default_size(GTK_WINDOW(window), 325, 250);  
82.   gtk_window_set_title(GTK_WINDOW(window),"blind down");  
83.    
84.   gtk_widget_set_app_paintable(window, TRUE);  
85.   g_timeout_add(15, (GSourceFunc) time_handler, (gpointer) window);  
86.    
87.   gtk_widget_show_all(window);  
88.    
89.   gtk_main();  
90.    
91.   cairo_surface_destroy(image);  
92.    
93.   return0;  
94. }  

#include <cairo.h> #include <gtk/gtk.h> gboolean timer = TRUE; cairo_surface_t *image; staticgboolean on_expose_event(GtkWidget *widget, GdkEventExpose *event, gpointer data) { cairo_t *cr; cairo_t *ic; cairo_surface_t *surface; staticgdouble angle = 0; staticgint image_width = 0; staticgint image_height = 0; staticgint w = 0; staticgint h = 0; cr = gdk_cairo_create(widget->window); gint width, height; gtk_window_get_size(GTK_WINDOW(widget), &width, &height); image_width = cairo_image_surface_get_width(image); image_height = cairo_image_surface_get_height(image); w = image_width; surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, image_width, image_height); ic = cairo_create(surface); cairo_rectangle(ic, 0, 0, w, h); cairo_fill(ic); h += 1; if( h == image_height) timer = FALSE; cairo_set_source_surface(cr, image, 10, 10); cairo_mask_surface(cr, surface, 10, 10); cairo_surface_destroy(surface); cairo_destroy(cr); cairo_destroy(ic); returnFALSE; } staticgboolean time_handler(GtkWidget *widget) { if(widget->window == NULL) returnFALSE; if(!timer) returnFALSE; gtk_widget_queue_draw(widget); returnTRUE; } int main(int argc,char *argv[]) { GtkWidget *window; image = cairo_image_surface_create_from_png("plaveckycastle.png"); 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), 325, 250); gtk_window_set_title(GTK_WINDOW(window),"blind down"); gtk_widget_set_app_paintable(window, TRUE); g_timeout_add(15, (GSourceFunc) time_handler, (gpointer) window); gtk_widget_show_all(window); gtk_main(); cairo_surface_destroy(image); return0; }

这个垂帘效果幕后的思想相当简单。图片的高度是 h 个像素，则可对其逐行进行绘制，直至图片完全显示。

cairo_t *cr; cairo_t *ic;

声明两个 cairo 环境，一个与 GtkWindow 相关联，另一个与图片相关联。

surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, image_width, image_height); ic = cairo_create(surface);

创建一个图像外观，并通过它构造那个与图像相关联的 cairo 环境。

cairo_rectangle(ic, 0, 0, w, h); cairo_fill(ic);

在初始的空图像中绘制一个矩形，它在循环显示中会增加 1 个像素的高度。采用这种方式创建的图像在后面要作为蒙板来用。

h += 1; if ( h == image_height) timer = FALSE;

整幅图像绘制完毕后，停止计时器。

cairo_set_source_surface(cr, image, 10, 10); cairo_mask_surface(cr, surface, 10, 10);

城堡图像被设置为要被绘制的源，并采用 surface 的 alpha 通道作为蒙板来绘制这个源。

 

光谱效果

将这种效果称为光谱效果，因为作者不知道怎么称呼才好（我感觉叫百叶窗效果更好）。可能你还记得从前的 ZX 光谱计算机，在这种计算机上载入图像时，它就逐渐的被显示出来，下面的示例大致是模仿这种方式。

[html] view plain copy print ?

1. #include <cairo.h>  
2. #include <gtk/gtk.h>  
3.    
4.    
5. gboolean timer = TRUE;  
6. cairo_surface_t *image;  
7.    
8. staticgboolean  
9. on_expose_event(GtkWidget *widget,  
10.     GdkEventExpose *event,  
11.     gpointer data)  
12. {  
13.   cairo_t *cr;  
14.   cairo_t *ic;  
15.    
16.   cairo_surface_t *surface;  
17.    
18.   staticgdouble angle = 0;  
19.   staticgint w = 0;  
20.   staticgint h = 0;  
21.    
22.   staticgint image_width = 0;  
23.   staticgint image_height = 0;  
24.    
25.   staticgint count = 0;  
26.    
27.   cr = gdk_cairo_create(widget->window);  
28.    
29.   gint width, height;  
30.   gtk_window_get_size(GTK_WINDOW(widget), &width, &height);  
31.    
32.   surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, image_width, image_height);   
33.    
34.   image_width = cairo_image_surface_get_width(image);  
35.   image_height = cairo_image_surface_get_height(image);  
36.   w = image_width;   
37.    
38.   ic = cairo_create(surface);  
39.    
40.   gint i, j;  
41.   for(i = 0; i <= image_height; i+=7) {  
42.       for(j=0 ; j < count; j++) {  
43.           cairo_move_to(ic, 0, i+j);  
44.           cairo_line_to(ic, w, i+j);  
45.       }  
46.   }  
47.    
48.   count++;  
49.   if( count == 8) timer = FALSE;  
50.    
51.   cairo_stroke(ic);  
52.    
53.   cairo_set_source_surface(cr, image, 10, 10);  
54.   cairo_mask_surface(cr, surface, 10, 10);  
55.    
56.   cairo_surface_destroy(surface);  
57.    
58.   cairo_destroy(cr);  
59.   cairo_destroy(ic);  
60.   returnFALSE;  
61. }  
62.    
63. staticgboolean  
64. time_handler (GtkWidget *widget)  
65. {  
66.   if(widget->window == NULL) returnFALSE;  
67.    
68.   if(!timer) returnFALSE;  
69.    
70.   gtk_widget_queue_draw(widget);  
71.   returnTRUE;  
72. }  
73.    
74. int main(int argc,char *argv[])  
75. {  
76.   GtkWidget *window;  
77.    
78.   image = cairo_image_surface_create_from_png("plaveckycastle.png");  
79.    
80.   gtk_init(&argc, &argv);  
81.    
82.   window = gtk_window_new(GTK_WINDOW_TOPLEVEL);  
83.    
84.   g_signal_connect(G_OBJECT(window),"expose-event",  
85.       G_CALLBACK(on_expose_event), NULL);  
86.   g_signal_connect(G_OBJECT(window),"destroy",  
87.       G_CALLBACK(gtk_main_quit), NULL);  
88.    
89.   gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);  
90.   gtk_window_set_default_size(GTK_WINDOW(window), 325, 250);  
91.    
92.   gtk_widget_set_app_paintable(window, TRUE);  
93.   g_timeout_add(400, (GSourceFunc) time_handler, (gpointer) window);  
94.    
95.   gtk_widget_show_all(window);  
96.    
97.   gtk_main();  
98.    
99.   cairo_surface_destroy(image);  
100.    
101.   return0;  
102. }  

#include <cairo.h> #include <gtk/gtk.h> gboolean timer = TRUE; cairo_surface_t *image; staticgboolean on_expose_event(GtkWidget *widget, GdkEventExpose *event, gpointer data) { cairo_t *cr; cairo_t *ic; cairo_surface_t *surface; staticgdouble angle = 0; staticgint w = 0; staticgint h = 0; staticgint image_width = 0; staticgint image_height = 0; staticgint count = 0; cr = gdk_cairo_create(widget->window); gint width, height; gtk_window_get_size(GTK_WINDOW(widget), &width, &height); surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, image_width, image_height); image_width = cairo_image_surface_get_width(image); image_height = cairo_image_surface_get_height(image); w = image_width; ic = cairo_create(surface); gint i, j; for(i = 0; i <= image_height; i+=7) { for(j=0 ; j < count; j++) { cairo_move_to(ic, 0, i+j); cairo_line_to(ic, w, i+j); } } count++; if( count == 8) timer = FALSE; cairo_stroke(ic); cairo_set_source_surface(cr, image, 10, 10); cairo_mask_surface(cr, surface, 10, 10); cairo_surface_destroy(surface); cairo_destroy(cr); cairo_destroy(ic); returnFALSE; } staticgboolean time_handler (GtkWidget *widget) { if(widget->window == NULL) returnFALSE; if(!timer) returnFALSE; gtk_widget_queue_draw(widget); returnTRUE; } int main(int argc,char *argv[]) { GtkWidget *window; image = cairo_image_surface_create_from_png("plaveckycastle.png"); 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), 325, 250); gtk_widget_set_app_paintable(window, TRUE); g_timeout_add(400, (GSourceFunc) time_handler, (gpointer) window); gtk_widget_show_all(window); gtk_main(); cairo_surface_destroy(image); return0; }

这个示例的许多细节与上一个示例相似。这次，是将图像分为每 8 行为一个区域。在每次循环中，8 个部分中每个区域增加一个像素高度。通过这种方式创建的图像将再一次作为模板来显示城堡图像。

gint i, j; for (i = 0; i <= image_height; i+=7) {      for (j=0 ; j < count; j++) {          cairo_move_to(ic, 0, i+j);          cairo_line_to(ic, w, i+j);      } }

这是该示例的主要逻辑，我们逐渐的将线绘制到各区域。

转自      http://blog.csdn.net/haiwil/article/details/6771811