Cairo 圖形指南 (6) —— 透明

1、Cairo 圖形指南 (6) 透明這一篇講述有關透明的一些基本知識，并提供兩個有趣的透明效果。透明是透過某種材質的可見度。理解透明最簡單的方式就是想像一下玻璃或者水。從技術上講，光線可以穿過玻璃，因此我們可以看到玻璃之后的物體。在計算機圖形學中，可以使用alpha 混合方式來實現透明效果。Alpha 混合，是通過將圖像與背景組合實現部分透明的視覺效果。混合過程中使用了一種叫做 alpha 通道的東西。Alpha 通道在圖形文件格式中是一個 8 位的層，用于表示圖片的透明性。每個像素所包含的這個各額外的 8 位數字提供了一個蒙板，可以表達 256 個層次的透明度。透明的矩形第一個例子，

2、繪制了 10 個不同透明程度的矩形。#include <cairo.h>#include <gtk/gtk.h>static gbooleanon_expose_event (GtkWidget * widget,                 GdkEventExpose * event, gpointer data)        cairo_t *cr;        cr

3、= gdk_cairo_create (widget->window);        gint i;        for (i = 1; i <= 10; i+)                 cairo_set_source_rgba (cr, 0, 0, 1, i * 0.1);   

4、            cairo_rectangle (cr, 50 * i, 20, 40, 40);                cairo_fill (cr);                cairo_destroy (cr);      

5、0; return FALSE;intmain (int argc, char *argv)        GtkWidget *window;        gtk_init (&argc, &argv);        window = gtk_window_new (GTK_WINDOW_TOPLEVEL);        g_sign

