ZetCode

裁剪和遮罩

最后修改于 2023 年 7 月 17 日

在 Cairo 教程的这一部分，我们讨论裁剪和遮罩。

剪裁

裁剪是将绘图限制在特定区域。这是为了效率原因和创建有趣的效果。

在下面的示例中，我们裁剪了一个图像。

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

在这个示例中，我们裁剪了一个图像。一个圆在屏幕上移动，显示底层图像的一部分。这就像透过一个洞看一样。

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, glob.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 在当前裁剪区域内的任何地方绘制当前源。

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

一个图像表面是使用 cairo_image_surface_create_from_png 函数从 PNG 图像创建的。

Clipping image
图：裁剪图像

遮罩

在将源应用于表面之前，会先对其进行过滤。遮罩用作过滤器。遮罩决定了源在哪里被应用，在哪里不被应用。遮罩的不透明部分允许复制源。透明部分不允许将源复制到表面。

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

这个小例子清晰地展示了遮罩背后的基本思想。遮罩决定了在哪里绘制，在哪里不绘制。

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
图：应用遮罩

卷帘效果

在这个代码示例中，我们实现了图像的卷帘效果。这类似于我们使用卷帘窗帘的做法。

#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 像素。我们绘制 0、1、2... 高度为 1px 的线条。每个周期，图像的一部分都会增加 1px 的高度，直到整个图像可见。

struct {
  cairo_surface_t *image;
  cairo_surface_t *surface;
  gboolean timer;
  gint img_width;
  gint img_height;
} glob;

在 glob 结构中，我们存储了两个表面、一个计时器以及图像的宽度和高度变量。

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 函数中，我们初始化了之前声明的变量。最后一行创建了一个空的图像表面。它将用先前创建的图像表面的像素行来填充。

ic = cairo_create(glob.surface);

我们从空的图像源创建一个 cairo 上下文。

cairo_rectangle(ic, 0, 0, glob.img_width, h);
cairo_fill(ic);

我们在最初为空的图像中绘制一个矩形。每个周期，矩形的高度会增加 1px。这样创建的图像稍后将用作遮罩。

h += 1;

要显示的图像高度增加了一个单位。

if ( h == glob.img_height) glob.timer = FALSE;

当我们将整个图像绘制到 GTK 窗口上时，我们会停止计时器函数。

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

城堡的图像被设置为绘图的源。cairo_mask_surface 使用表面的 alpha 通道作为遮罩来绘制当前源。

static void cleanup()
{
  cairo_surface_destroy(glob.image);
  cairo_surface_destroy(glob.surface);
}

在 cleanup 函数中，我们销毁了创建的表面。

本章介绍了 Cairo 中的裁剪和遮罩。