Cairo 图形指南 (4) —— 裁剪与遮蔽

在这一篇中讲述裁剪（Clipping）与遮蔽（Masking）。

裁剪

在下面的示例中，对一幅图像进行裁剪。

[html] view plain copy print ?

1. #include <cairo.h>  
2. #include <gtk/gtk.h>  
3. #include <math.h>  
4.    
5. cairo_surface_t *image;  
6.    
7. staticgboolean  
8. on_expose_event(GtkWidget *widget,  
9.     GdkEventExpose *event,  
10.     gpointer data)  
11. {  
12.   cairo_t *cr;  
13.    
14.   staticgint pos_x = 128;  
15.   staticgint pos_y = 128;  
16.   gint radius = 40;   
17.    
18.   staticgint delta[] = { 3, 3 };  
19.    
20.   cr = gdk_cairo_create(widget->window);  
21.    
22.   gint width, height;  
23.   gtk_window_get_size(GTK_WINDOW(widget), &width, &height);  
24.    
25.   if(pos_x < 0 + radius) {  
26.       delta[0] =rand() % 4 + 5;  
27.   }else if (pos_x > width - radius) {  
28.       delta[0] = -(rand() % 4 + 5);  
29.   }  
30.    
31.   if(pos_y < 0 + radius) {  
32.       delta[1] =rand() % 4 + 5;  
33.   }else if (pos_y > height - radius) {  
34.       delta[1] = -(rand() % 4 + 5);  
35.   }  
36.    
37.   pos_x += delta[0];  
38.   pos_y += delta[1];  
39.    
40.   cairo_set_source_surface(cr, image, 1, 1);  
41.   cairo_arc(cr, pos_x, pos_y, radius, 0, 2*M_PI);  
42.   cairo_clip(cr);  
43.   cairo_paint(cr);  
44.    
45.   cairo_destroy(cr);  
46.    
47.   returnFALSE;  
48. }  
49.    
50. staticgboolean  
51. time_handler (GtkWidget *widget)  
52. {  
53.   if(widget->window == NULL) returnFALSE;  
54.   gtk_widget_queue_draw(widget);  
55.   returnTRUE;  
56. }  
57.    
58. int main(int argc,char *argv[])  
59. {  
60.   GtkWidget *window;  
61.   gint width, height;   
62.    
63.   image = cairo_image_surface_create_from_png("turnacastle.png");  
64.   width = cairo_image_surface_get_width(image);  
65.   height = cairo_image_surface_get_height(image);  
66.    
67.    
68.   gtk_init(&argc, &argv);  
69.    
70.   window = gtk_window_new(GTK_WINDOW_TOPLEVEL);  
71.    
72.   g_signal_connect(G_OBJECT(window),"expose-event",  
73.       G_CALLBACK(on_expose_event), NULL);  
74.   g_signal_connect(G_OBJECT(window),"destroy",  
75.       G_CALLBACK(gtk_main_quit), NULL);  
76.    
77.   gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);  
78.   gtk_window_set_default_size(GTK_WINDOW(window), width+2, height+2);  
79.    
80.   gtk_widget_set_app_paintable(window, TRUE);  
81.   gtk_widget_show_all(window);  
82.   g_timeout_add(100, (GSourceFunc) time_handler, (gpointer) window);  
83.    
84.   gtk_main();  
85.    
86.   cairo_surface_destroy(image);  
87.    
88.   return0;  

#include <cairo.h> #include <gtk/gtk.h> #include <math.h> cairo_surface_t *image; staticgboolean on_expose_event(GtkWidget *widget, GdkEventExpose *event, gpointer data) { cairo_t *cr; staticgint pos_x = 128; staticgint pos_y = 128; gint radius = 40; staticgint delta[] = { 3, 3 }; cr = gdk_cairo_create(widget->window); gint width, height; gtk_window_get_size(GTK_WINDOW(widget), &width, &height); if(pos_x < 0 + radius) { delta[0] =rand() % 4 + 5; }else if (pos_x > width - radius) { delta[0] = -(rand() % 4 + 5); } if(pos_y < 0 + radius) { delta[1] =rand() % 4 + 5; }else if (pos_y > height - radius) { delta[1] = -(rand() % 4 + 5); } pos_x += delta[0]; pos_y += delta[1]; cairo_set_source_surface(cr, image, 1, 1); cairo_arc(cr, pos_x, pos_y, radius, 0, 2*M_PI); cairo_clip(cr); cairo_paint(cr); cairo_destroy(cr); returnFALSE; } staticgboolean time_handler (GtkWidget *widget) { if(widget->window == NULL) returnFALSE; gtk_widget_queue_draw(widget); returnTRUE; } int main(int argc,char *argv[]) { GtkWidget *window; gint width, height; image = cairo_image_surface_create_from_png("turnacastle.png"); width = cairo_image_surface_get_width(image); height = cairo_image_surface_get_height(image); 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), width+2, height+2); gtk_widget_set_app_paintable(window, TRUE); gtk_widget_show_all(window); g_timeout_add(100, (GSourceFunc) time_handler, (gpointer) window); gtk_main(); cairo_surface_destroy(image); return0;