6、al_connect (G_OBJECT (window), "expose-event",                          G_CALLBACK (on_expose_event), NULL);        g_signal_connect (G_OBJECT (window), "d

7、estroy",                          G_CALLBACK (gtk_main_quit), NULL);        gtk_window_set_position (GTK_WINDOW (window),                  &

8、#160;              GTK_WIN_POS_CENTER);        gtk_window_set_default_size (GTK_WINDOW (window), 590, 90);        gtk_window_set_title (GTK_WINDOW (window), "transparency"); 

9、      gtk_widget_set_app_paintable (window, TRUE);        gtk_widget_show_all (window);        gtk_main ();        return 0;cairo_set_source_rgba () 函數有一個可選的 alpha 參數，用于提供透明色支持。 gint i; 

10、;       for (i = 1; i <= 10; i+)                 cairo_set_source_rgba (cr, 0, 0, 1, i * 0.1);                cairo_rectangle (cr, 50 * i

11、, 20, 40, 40);                cairo_fill (cr);        這段代碼創(chuàng)建 10 個矩形，其 alpha 值從 0.1 遞增到 1。淡出的效果在下一個示例中，實現對一幅圖片的淡出處理。這幅圖片會逐漸變得越來越透明直至看不見。#include <cairo.h>#include <gtk/gtk.h>cairo_surface_t *image;static&

12、#160;gbooleanon_expose_event (GtkWidget * widget,                 GdkEventExpose * event, gpointer data)        cairo_t *cr;        cr = gdk_cairo_create (widget->window);       

13、0;static double alpha = 1;        double const delta = 0.01;        cairo_set_source_surface (cr, image, 10, 10);        cairo_paint_with_alpha (cr, alpha);        a

14、lpha -= delta;        if (alpha <= 0)                timer = FALSE;        cairo_destroy (cr);        return FALSE;static gbooleantime_handler (GtkWidge

15、t * widget)        if (widget->window = NULL)                return FALSE;        gtk_widget_queue_draw (widget);        return TRUE;intmain (int a

16、rgc, char *argv)        GtkWidget *window;        GtkWidget *darea;        gint width, height;        image = cairo_image_surface_create_from_png ("tuz.png");        width = c

17、airo_image_surface_get_width (image);        height = cairo_image_surface_get_height (image);        gtk_init (&argc, &argv);        window = gtk_window_new (GTK_WINDOW_TOPLEVEL);        darea

18、 = gtk_drawing_area_new ();        gtk_container_add (GTK_CONTAINER (window), darea);        g_signal_connect (darea, "expose-event",                         &#

19、160;G_CALLBACK (on_expose_event), NULL);        g_signal_connect (window, "destroy",                          G_CALLBACK (gtk_main_quit), NULL);       

20、; gtk_window_set_position (GTK_WINDOW (window),                                 GTK_WIN_POS_CENTER);        gtk_window_set_default_size (GTK_WINDOW (window), width + 20,&

21、#160;                                    height + 20);        gtk_window_set_title (GTK_WINDOW (window), "fade out");        g_timeout_add&#

22、160;(50, (GSourceFunc) time_handler,                       (gpointer) window);        gtk_widget_show_all (window);        gtk_main ();        cairo_s

23、urface_destroy (image);        return 0;在這一示例中，顯示了一幅漸漸淡出的圖片。所使用的圖片是 Linux kernel 的新 Logo，詳見 LinuxToy 網站的介紹。   image = cairo_image_surface_create_from_png ("tuz.png");出于對程序運行效率的考慮，圖像外觀的創(chuàng)建在主函數中進行。  cairo_set_source_surface 

24、;(cr, image, 10, 10);將載入的圖片設置為源 (source)。   cairo_paint_with_alpha (cr, alpha);調用函數 cairo_paint_with_alpha () 來實現圖片淡出效果，該函數使用透明度作為蒙板。       alpha -= delta;在每次響應 expose 事件的處理過程中，進行透明度的值遞減。 if (alpha <= 0)         

25、       alpha = 1;當透明度為 0 時，意味著圖片是完全透明的。這時，再將透明度置為 1，即將圖片復原為不透明狀態(tài)。這樣做的目的是讓圖片周而復始、痛不欲生的淡出著。  g_timeout_add (50, (GSourceFunc) time_handler, (gpointer) window);創(chuàng)建一個計時器，其回調函數為 time_handler ()，每隔 50ms 便會被調用一次。static gbooleantime_handler (GtkWidg

26、et * widget)        if (widget->window = NULL)                return FALSE;        gtk_widget_queue_draw (widget);        return TRUE;time_handler () 函數的實現，它

27、的主要作用是調用 gtk_widget_queue_draw () 函數，實現窗口的重繪 (發(fā)出 expose 事件)。當該函數返回值為 FALSE 時，計時器便停止工作。        if (widget->window = NULL)                return FALSE;這兩行代碼看上去有點多余。但是考慮在計時器的時間間隔很小的情況下 (譬如 5ms)，如果關閉窗口，這時進程尚未完全銷毀，不過窗

28、口已經被 destroy 了。這時，這兩行代碼可以防止計時器回調函數繼續(xù)工作而引起的程序崩潰?！暗却钡难菔鞠旅娴氖纠?，使用透明效果制作了一個“等待”狀態(tài)的演示，是通過繪制 8 條依次消隱淡出的線，模擬一條線的運動過程。像這樣的效果通常被用于通知用戶耐心地等待一個隱藏在屏幕之后漫長的任務的完成。在網上看視頻時，經?？梢钥吹筋愃频摹暗却?。#include <cairo.h>#include <gtk/gtk.h>#include <math.h>static gushort count = 0;static gbooleanon

29、_expose_event (GtkWidget * widget,                 GdkEventExpose * event, gpointer data)        cairo_t *cr;        cr = gdk_cairo_create (widget->window);        static g

30、double const trs88 =                 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,&#

31、160;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,  &

32、#160;             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,         

33、       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,               

34、 gint width, height;        gtk_window_get_size (GTK_WINDOW (widget), &width, &height);        cairo_translate (cr, width / 2, height / 2);        gint i = 0;        for (i

35、 = 0; i < 8; i+)                 cairo_set_line_width (cr, 3);                cairo_set_line_cap (cr, CAIRO_LINE_CAP_ROUND);                cairo_s

36、et_source_rgba (cr, 0, 0, 0, trscount % 8i);                cairo_move_to (cr, 0.0, -10.0);                cairo_line_to (cr, 0.0, -40.0);       

37、         cairo_rotate (cr, M_PI / 4);                cairo_stroke (cr);                cairo_destroy (cr);        return FALSE;static gboole

38、antime_handler (GtkWidget * widget)        count += 1;        gtk_widget_queue_draw (widget);        return TRUE;intmain (int argc, char *argv)        GtkWidget *window; 

39、       GtkWidget *darea;        gtk_init (&argc, &argv);        window = gtk_window_new (GTK_WINDOW_TOPLEVEL);        g_signal_connect (G_OBJECT (window), "expose-event",   

40、;                       G_CALLBACK (on_expose_event), NULL);        g_signal_connect (G_OBJECT (window), "destroy",                   

41、      G_CALLBACK (gtk_main_quit), NULL);        gtk_window_set_position (GTK_WINDOW (window),                                 GTK_WIN_POS_CENTER);  &#

42、160;     gtk_window_set_default_size (GTK_WINDOW (window), 250, 150);        gtk_window_set_title (GTK_WINDOW (window), "waiting demo");        gtk_widget_set_app_paintable (window, TRUE); 

43、      gtk_widget_show_all (window);        g_timeout_add (100, (GSourceFunc) time_handler,                       (gpointer) window);        gtk_main (

44、);        return 0; 方法比較笨，就是繪制 8 條不同透明度的線。        static gdouble const trs88 =                 0.0, 0.15, 0.30, 0.5, 0.65, 0.80, 0.9, 1

45、.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,