剪裁和遮罩 · ZetCode 中文系列教程

# 剪裁和遮罩 > 原文： [https://zetcode.com/gfx/cairo/clippingmasking/](https://zetcode.com/gfx/cairo/clippingmasking/) 在 Cairo 教程的這一部分中，我們將討論剪切和遮罩。 ## 剪裁剪裁將圖形限制在某個區域。這樣做是出于效率方面的考慮，并會產生有趣的效果。在下面的示例中，我們將裁剪圖像。 ```c #include <cairo.h> #include <gtk/gtk.h> #include <math.h> static void do_drawing(cairo_t *, GtkWidget *); struct { cairo_surface_t *image; } glob; static gboolean on_draw_event(GtkWidget *widget, cairo_t *cr, gpointer user_data) { do_drawing(cr, widget); return FALSE; } static void do_drawing(cairo_t *cr, GtkWidget *widget) { static gint pos_x = 128; static gint pos_y = 128; static gint radius = 40; static gint delta[] = { 3, 3 }; GtkWidget *win = gtk_widget_get_toplevel(widget); gint width, height; gtk_window_get_size(GTK_WINDOW(win), &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, glob.image, 1, 1); cairo_arc(cr, pos_x, pos_y, radius, 0, 2*M_PI); cairo_clip(cr); cairo_paint(cr); } static gboolean time_handler(GtkWidget *widget) { gtk_widget_queue_draw(widget); return TRUE; } int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *darea; gint width, height; glob.image = cairo_image_surface_create_from_png("turnacastle.png"); width = cairo_image_surface_get_width(glob.image); height = cairo_image_surface_get_height(glob.image); gtk_init(&argc, &argv); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); darea = gtk_drawing_area_new(); gtk_container_add(GTK_CONTAINER (window), darea); g_signal_connect(G_OBJECT(darea), "draw", G_CALLBACK(on_draw_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_window_set_title(GTK_WINDOW(window), "Clip image"); gtk_widget_show_all(window); g_timeout_add(100, (GSourceFunc) time_handler, (gpointer) window); gtk_main(); cairo_surface_destroy(glob.image); return 0; } ``` 在此示例中，我們將裁剪圖像。屏幕上正在移動一個圓圈，并顯示了一部分基礎圖像。這就像我們從孔中看一樣。 ```c if (pos_x < 0 + radius) { delta[0] = rand() % 4 + 5; } else if (pos_x > width - radius) { delta[0] = -(rand() % 4 + 5); } ``` 如果圓碰到窗口的左側或右側，則圓的移動方向會隨機變化。頂部和底部也一樣。 ```c cairo_set_source_surface(cr, glob.image, 1, 1); cairo_arc(cr, pos_x, pos_y, radius, 0, 2*M_PI); ``` 在這里，我們繪制圖像和一個圓。請注意，我們目前不在窗口上繪制，而僅在內存中繪制。 ```c cairo_clip(cr); ``` `cairo_clip()`設置剪切區域。裁剪區域是當前使用的路徑。當前路徑是通過`cairo_arc()`函數調用創建的。 ```c cairo_paint(cr); ``` `cairo_paint()`在當前剪裁區域內的任何地方繪制當前源。 ```c glob.image = cairo_image_surface_create_from_png("turnacastle.png"); ``` 使用`cairo_image_surface_create_from_png()`函數從 PNG 圖像創建圖像表面。 ![Clipping image](https://img.kancloud.cn/85/15/85155f36df637247db710f45235c6fa7_304x253.jpg) 圖：剪裁圖像 ## 遮罩在將源應用于表面之前，先對其進行過濾。遮罩用作過濾器。遮罩確定在哪里應用源，在哪里不應用。遮罩的不透明部分允許復制源。透明零件不允許將源復制到表面。 ```c #include <cairo.h> #include <gtk/gtk.h> static void do_drawing(cairo_t *); struct { cairo_surface_t *surface; } glob; static gboolean on_draw_event(GtkWidget *widget, cairo_t *cr, gpointer user_data) { do_drawing(cr); return FALSE; } static void do_drawing(cairo_t *cr) { cairo_set_source_rgb(cr, 0, 0, 0); cairo_mask_surface(cr, glob.surface, 0, 0); cairo_fill(cr); } static void create_surface() { glob.surface = cairo_image_surface_create_from_png("omen.png"); } static void destroy_surface() { cairo_surface_destroy(glob.surface); } int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *darea; gtk_init(&argc, &argv); create_surface(); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); darea = gtk_drawing_area_new(); gtk_container_add(GTK_CONTAINER(window), darea); g_signal_connect(G_OBJECT(darea), "draw", G_CALLBACK(on_draw_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_show_all(window); gtk_main(); destroy_surface(); return 0; } ``` 這個小例子清楚地說明了遮罩背后的基本思想。遮罩可確定在何處繪畫和不在何處繪畫。 ```c static void do_drawing(cairo_t *cr) { cairo_set_source_rgb(cr, 0, 0, 0); cairo_mask_surface(cr, glob.surface, 0, 0); cairo_fill(cr); } ``` 在`do_drawing()`函數中，我們使用圖像作為遮罩。因此，它顯示在窗口上。 ![Applying a mask](https://img.kancloud.cn/73/10/731031683ce2aa2ae53f7592c79a40ff_307x126.jpg) 圖：應用遮罩 ## 蒙蔽效果在此代碼示例中，我們將忽略圖像。這類似于我們使用卷簾所做的。 ```c #include <cairo.h> #include <gtk/gtk.h> static void do_drawing(cairo_t *); struct { cairo_surface_t *image; cairo_surface_t *surface; gboolean timer; gint img_width; gint img_height; } glob; static gboolean on_draw_event(GtkWidget *widget, cairo_t *cr, gpointer user_data) { do_drawing(cr); return FALSE; } static gboolean time_handler(GtkWidget *widget) { if (!glob.timer) return FALSE; gtk_widget_queue_draw(widget); return TRUE; } static void do_drawing(cairo_t *cr) { cairo_t *ic; static gint h = 0; ic = cairo_create(glob.surface); cairo_rectangle(ic, 0, 0, glob.img_width, h); cairo_fill(ic); h += 1; if ( h == glob.img_height) glob.timer = FALSE; cairo_set_source_surface(cr, glob.image, 10, 10); cairo_mask_surface(cr, glob.surface, 10, 10); cairo_destroy(ic); } static void init_vars() { glob.timer = TRUE; glob.image = cairo_image_surface_create_from_png("beckov.png"); glob.img_width = cairo_image_surface_get_width(glob.image); glob.img_height = cairo_image_surface_get_height(glob.image); glob.surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, glob.img_width, glob.img_height); } static void cleanup() { cairo_surface_destroy(glob.image); cairo_surface_destroy(glob.surface); } int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *darea; gtk_init(&argc, &argv); init_vars(); window = gtk_window_new(GTK_WINDOW_TOPLEVEL); darea = gtk_drawing_area_new(); gtk_container_add(GTK_CONTAINER(window), darea); g_signal_connect(G_OBJECT(darea), "draw", G_CALLBACK(on_draw_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), 325, 250); gtk_window_set_title(GTK_WINDOW(window), "Blind down"); g_timeout_add(15, (GSourceFunc) time_handler, (gpointer) window); gtk_widget_show_all(window); gtk_main(); cleanup(); return 0; } ``` 盲目效應背后的想法很簡單。圖像高度為`h`像素。我們繪制高度為 1px 的 0、1、2 ... 線。每個周期，圖像的一部分高 1px，直到整個圖像可見為止。 ```c struct { cairo_surface_t *image; cairo_surface_t *surface; gboolean timer; gint img_width; gint img_height; } glob; ``` 在全局結構中，我們將存儲兩個表面，一個計時器以及圖像的寬度和高度變量。 ```c static void init_vars() { glob.timer = TRUE; glob.image = cairo_image_surface_create_from_png("beckov.png"); glob.img_width = cairo_image_surface_get_width(glob.image); glob.img_height = cairo_image_surface_get_height(glob.image); glob.surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, glob.img_width, glob.img_height); } ``` 在`init_vars()`函數中，我們初始化先前聲明的變量。最后一行創建一個空的圖像表面。它將用我們之前創建的圖像表面的像素線填充。 ```c ic = cairo_create(glob.surface); ``` 我們從空圖像源創建一個 cairo 上下文。 ```c cairo_rectangle(ic, 0, 0, glob.img_width, h); cairo_fill(ic); ``` 我們在最初為空的圖像中繪制一個矩形。矩形每個周期將高出 1 像素。以這種方式創建的圖像稍后將用作遮罩。 ```c h += 1; ``` 要顯示的圖像高度增加一個單位。 ```c if ( h == glob.img_height) glob.timer = FALSE; ``` 當我們在 GTK 窗口上繪制整個圖像時，我們將停止計時器函數。 ```c cairo_set_source_surface(cr, glob.image, 10, 10); cairo_mask_surface(cr, glob.surface, 10, 10); ``` 城堡的圖像被設置為繪畫的來源。 `cairo_mask_surface()`使用表面的 Alpha 通道作為遮罩來繪制電流源。 ```c static void cleanup() { cairo_surface_destroy(glob.image); cairo_surface_destroy(glob.surface); } ``` 在`cleanup()`函數中，我們銷毀了創建的曲面。本章涉及在 Cairo 的??剪切和遮罩。