「轉貼」Cairo 圖形指南 (10) —— 合成

合成 (Compositing) 可以將一些單獨的源 (source) 所生成可視元素組合成到單幅圖像中去，主要用於創建所有的可視元素作為同一場景的一部分這樣一種假象。合成在電影工業中被廣為使用，用於創建人群、不尋常 的世界等畫面，因為這樣的畫面在現實中的製作代價非常昂貴甚至難以實現。

Cairo 圖形庫提供了 14 種不同的合成操作。

#include
#include

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

---