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 的图像。