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

转载 2012年03月29日 17:36:32

在这一篇中讲述裁剪(Clipping)与遮蔽(Masking)。

裁剪

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


  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;  


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


if (pos_x < 0 + radius) {
    delta[0] =rand() % 4 + 5;
} elseif(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 示例的模拟。

  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. }  



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


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

绘制相交区域的矩形。

 

遮蔽

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

 

  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;  

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


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

相关文章推荐

Cairo 图形指南 (6) —— 透明

这一篇讲述有关透明的一些基本知识,并提供两个有趣的透明效果。 透明是透过某种材质的可见度。理解透明最简单的方式就是想像一下玻璃或者水。从技术上讲,光线可以穿过玻璃,因此我们可以看到玻璃之后的物体...

Cairo 图形指南 (3) —— 变换

这一篇讲述变换(Transformation) 仿射变换是由一些线性变换与平移构成的。线性变换可以写为单个矩阵的形式。旋转是让一个刚体绕一点运动的变换。缩放变换是让物体的形状扩大与减小,并且在各个方向...

Cairo 图形指南 (5) —— 形状与填充

这一部分,讲述一些基本的以及较为高级的形状绘制及其纯色 (solid color)、图案 (pattern) 与渐变 (gradient) 填充方法。 基本形状 Cairo 提供了几个用于...

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

在这一篇里,要讲述图像的处理。先是演示如何在 GTK+ 窗口中显示一幅图像,然后再制造一些特效。 图像的显示 在第一个例子里,显示了一幅图像。 [html] view...

Cairo 图形指南 (7) —— 合成

合成 (Compositing) 可以将一些单独的源 (source) 所生成可视元素组合成到单幅图像中去,主要用于创建所有的可视元素作为同一场景的一部分这样一种假象。合成在电影工业中被广为使用,用于...

Cairo 图形指南(1) —— 基本绘图

这一部分讲述如何绘制一些简单的图元,包括直线、填充与笔画操作、虚线、线端(Cap)与线的交合等图形的绘制方法。 直线段 直线段是非常基础的矢量图形对象。画一条直线段,需要调用两个函数:cairo_...
  • haiwil
  • haiwil
  • 2011年09月13日 16:50
  • 4665

Cairo 图形指南 (6) —— 透明

这一篇讲述有关透明的一些基本知识,并提供两个有趣的透明效果。 透明是透过某种材质的可见度。理解透明最简单的方式就是想像一下玻璃或者水。从技术上讲,光线可以穿过玻璃,因此我们可以看到玻璃之后的物体。 ...

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

在这一篇里,要讲述图像的处理。先是演示如何在 GTK+ 窗口中显示一幅图像,然后再制造一些特效。 图像的显示 在第一个例子里,显示了一幅图像。 #include #include...
  • haiwil
  • haiwil
  • 2011年09月13日 17:04
  • 1730

光栅图形学算法——裁剪算法

使用计算机处理图形信息时,计算机内部存储的图形往往比较大,而屏幕显示的只是图形的一部分。 如上矩形为显示屏,要显示该多边形,就要进行裁剪   因此需要确定图形哪些部分落在显示区之内,哪些落在显...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Cairo 图形指南 (4) —— 裁剪与遮蔽
举报原因:
原因补充:

(最多只允许输入30个字)