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 种合成操作。

---