跳转至

Cairo 中的图像

原文： https://zetcode.com/gfx/cairo/cairoimages/

在 Cairo 图形教程的这一部分中，我们将讨论图像。 我们将展示如何在 GTK 窗口上显示图像。 我们还将用图像创建一些效果。

显示图像

在第一个示例中，我们将显示一个图像。

#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;
}

该示例显示图像。

glob.image = cairo_image_surface_create_from_png("stmichaelschurch.png");

我们从 PNG 图像创建图像表面。 出于效率原因，该函数在主函数中调用。

cairo_set_source_surface(cr, glob.image, 10, 10);

我们从创建的图像表面创建一个绘画源。

cairo_paint(cr);

我们在窗口上绘制源。

cairo_surface_destroy(glob.image);

最后，表面被破坏。

水印

在图像上绘制信息是很常见的。 写在图像上的文本称为水印。 水印用于识别图像。 它们可能是版权声明或图像创建时间。

#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;
}

我们在图像上绘制版权信息。

static void load_image()
{        
  glob.image = cairo_image_surface_create_from_png("beckov.png"); 
}

在load_image()方法中，我们从 PNG 图像创建图像表面。

static void draw_mark() 
{ 
  cairo_t *ic;
  ic = cairo_create(glob.image);
...

在draw_mark()函数中，我们在图像上绘制版权信息。 首先，我们从图像表面创建一个绘图上下文。

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

然后，我们用白色绘制一个小的文本。

static void do_drawing(cairo_t *cr, GtkWidget *widget)
{
  cairo_set_source_surface(cr, glob.image, 10, 10);
  cairo_paint(cr);
}

图像表面绘制在窗口上。

频谱效应

我们称其为频谱效应，因为它类似于旧的 ZX 频谱计算机。 当您将图像加载到这台计算机时，它逐渐出现在屏幕上。 下一个例子是基于这种经验。

#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 个部分。 每个周期，图像的每个部分都会变大一个像素。 创建的图像将用作显示城堡图像的遮罩。

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

在init_vars()函数中，我们启动上述变量。

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 个部分中的每个部分。

count++;
if (count == 8) glob.timer = FALSE;

8 个步骤后，动画结束。

cairo_set_source_surface(cr, glob.image, 10, 10);
cairo_mask_surface(cr, glob.surface, 10, 10);
cairo_stroke(ic);

使用遮罩操作，我们在窗口上绘制图像的各个部分。

本章介绍了 Cairo 的图像。

回到顶部