在这一示例中，在窗口中会有一个圆形区域不断移动，并且在该区域显示位于其下的图像，仿佛是通过一个孔洞观看图像。

if (pos_x < 0 + radius) {      delta[0] = rand () % 4 + 5; } else if (pos_x > width - radius) {      delta[0] = -( rand () % 4 + 5); }

当这个圆形区域碰到窗口边界，它的移动方向就会随机改变。

cairo_set_source_surface(cr, image, 1, 1); cairo_arc(cr, pos_x, pos_y, radius, 0, 2*M_PI);

这里是绘制一幅图像和一个圆。注意：这时，图形尚未绘制到窗口中，它们还在内存里。

cairo_clip(cr);

cairo_clip() 函数设定裁剪域——当前所用的路径，即 cairo_arc() 函数所创建的路径。

cairo_paint(cr);

cairo_paint() 函数绘制当前落入裁剪域中的源。

裁剪矩形

下面这个示例是对一个 Java 2D 示例的模拟。

[html] view plain copy print ?

1. #include <cairo.h>  
2. #include <gtk/gtk.h>  
3. #include <math.h>  
4.    
5.    
6. staticgboolean  
7. on_expose_event(GtkWidget *widget,  
8.     GdkEventExpose *event,  
9.     gpointer data)  
10. {  
11.   cairo_t *cr;  
12.   cr = gdk_cairo_create(widget->window);  
13.    
14.   staticgboolean xdirection = TRUE;  
15.   staticgint counter = 0;  
16.    
17.   intwidth, height;  
18.   gtk_window_get_size(GTK_WINDOW(widget), &width, &height);  
19.    
20.   staticgdouble rotate = 0;  
21.    
22.   staticgint bigx = 20;  
23.   staticgint bigy = 200;  
24.   staticgint delta = 1;  
25.    
26.   counter += 1;   
27.    
28.    
29.   if(bigx > width) {  
30.       xdirection = FALSE;  
31.       delta = -delta;  
32.       bigx = width;  
33.   }  
34.    
35.   if(bigx < 1) {  
36.       bigx = 1;  
37.       delta = -delta;  
38.   }  
39.    
40.   if(bigy > height) {  
41.       xdirection = TRUE;  
42.       delta = -delta;  
43.       bigy = height;  
44.   }  
45.    
46.   if(bigy < 1) {  
47.       delta = -delta;  
48.       bigy = 1;  
49.   }  
50.    
51.   if(xdirection) {  
52.       bigx += delta;  
53.   }else {  
54.       bigy += delta;  
55.   }  
56.    
57.   cairo_translate(cr, width / 2, height /2);  
58.    
59.   cairo_rectangle(cr, -bigx/2, -bigy/2, bigx-2, bigy-2);  
60.   cairo_set_source_rgb(cr, 0, 0, 0);  
61.   cairo_set_line_width(cr, 1);   
62.   cairo_stroke(cr);  
63.    
64.   cairo_rotate(cr, rotate);  
65.   rotate += 0.01;  
66.    
67.   cairo_rectangle(cr, -50, -25, 100, 50);  
68.   cairo_stroke(cr);  
69.    
70.   GdkRectangle bigrect;  
71.   GdkRectangle rect;  
72.   GdkRectangle intersect;  
73.    
74.   bigrect.x = -bigx/2;  
75.   bigrect.y = -bigy/2;  
76.   bigrect.width = bigx -2;  
77.   bigrect.height = bigy -2;  
78.    
79.   rect.x = -50;  
80.   rect.y = -25;  
81.   rect.width = 100;  
82.   rect.height = 50;  
83.    
84.   gdk_rectangle_intersect(&bigrect, &rect, &intersect);  
85.   cairo_rectangle(cr, intersect.x, intersect.y, intersect.width, intersect.height);  
86.   cairo_fill(cr);  
87.    
88.   cairo_destroy(cr);  
89.    
90.   returnFALSE;  
91. }  
92.    
93. staticgboolean  
94. time_handler (GtkWidget *widget)  
95. {  
96.   if(widget->window == NULL) returnFALSE;  
97.   gtk_widget_queue_draw(widget);  
98.   returnTRUE;  
99. }  
100.    
101. int  
102. main (intargc, char *argv[])  
103. {  
104.    
105.   GtkWidget *window;  
106.    
107.   gtk_init(&argc, &argv);  
108.    
109.   window = gtk_window_new(GTK_WINDOW_TOPLEVEL);  
110.    
111.   g_signal_connect(G_OBJECT(window),"expose-event",  
112.       G_CALLBACK(on_expose_event), NULL);  
113.   g_signal_connect(G_OBJECT(window),"destroy",  
114.       G_CALLBACK(gtk_main_quit), NULL);  
115.    
116.   gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);  
117.   gtk_window_set_default_size(GTK_WINDOW(window), 250, 200);  
118.    
119.   gtk_widget_set_app_paintable(window, TRUE);  
120.   gtk_widget_show_all(window);  
121.   g_timeout_add(5, (GSourceFunc) time_handler, (gpointer) window);  
122.    
123.   gtk_main();  
124.    
125.   return0;  
126. }  

