Cairo 图形指南 (8) —— 裁剪与遮蔽
在这一篇中讲述裁剪(Clipping)与遮蔽(Masking)。
裁剪
在下面的示例中,对一幅图像进行裁剪。
#include <cairo.h> #include <gtk/gtk.h> #include <math.h> cairo_surface_t *image; static gboolean on_expose_event(GtkWidget *widget, GdkEventExpose *event, gpointer data) { cairo_t *cr; static gint pos_x = 128; static gint pos_y = 128; gint radius = 40; static gint 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); return FALSE; } static gboolean time_handler (GtkWidget *widget) { if (widget->window == NULL) return FALSE; gtk_widget_queue_draw(widget); return TRUE; } 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); return 0; }
在这一示例中,在窗口中会有一个圆形区域不断移动,并且在该区域显示位于其下的图像,仿佛是通过一个孔洞观看图像。
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 示例的模拟。
#include <cairo.h> #include <gtk/gtk.h> #include <math.h> static gboolean on_expose_event(GtkWidget *widget, GdkEventExpose *event, gpointer data) { cairo_t *cr; cr = gdk_cairo_create(widget->window); static gboolean xdirection = TRUE; static gint counter = 0; int width, height; gtk_window_get_size(GTK_WINDOW(widget), &width, &height); static gdouble rotate = 0; static gint bigx = 20; static gint bigy = 200; static gint 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); return FALSE; } static gboolean time_handler (GtkWidget *widget) { if (widget->window == NULL) return FALSE; gtk_widget_queue_draw(widget); return TRUE; } 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), 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(); return 0; }
在这个示例中,绘制了两个矩形,一个是形状大一些的,一个是在旋转的。大点的那个矩形,持续的在进行形状的缩放,小一点的一直在旋转。在两个矩形的运动过程中进行了交集操作,它们的相交区域用黑色区域来绘制。注意:那个相交区域并非恰好是矩形,只是为了简化,将那个区域用矩形近似替代。
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);
绘制相交区域的矩形。
遮蔽
因为在源被用于外观之前,首先要被过滤。遮蔽可作为一种过滤器。遮蔽用于决定源的哪部分要被显示,哪部分不可被显示。遮蔽的不透明部分允许将源复制到外观,透明部分则不允许将源复制给外观。
#include <cairo.h> #include <gtk/gtk.h> static gboolean on_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); return FALSE; } 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(); return 0; }
这个小例子清楚的展示了遮蔽的基本思想。
surface = cairo_image_surface_create_from_png("omen.png"); cairo_mask_surface(cr, surface, 0, 0); cairo_fill(cr);
这里,是用了一幅图像作为遮蔽,然后在窗口中显示它。