论坛 › Cairo相关讨论 › [转]Cairo 图形指南 (7) —— 合成

Tom 发表于 2011-2-3 02:17:07

[转]Cairo 图形指南 (7) —— 合成

   

合成 (Compositing) 可以将一些单独的源 (source) 所生成可视元素组合成到单幅图像中去，主要用于创建所有的可视元素作为同一场景的一部分这样一种假象。合成在电影工业中被广为使用，用于创建人群、不寻常 的世界等画面，因为这样的画面在现实中的制作代价非常昂贵甚至难以实现。
Cairo 图形库提供了 14 种不同的合成操作。
#include <cairo.h>
#include <gtk/gtk.h>

static void
draw (cairo_t * cr, gint x, gint w, gint h, cairo_operator_t op)
{

      cairo_t *first_cr, *second_cr;
      cairo_surface_t *first, *second;

      first = cairo_surface_create_similar (cairo_get_target (cr),
                                              CAIRO_CONTENT_COLOR_ALPHA,
                                              w, h);

      second = cairo_surface_create_similar (cairo_get_target (cr),
                                             CAIRO_CONTENT_COLOR_ALPHA,
                                             w, h);

      first_cr = cairo_create (first);
      cairo_set_source_rgb (first_cr, 0, 0, 0.4);
      cairo_rectangle (first_cr, x, 20, 50, 50);
      cairo_fill (first_cr);

      second_cr = cairo_create (second);
      cairo_set_source_rgb (second_cr, 0.5, 0.5, 0);
      cairo_rectangle (second_cr, x + 10, 40, 50, 50);
      cairo_fill (second_cr);

      cairo_set_operator (first_cr, op);
      cairo_set_source_surface (first_cr, second, 0, 0);
      cairo_paint (first_cr);

      cairo_set_source_surface (cr, first, 0, 0);
      cairo_paint (cr);

      cairo_surface_destroy (first);
      cairo_surface_destroy (second);

      cairo_destroy (first_cr);
      cairo_destroy (second_cr);
}

static gboolean
on_expose_event (GtkWidget * widget,
               GdkEventExpose * event, gpointer data)
{
      cairo_t *cr;
      gint w, h;
      gint x, y;

      cairo_operator_t oper[] = {
                CAIRO_OPERATOR_DEST_OVER,
                CAIRO_OPERATOR_DEST_IN,
                CAIRO_OPERATOR_OUT,
                CAIRO_OPERATOR_ADD,
                CAIRO_OPERATOR_ATOP,
                CAIRO_OPERATOR_DEST_ATOP,
      };

      gtk_window_get_size (GTK_WINDOW (widget), &w, &h);

      cr = gdk_cairo_create (widget->window);

      gint i;
      for (x = 20, y = 20, i = 0; i < 6; x += 80, i++) {
                draw (cr, x, w, h, oper[i]);
      }

      cairo_destroy (cr);

      return FALSE;
}

int
main (int argc, char *argv[])
{
      GtkWidget *window;

      gtk_init (&argc, &argv);

      window = gtk_window_new (GTK_WINDOW_TOPLEVEL);

      g_signal_connect (window, "expose-event",
                        G_CALLBACK (on_expose_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), 510, 120);
      gtk_widget_set_app_paintable (window, TRUE);

      gtk_widget_show_all (window);

      gtk_main ();

      return 0;
}

示例程序中，显示了两个正方形的 6 种合成效果。
      first = cairo_surface_create_similar (cairo_get_target (cr),
                                              CAIRO_CONTENT_COLOR_ALPHA,
                                              w, h);

      second = cairo_surface_create_similar (cairo_get_target (cr),
                                             CAIRO_CONTENT_COLOR_ALPHA,
                                             w, h);

先创建两个外观 (surface)。
      first_cr = cairo_create (first);
      cairo_set_source_rgb (first_cr, 0, 0, 0.4);
      cairo_rectangle (first_cr, x, 20, 50, 50);
      cairo_fill (first_cr);

对第一个外观生成的一个 cairo 环境，并在其中创建一个矩形。
      cairo_set_operator (first_cr, op);
      cairo_set_source_surface (first_cr, second, 0, 0);
      cairo_paint (first_cr);

cairo_set_operator () 函数设置 first_cr 所容许的合成操作。cairo_set_source_surface () 函数基于 second 外观创建图案，并将其作为 first_cr 环境中的源。调用 cairo_paint () 函数显示最终合成结果（也就是输出到 cr 环境）。
      cairo_set_source_surface (cr, first, 0, 0);
      cairo_paint (cr);

最后，在 GTK+ 窗口上显示结果。
      cairo_operator_t oper[] = {
                CAIRO_OPERATOR_DEST_OVER,
                CAIRO_OPERATOR_DEST_IN,
                CAIRO_OPERATOR_OUT,
                CAIRO_OPERATOR_ADD,
                CAIRO_OPERATOR_ATOP,
                CAIRO_OPERATOR_DEST_ATOP,
      };

这就是传说中的那 6 种合成操作。
http://liyanrui.is-programmer.com/user_files/LiYanrui/Image/cairo/cairo-ex07-compos.png
原文地址：http://liyanrui.is-programmer.com/2009/3/20/cairo-tutorial-07.7760.html

查看完整版本: [转]Cairo 图形指南 (7) —— 合成