#include <cairo.h> #include <gtk/gtk.h> #include <math.h> staticgboolean on_expose_event(GtkWidget *widget, GdkEventExpose *event, gpointer data) { cairo_t *cr; cr = gdk_cairo_create(widget->window); staticgboolean xdirection = TRUE; staticgint counter = 0; intwidth, height; gtk_window_get_size(GTK_WINDOW(widget), &width, &height); staticgdouble rotate = 0; staticgint bigx = 20; staticgint bigy = 200; staticgint delta = 1; counter += 1; if(bigx > width) { xdirection = FALSE; delta = -delta; bigx = width; } if(bigx < 1) { bigx = 1; delta = -delta; } if(bigy > height) { xdirection = TRUE; delta = -delta; bigy = height; } if(bigy < 1) { delta = -delta; bigy = 1; } if(xdirection) { bigx += delta; }else { bigy += delta; } cairo_translate(cr, width / 2, height /2); cairo_rectangle(cr, -bigx/2, -bigy/2, bigx-2, bigy-2); cairo_set_source_rgb(cr, 0, 0, 0); cairo_set_line_width(cr, 1); cairo_stroke(cr); cairo_rotate(cr, rotate); rotate += 0.01; cairo_rectangle(cr, -50, -25, 100, 50); cairo_stroke(cr); GdkRectangle bigrect; GdkRectangle rect; GdkRectangle intersect; bigrect.x = -bigx/2; bigrect.y = -bigy/2; bigrect.width = bigx -2; bigrect.height = bigy -2; rect.x = -50; rect.y = -25; rect.width = 100; rect.height = 50; gdk_rectangle_intersect(&bigrect, &rect, &intersect); cairo_rectangle(cr, intersect.x, intersect.y, intersect.width, intersect.height); cairo_fill(cr); cairo_destroy(cr); returnFALSE; } staticgboolean time_handler (GtkWidget *widget) { if(widget->window == NULL) returnFALSE; gtk_widget_queue_draw(widget); returnTRUE; } int main (intargc, 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), 250, 200); gtk_widget_set_app_paintable(window, TRUE); gtk_widget_show_all(window); g_timeout_add(5, (GSourceFunc) time_handler, (gpointer) window); gtk_main(); return0; }

在这个示例中，绘制了两个矩形，一个是形状大一些的，一个是在旋转的。大点的那个矩形，持续的在进行形状的缩放，小一点的一直在旋转。在两个矩形的运动过程中进行了交集操作，它们的相交区域用黑色区域来绘制。注意：那个相交区域并非恰好是矩形，只是为了简化，将那个区域用矩形近似替代。

static gboolean xdirection = TRUE;

这个变量决定了那个大一些的矩形的运动方向。

if (bigx > width) {      xdirection = FALSE;      delta = -delta;      bigx = width; }

如果那个大的矩形，其宽度增长到与窗口的宽度相等时，就开始收缩，同时矩形开始沿 y 方向收缩。

cairo_rotate(cr, rotate);

cairo_rotate() 函数用来旋转那个小一点的矩形。

GdkRectangle bigrect; GdkRectangle rect; GdkRectangle intersect;

这里定义了三个矩形区域。insersect 是那两个矩形的相交区域。

gdk_rectangle_intersect(&bigrect, &rect, &intersect);

这个函数可完成矩形相交运算。

cairo_rectangle(cr, intersect.x, intersect.y, intersect.width, intersect.height); cairo_fill(cr);

绘制相交区域的矩形。

 

遮蔽

因为在源被用于外观之前，首先要被过滤。遮蔽可作为一种过滤器。遮蔽用于决定源的哪部分要被显示，哪部分不可被显示。遮蔽的不透明部分允许将源复制到外观，透明部分则不允许将源复制给外观。

 

[html] view plain copy print ?

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

这个小例子清楚的展示了遮蔽的基本思想。

surface = cairo_image_surface_create_from_png( "omen.png" ); cairo_mask_surface(cr, surface, 0, 0); cairo_fill(cr);

这里，是用了一幅图像作为遮蔽，然后在窗口中显示它。

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