天天看点
返回

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

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

裁剪

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

[html] view plain copy print ?

  1. #include <cairo.h>  
  2. #include <gtk/gtk.h>  
  3. #include <math.h>  
  4. cairo_surface_t *image;  
  5. staticgboolean  
  6. on_expose_event(GtkWidget *widget,  
  7.     GdkEventExpose *event,  
  8.     gpointer data)  
  9. {  
  10.   cairo_t *cr;  
  11.   staticgint pos_x = 128;  
  12.   staticgint pos_y = 128;  
  13.   gint radius = 40;   
  14.   staticgint delta[] = { 3, 3 };  
  15.   cr = gdk_cairo_create(widget->window);  
  16.   gint width, height;  
  17.   gtk_window_get_size(GTK_WINDOW(widget), &width, &height);  
  18.   if(pos_x < 0 + radius) {  
  19.       delta[0] =rand() % 4 + 5;  
  20.   }else if (pos_x > width - radius) {  
  21.       delta[0] = -(rand() % 4 + 5);  
  22.   }  
  23.   if(pos_y < 0 + radius) {  
  24.       delta[1] =rand() % 4 + 5;  
  25.   }else if (pos_y > height - radius) {  
  26.       delta[1] = -(rand() % 4 + 5);  
  27.   }  
  28.   pos_x += delta[0];  
  29.   pos_y += delta[1];  
  30.   cairo_set_source_surface(cr, image, 1, 1);  
  31.   cairo_arc(cr, pos_x, pos_y, radius, 0, 2*M_PI);  
  32.   cairo_clip(cr);  
  33.   cairo_paint(cr);  
  34.   cairo_destroy(cr);  
  35.   returnFALSE;  
  36. }  
  37. staticgboolean  
  38. time_handler (GtkWidget *widget)  
  39. {  
  40.   if(widget->window == NULL) returnFALSE;  
  41.   gtk_widget_queue_draw(widget);  
  42.   returnTRUE;  
  43. }  
  44. int main(int argc,char *argv[])  
  45. {  
  46.   GtkWidget *window;  
  47.   gint width, height;   
  48.   image = cairo_image_surface_create_from_png("turnacastle.png");  
  49.   width = cairo_image_surface_get_width(image);  
  50.   height = cairo_image_surface_get_height(image);  
  51.   gtk_init(&argc, &argv);  
  52.   window = gtk_window_new(GTK_WINDOW_TOPLEVEL);  
  53.   g_signal_connect(G_OBJECT(window),"expose-event",  
  54.       G_CALLBACK(on_expose_event), NULL);  
  55.   g_signal_connect(G_OBJECT(window),"destroy",  
  56.       G_CALLBACK(gtk_main_quit), NULL);  
  57.   gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);  
  58.   gtk_window_set_default_size(GTK_WINDOW(window), width+2, height+2);  
  59.   gtk_widget_set_app_paintable(window, TRUE);  
  60.   gtk_widget_show_all(window);  
  61.   g_timeout_add(100, (GSourceFunc) time_handler, (gpointer) window);  
  62.   gtk_main();  
  63.   cairo_surface_destroy(image);  
  64.   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() 函数绘制当前落入裁剪域中的源。

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

裁剪矩形

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

[html] view plain copy print ?

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

#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);

绘制相交区域的矩形。

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

遮蔽

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

[html] view plain copy print ?

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

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

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

gtk cairo 图形 callback image signal object
上一篇: cairo填充_cairo图形库
下一篇: 进制均值

继续阅读