# 透明度 > 原文： [https://zetcode.com/gfx/cairo/transparency/](https://zetcode.com/gfx/cairo/transparency/) 在 Cairo C API 教程的這一部分中，我們將討論透明度。 我們將提供一些基本定義和兩個有趣的透明效果。 透明性是指能夠透視材料的質量。 了解透明度的最簡單方法是想象一塊玻璃或水。 從技術上講，光線可以穿過玻璃，這樣我們就可以看到玻璃后面的物體。 在計算機圖形學中，我們可以使用 alpha 合成實現透明效果。 Alpha 合成是將圖像與背景組合以創建部分透明外觀的過程。 合成過程使用 alpha 通道。 Alpha 通道是圖形文件格式的 8 位層，用于表達半透明性（透明度）。 每個像素的額外八位用作掩碼，表示 256 級半透明。 （answers.com，wikipedia.org） ## 透明矩形 第一個示例將繪制十個透明度不同的矩形。 ```c static void do_drawing(cairo_t *cr) { gint i; for ( i = 1; i <= 10; i++) { cairo_set_source_rgba(cr, 0, 0, 1, i*0.1); cairo_rectangle(cr, 50*i, 20, 40, 40); cairo_fill(cr); } } ``` `cairo_set_source_rgba()`具有可選的 alpha 參數以提供透明度。 此代碼創建十個矩形，其 alpha 值從 0.1 到 1。  圖：透明度 ## 泡芙效果 在以下示例中，我們創建一個粉撲效果。 該示例將顯示一個不斷增長的居中文本，該文本將從某個點逐漸淡出。 這是一個非常常見的效果，我們經常可以在 Flash 動畫中看到它。 `cairo_paint_with_alpha()`方法對于產生效果至關重要。 ```c #include <cairo.h> #include <gtk/gtk.h> void do_drawing(cairo_t *, GtkWidget *); struct { gboolean timer; gdouble alpha; gdouble size; } glob; static gboolean on_draw_event(GtkWidget *widget, cairo_t *cr, gpointer user_data) { do_drawing(cr, widget); return FALSE; } void do_drawing(cairo_t *cr, GtkWidget *widget) { cairo_text_extents_t extents; GtkWidget *win = gtk_widget_get_toplevel(widget); gint width, height; gtk_window_get_size(GTK_WINDOW(win), &width, &height); gint x = width/2; gint y = height/2; cairo_set_source_rgb(cr, 0.5, 0, 0); cairo_paint(cr); cairo_select_font_face(cr, "Courier", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD); glob.size += 0.8; if (glob.size > 20) { glob.alpha -= 0.01; } cairo_set_font_size(cr, glob.size); cairo_set_source_rgb(cr, 1, 1, 1); cairo_text_extents(cr, "ZetCode", &extents); cairo_move_to(cr, x - extents.width/2, y); cairo_text_path(cr, "ZetCode"); cairo_clip(cr); cairo_paint_with_alpha(cr, glob.alpha); if (glob.alpha <= 0) { glob.timer = FALSE; } } 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; glob.timer = TRUE; glob.alpha = 1.0; glob.size = 1.0; 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, 200); gtk_window_set_title(GTK_WINDOW(window), "Puff"); g_timeout_add(14, (GSourceFunc) time_handler, (gpointer) window); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 該示例在窗口上創建一個逐漸增長和褪色的文本。 ```c struct { gboolean timer; gdouble alpha; gdouble size; } glob; ``` 在這里，我們在結構內部定義了一些變量。 這用于避免使用全局變量。 ```c draw_text(cr, widget); ``` 文本的實際繪制委托給`draw_text()`函數。 ```c GtkWidget *win = gtk_widget_get_toplevel(widget); gint width, height; gtk_window_get_size(GTK_WINDOW(win), &width, &height); gint x = width/2; gint y = height/2; ``` 文本將在窗口上居中。 因此，我們需要找出父窗口小部件的大小。 ```c cairo_set_source_rgb(cr, 0.5, 0, 0); cairo_paint(cr); ``` 窗口的背景充滿了一些深紅色。 ```c cairo_select_font_face(cr, "Courier", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD); ``` 文本將以 Courier 粗體顯示。 ```c glob.size += 0.8; if (glob.size > 20) { glob.alpha -= 0.01; } ``` 文本大小增加了 0.8 個單位。 達到 20 個單位后，alpha 值開始減小。 文本逐漸消失。 ```c cairo_text_extents(cr, "ZetCode", &extents); cairo_move_to(cr, x - extents.width/2, y); ``` 我們得到了文本指標。 我們將僅使用文本寬度。 我們移動到文本將在窗口上居中的位置。 ```c cairo_text_path(cr, "ZetCode"); cairo_clip(cr); cairo_paint_with_alpha(cr, glob.alpha); ``` 我們使用`cairo_text_path()`方法獲得文本的路徑。 我們使用`cairo_clip()`方法將繪畫限制為當前路徑。 `cairo_paint_with_alpha()`方法使用 alpha 值的掩碼在當前剪裁區域內的任何地方繪制當前源。 ```c glob.timer = TRUE; glob.alpha = 1.0; glob.size = 1.0; ``` 我們初始化三個變量。 ```c static gboolean time_handler(GtkWidget *widget) { if (!glob.timer) return FALSE; gtk_widget_queue_draw(widget); return TRUE; } ``` `time_handler`調用的主要功能是定期重繪窗口。 當函數返回`FALSE`時，超時功能將停止工作。 ```c g_timeout_add(14, (GSourceFunc) time_handler, (gpointer) window); ``` 我們創建一個計時器函數。 該函數每 14 毫秒調用一次`time_handler`。  圖：粉撲效果 ## 等待演示 在此示例中，我們使用透明效果創建一個等待演示。 我們將繪制 8 條線，這些線將逐漸消失，從而產生一種錯覺，即一條線在移動。 此類效果通常用于通知用戶幕后正在進行繁重的任務。 一個示例是通過互聯網流式傳輸視頻。 ```c #include <cairo.h> #include <gtk/gtk.h> #include <math.h> static void do_drawing(cairo_t *, GtkWidget *); struct { gushort count; } 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 gdouble const trs[8][8] = { { 0.0, 0.15, 0.30, 0.5, 0.65, 0.80, 0.9, 1.0 }, { 1.0, 0.0, 0.15, 0.30, 0.5, 0.65, 0.8, 0.9 }, { 0.9, 1.0, 0.0, 0.15, 0.3, 0.5, 0.65, 0.8 }, { 0.8, 0.9, 1.0, 0.0, 0.15, 0.3, 0.5, 0.65}, { 0.65, 0.8, 0.9, 1.0, 0.0, 0.15, 0.3, 0.5 }, { 0.5, 0.65, 0.8, 0.9, 1.0, 0.0, 0.15, 0.3 }, { 0.3, 0.5, 0.65, 0.8, 0.9, 1.0, 0.0, 0.15 }, { 0.15, 0.3, 0.5, 0.65, 0.8, 0.9, 1.0, 0.0, } }; GtkWidget *win = gtk_widget_get_toplevel(widget); gint width, height; gtk_window_get_size(GTK_WINDOW(win), &width, &height); cairo_translate(cr, width/2, height/2); gint i = 0; for (i = 0; i < 8; i++) { cairo_set_line_width(cr, 3); cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND); cairo_set_source_rgba(cr, 0, 0, 0, trs[glob.count%8][i]); cairo_move_to(cr, 0.0, -10.0); cairo_line_to(cr, 0.0, -40.0); cairo_rotate(cr, M_PI/4); cairo_stroke(cr); } } static gboolean time_handler(GtkWidget *widget) { glob.count += 1; gtk_widget_queue_draw(widget); return TRUE; } int main(int argc, char *argv[]) { GtkWidget *window; GtkWidget *darea; glob.count = 0; 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), 250, 150); gtk_window_set_title(GTK_WINDOW(window), "Waiting demo"); g_timeout_add(100, (GSourceFunc) time_handler, (gpointer) window); gtk_widget_show_all(window); gtk_main(); return 0; } ``` 我們用八個不同的 alpha 值繪制八條線。 ```c static gdouble const trs[8][8] = { { 0.0, 0.15, 0.30, 0.5, 0.65, 0.80, 0.9, 1.0 }, { 1.0, 0.0, 0.15, 0.30, 0.5, 0.65, 0.8, 0.9 }, { 0.9, 1.0, 0.0, 0.15, 0.3, 0.5, 0.65, 0.8 }, { 0.8, 0.9, 1.0, 0.0, 0.15, 0.3, 0.5, 0.65}, { 0.65, 0.8, 0.9, 1.0, 0.0, 0.15, 0.3, 0.5 }, { 0.5, 0.65, 0.8, 0.9, 1.0, 0.0, 0.15, 0.3 }, { 0.3, 0.5, 0.65, 0.8, 0.9, 1.0, 0.0, 0.15 }, { 0.15, 0.3, 0.5, 0.65, 0.8, 0.9, 1.0, 0.0, } }; ``` 這是此演示中使用的透明度值的二維數組。 有 8 行，每行一種狀態。 8 行中的每行將連續使用這些值。 ```c cairo_set_line_width(cr, 3); cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND); ``` 我們使線條更粗一些，以便更好地顯示它們。 我們用帶帽的線畫線。 ```c cairo_set_source_rgba(cr, 0, 0, 0, trs[glob.count%8][i]); ``` 在這里，我們定義了一條線的透明度值。 ```c cairo_move_to(cr, 0.0, -10.0); cairo_line_to(cr, 0.0, -40.0); cairo_rotate(cr, M_PI/4); ``` 這些代碼將繪制八行中的每一行。 ```c g_timeout_add(100, (GSourceFunc) time_handler, (gpointer) window); ``` 我們使用計時器函數來創建動畫。  圖：等待 demo 在 Cairo 教程的這一部分中，我們介紹了透明度。