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

来源：互联网发布：ssh端口 windows 编辑：程序博客网时间：2024/05/17 05:14

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

裁剪

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

#include <cairo.h>#include <gtk/gtk.h>#include <math.h> cairo_surface_t *image; staticgbooleanon_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;} staticgbooleantime_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;
} 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 示例的模拟。

#include <cairo.h>#include <gtk/gtk.h>#include <math.h>  staticgbooleanon_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;} staticgbooleantime_handler (GtkWidget *widget){  if(widget->window == NULL) returnFALSE;  gtk_widget_queue_draw(widget);  returnTRUE;} intmain (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;}

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

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

绘制相交区域的矩形。

遮蔽

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

#include <cairo.h>#include <gtk/gtk.h>  staticgbooleanon_expose_event(GtkWidget *widget,    GdkEventExpose *event,    gpointer data){  cairo_t *cr;  cairo_surface_t *surface;   cr = gdk_cairo_create(widget->window);   cairo_set_source_rgb(cr, 0, 0, 0);   surface = cairo_image_surface_create_from_png("omen.png");  cairo_mask_surface(cr, surface, 0, 0);  cairo_fill(cr);   cairo_surface_destroy(surface);  cairo_destroy(cr);   returnFALSE;}  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), 305, 100);   gtk_window_set_title(GTK_WINDOW(window),"mask");  gtk_widget_set_app_paintable(window, TRUE);  gtk_widget_show_all(window);   gtk_main();   return0;}

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

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

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