Cairo 中的圖像 · ZetCode 中文系列教程

# Cairo 中的圖像 > 原文： [https://zetcode.com/gfx/cairo/cairoimages/](https://zetcode.com/gfx/cairo/cairoimages/) 在 Cairo 圖形教程的這一部分中，我們將討論圖像。我們將展示如何在 GTK 窗口上顯示圖像。我們還將用圖像創建一些效果。 ## 顯示圖像在第一個示例中，我們將顯示一個圖像。 ```c #include <cairo.h> #include <gtk/gtk.h> struct { cairo_surface_t *image; } glob; static void do_drawing(cairo_t *); 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_surface(cr, glob.image, 10, 10); cairo_paint(cr); } int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *darea; glob.image = cairo_image_surface_create_from_png("stmichaelschurch.png"); 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(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), 300, 220); gtk_window_set_title(GTK_WINDOW(window), "Image"); gtk_widget_show_all(window); gtk_main(); cairo_surface_destroy(glob.image); return 0; } ``` 該示例顯示圖像。 ```c glob.image = cairo_image_surface_create_from_png("stmichaelschurch.png"); ``` 我們從 PNG 圖像創建圖像表面。出于效率原因，該函數在主函數中調用。 ```c cairo_set_source_surface(cr, glob.image, 10, 10); ``` 我們從創建的圖像表面創建一個繪畫源。 ```c cairo_paint(cr); ``` 我們在窗口上繪制源。 ```c cairo_surface_destroy(glob.image); ``` 最后，表面被破壞。 ## 水印在圖像上繪制信息是很常見的。寫在圖像上的文本稱為水印。水印用于識別圖像。它們可能是版權聲明或圖像創建時間。 ```c #include <cairo.h> #include <gtk/gtk.h> static void do_drawing(cairo_t *, GtkWidget *widget); 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) { cairo_set_source_surface(cr, glob.image, 10, 10); cairo_paint(cr); } static void load_image() { glob.image = cairo_image_surface_create_from_png("beckov.png"); } static void draw_mark() { cairo_t *ic; ic = cairo_create(glob.image); cairo_set_font_size(ic, 11); cairo_set_source_rgb(ic, 0.9 , 0.9 , 0.9); cairo_move_to(ic, 20, 30); cairo_show_text(ic, " Beckov 2012 , (c) Jan Bodnar "); cairo_stroke(ic); } int main (int argc, char *argv[]) { GtkWidget *window; GtkWidget *darea; load_image(); draw_mark(); 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(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), 350, 250); gtk_window_set_title(GTK_WINDOW(window), "Watermark"); gtk_widget_show_all(window); gtk_main(); cairo_surface_destroy(glob.image); return 0; } ``` 我們在圖像上繪制版權信息。 ```c static void load_image() { glob.image = cairo_image_surface_create_from_png("beckov.png"); } ``` 在`load_image()`方法中，我們從 PNG 圖像創建圖像表面。 ```c static void draw_mark() { cairo_t *ic; ic = cairo_create(glob.image); ... ``` 在`draw_mark()`函數中，我們在圖像上繪制版權信息。首先，我們從圖像表面創建一個繪圖上下文。 ```c cairo_set_font_size(ic, 11); cairo_set_source_rgb(ic, 0.9 , 0.9 , 0.9); cairo_move_to(ic, 20, 30); cairo_show_text(ic, " Beckov 2012 , (c) Jan Bodnar "); cairo_stroke(ic); ``` 然后，我們用白色繪制一個小的文本。 ```c static void do_drawing(cairo_t *cr, GtkWidget *widget) { cairo_set_source_surface(cr, glob.image, 10, 10); cairo_paint(cr); } ``` 圖像表面繪制在窗口上。 ## 頻譜效應我們稱其為頻譜效應，因為它類似于舊的 ZX 頻譜計算機。當您將圖像加載到這臺計算機時，它逐漸出現在屏幕上。下一個例子是基于這種經驗。 ```c #include <cairo.h> #include <gtk/gtk.h> static void do_drawing(cairo_t *); struct { gboolean timer; cairo_surface_t *image; cairo_surface_t *surface; gint img_width; gint img_height; } glob; static void init_vars() { 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); glob.timer = TRUE; } 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_t *ic; static gint count = 0; ic = cairo_create(glob.surface); gint i, j; for (i = 0; i <= glob.img_height; i+=7) { for (j = 0 ; j < count; j++) { cairo_move_to(ic, 0, i+j); cairo_line_to(ic, glob.img_width, i+j); } } count++; if (count == 8) glob.timer = FALSE; cairo_set_source_surface(cr, glob.image, 10, 10); cairo_mask_surface(cr, glob.surface, 10, 10); cairo_stroke(ic); cairo_destroy(ic); } static gboolean time_handler(GtkWidget *widget) { if (!glob.timer) return FALSE; gtk_widget_queue_draw(widget); return TRUE; } int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *darea; init_vars(); 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), 325, 250); gtk_window_set_title(GTK_WINDOW(window), "Spectrum"); g_timeout_add(400, (GSourceFunc) time_handler, (gpointer) window); gtk_widget_show_all(window); gtk_main(); cairo_surface_destroy(glob.image); cairo_surface_destroy(glob.surface); return 0; } ``` 我們將圖像分為由 8 行組成的 n 個部分。每個周期，圖像的每個部分都會變大一個像素。創建的圖像將用作顯示城堡圖像的遮罩。 ```c struct { gboolean timer; cairo_surface_t *image; cairo_surface_t *surface; gint img_width; gint img_height; } glob; ``` 全局結構存儲在更多函數中使用的變量。 ```c static void init_vars() { 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); glob.timer = TRUE; } ``` 在`init_vars()`函數中，我們啟動上述變量。 ```c gint i, j; for (i = 0; i <= glob.img_height; i+=7) { for (j = 0 ; j < count; j++) { cairo_move_to(ic, 0, i+j); cairo_line_to(ic, glob.img_width, i+j); } } ``` 我們逐步將線繪制到 n 個部分中的每個部分。 ```c count++; if (count == 8) glob.timer = FALSE; ``` 8 個步驟后，動畫結束。 ```c cairo_set_source_surface(cr, glob.image, 10, 10); cairo_mask_surface(cr, glob.surface, 10, 10); cairo_stroke(ic); ``` 使用遮罩操作，我們在窗口上繪制圖像的各個部分。本章介紹了 Cairo 的圖像。