Cairo 图形指南 (11) —— 图像

在这一篇里，要讲述图像的处理。先是演示如何在 GTK+ 窗口中显示一幅图像，然后再制造一些特效。

在第一个例子里，显示了一幅图像。

01.

#

include

<cairo.h>

02.

#

include

<gtk/gtk.h>

03.

04.

cairo_surface_t *image;

05.

06.

static

gboolean

07.

on_expose_event(GtkWidget *widget,

08.

GdkEventExpose *event,

09.

gpointer data)

10.

{

11.

cairo_t *cr;

12.

13.

cr = gdk_cairo_create (widget->window);

14.

15.

cairo_set_source_surface(cr,image,

10

,

10

);

16.

cairo_paint(cr);

17.

18.

cairo_destroy(cr);

19.

20.

return

FALSE;

21.

}

22.

23.

24.

int

main(

int

argc,char *argv[])

25.

{

26.

GtkWidget *window;

27.

28.

image = cairo_image_surface_create_from_png(

"plaveckycastle.png"

);

29.

30.

gtk_init(&argc,&argv);

31.

32.

window = gtk_window_new(GTK_WINDOW_TOPLEVEL);

33.

34.

g_signal_connect(window,

"expose-event"

,

35.

G_CALLBACK (on_expose_event),NULL);

36.

g_signal_connect(window,

"destroy"

,

37.

G_CALLBACK (gtk_main_quit),NULL);

38.

39.

gtk_window_set_position(GTK_WINDOW(window),GTK_WIN_POS_CENTER);

40.

gtk_window_set_default_size(GTK_WINDOW(window),

320

,

250

);

41.

gtk_widget_set_app_paintable(window,TRUE);

42.

43.

gtk_widget_show_all(window);

44.

45.

gtk_main();

46.

47.

cairo_surface_destroy(image);

48.

49.

return

0

;

50.

}

这个示例显示了一幅图片，其尺寸为 300x225，可从这里

下载。这是斯洛伐克西部一个什么地方（Plavecke Podhradie）的中世纪城堡的废墟的一幅照片。

view source

print
?

1.

image = cairo_image_surface_create_from_png(

"plaveckycastle.png"

);

用一幅 png 图片来创建一份图像外观。出于效率的考虑，应在主函数中调用这个函数。

view source

print
?

1.

cairo_set_source_surface(cr,image,10,10);

基于前面构造的图像外观来创建源与外观，用于图像的绘制。

view source

print
?

1.

cairo_paint(cr);

绘制图片。

垂帘效果（Blind Down）

在下面的代码示例中，要垂帘显示图片，就像拉下窗帘的那种效果。

view source

print
?

01.

#include <cairo.h>

02.

#include <gtk/gtk.h>

03.

04.

05.

gboolean timer = TRUE;

06.

cairo_surface_t *image;

07.

08.

09.

static

gboolean

10.

on_expose_event(GtkWidget *widget,

11.

GdkEventExpose *event,

12.

gpointer data)

13.

{

14.

cairo_t *cr;

15.

cairo_t *ic;

16.

17.

cairo_surface_t *surface;

18.

19.

static

gdouble angle = 0;

20.

static

gint image_width = 0;

21.

static

gint image_height = 0;

22.

23.

static

gint w = 0;

24.

static

gint h = 0;

25.

26.

cr = gdk_cairo_create(widget->window);

27.

28.

gint width,height;

29.

gtk_window_get_size(GTK_WINDOW(widget),&width,&height);

30.

31.

image_width = cairo_image_surface_get_width(image);

32.

image_height = cairo_image_surface_get_height(image);

33.

w = image_width;

34.

35.

surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32,image_width,image_height);

36.

ic = cairo_create(surface);

37.

38.

cairo_rectangle(ic,0,0,w,h);

39.

cairo_fill(ic);

40.

41.

h += 1;

42.

if

( h == image_height) timer = FALSE;

43.

44.

cairo_set_source_surface(cr,image,10,10);

45.

cairo_mask_surface(cr,surface,10,10);

46.

47.

cairo_surface_destroy(surface);

48.

49.

cairo_destroy(cr);

50.

cairo_destroy(ic);

51.

return

FALSE;

52.

}

53.

54.

static

gboolean

55.

time_handler(GtkWidget *widget)

56.

{

57.

if

(widget->window == NULL)

return

FALSE;

58.

59.

if

(!timer)

return

FALSE;

60.

61.

gtk_widget_queue_draw(widget);

62.

return

TRUE;

63.

}

64.

65.

int

main(

int

argc,

char

*argv[])

66.

{

67.

GtkWidget *window;

68.

69.

image = cairo_image_surface_create_from_png(

"plaveckycastle.png"

);

70.

71.

gtk_init(&argc,&argv);

72.

73.

window = gtk_window_new(GTK_WINDOW_TOPLEVEL);

74.

75.

g_signal_connect(G_OBJECT(window),

"expose-event"

,

76.

G_CALLBACK(on_expose_event),NULL);

77.

g_signal_connect(G_OBJECT(window),

"destroy"

,

78.

G_CALLBACK(gtk_main_quit),NULL);

79.

80.

gtk_window_set_position(GTK_WINDOW(window),GTK_WIN_POS_CENTER);

81.

gtk_window_set_default_size(GTK_WINDOW(window),325,250);

82.

gtk_window_set_title(GTK_WINDOW(window),

"blind down"

);

83.

84.

gtk_widget_set_app_paintable(window,TRUE);

85.

g_timeout_add(15,(GSourceFunc) time_handler,(gpointer) window);

86.

87.

gtk_widget_show_all(window);

88.

89.

gtk_main();

90.

91.

cairo_surface_destroy(image);

92.

93.

return

0;

94.

}

这个垂帘效果幕后的思想相当简单。图片的高度是 h 个像素，则可对其逐行进行绘制，直至图片完全显示。

view source

print
?

1.

cairo_t *cr;

2.

cairo_t *ic;

声明两个 cairo 环境，一个与 GtkWindow 相关联，另一个与图片相关联。

view source

print
?

1.

surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32,image_width,image_height);

2.

ic = cairo_create(surface);

创建一个图像外观，并通过它构造那个与图像相关联的 cairo 环境。

view source

print
?

1.

cairo_rectangle(ic,0,0,w,h);

2.

cairo_fill(ic);

在初始的空图像中绘制一个矩形，它在循环显示中会增加 1 个像素的高度。采用这种方式创建的图像在后面要作为蒙板来用。

view source

print
?

1.

h += 1;

2.

if

( h == image_height) timer = FALSE;

整幅图像绘制完毕后，停止计时器。

view source

print
?

1.

cairo_set_source_surface(cr,image,10,10);

2.

cairo_mask_surface(cr,surface,10,10);

城堡图像被设置为要被绘制的源，并采用 surface 的 alpha 通道作为蒙板来绘制这个源。

光谱效果

将这种效果称为光谱效果，因为作者不知道怎么称呼才好（我感觉叫百叶窗效果更好）。可能你还记得从前的 ZX 光谱计算机，在这种计算机上载入图像时，它就逐渐的被显示出来，下面的示例大致是模仿这种方式。

view source

print
?

001.

#include <cairo.h>

002.

#include <gtk/gtk.h>

003.

004.

005.

gboolean timer = TRUE;

006.

cairo_surface_t *image;

007.

008.

static

gboolean

009.

on_expose_event(GtkWidget *widget,

010.

GdkEventExpose *event,

011.

gpointer data)

012.

{

013.

cairo_t *cr;

014.

cairo_t *ic;

015.

016.

cairo_surface_t *surface;

017.

018.

static

gdouble angle = 0;

019.

static

gint w = 0;

020.

static

gint h = 0;

021.

022.

static

gint image_width = 0;

023.

static

gint image_height = 0;

024.

025.

static

gint count = 0;

026.

027.

cr = gdk_cairo_create(widget->window);

028.

029.

gint width,height;

030.

gtk_window_get_size(GTK_WINDOW(widget),&width,&height);

031.

032.

surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32,image_width,image_height);

033.

034.

image_width = cairo_image_surface_get_width(image);

035.

image_height = cairo_image_surface_get_height(image);

036.

w = image_width;

037.

038.

ic = cairo_create(surface);

039.

040.

gint i,j;

041.

for

(i = 0; i <= image_height; i+=7) {

042.

for

(j=0 ; j < count; j++) {

043.

cairo_move_to(ic,0,i+j);

044.

cairo_line_to(ic,w,i+j);

045.

}

046.

}

047.

048.

count++;

049.

if

( count == 8) timer = FALSE;

050.

051.

cairo_stroke(ic);

052.

053.

cairo_set_source_surface(cr,image,10,10);

054.

cairo_mask_surface(cr,surface,10,10);

055.

056.

cairo_surface_destroy(surface);

057.

058.

cairo_destroy(cr);

059.

cairo_destroy(ic);

060.

return

FALSE;

061.

}

062.

063.

static

gboolean

064.

time_handler (GtkWidget *widget)

065.

{

066.

if

(widget->window == NULL)

return

FALSE;

067.

068.

if

(!timer)

return

FALSE;

069.

070.

gtk_widget_queue_draw(widget);

071.

return

TRUE;

072.

}

073.

074.

int

main(

int

argc,

char

*argv[])

075.

{

076.

GtkWidget *window;

077.

078.

image = cairo_image_surface_create_from_png(

"plaveckycastle.png"

);

079.

080.

gtk_init(&argc,&argv);

081.

082.

window = gtk_window_new(GTK_WINDOW_TOPLEVEL);

083.

084.

g_signal_connect(G_OBJECT(window),

"expose-event"

,

085.

G_CALLBACK(on_expose_event),NULL);

086.

g_signal_connect(G_OBJECT(window),

"destroy"

,

087.

G_CALLBACK(gtk_main_quit),NULL);

088.

089.

gtk_window_set_position(GTK_WINDOW(window),GTK_WIN_POS_CENTER);

090.

gtk_window_set_default_size(GTK_WINDOW(window),325,250);

091.

092.

gtk_widget_set_app_paintable(window,TRUE);

093.

g_timeout_add(400,(GSourceFunc) time_handler,(gpointer) window);

094.

095.

gtk_widget_show_all(window);

096.

097.

gtk_main();

098.

099.

cairo_surface_destroy(image);

100.

101.

return

0;

102.

}

这个示例的许多细节与上一个示例相似。这次，是将图像分为每 8 行为一个区域。在每次循环中，8 个部分中每个区域增加一个像素高度。通过这种方式创建的图像将再一次作为模板来显示城堡图像。

view source

print
?

1.

gint i,j;

2.

for

(i = 0; i <= image_height; i+=7) {

3.

for

(j=0 ; j < count; j++) {

4.

cairo_move_to(ic,0,i+j);

5.

cairo_line_to(ic,w,i+j);

6.

}

7.

}

这是该示例的主要逻辑，我们逐渐的将线绘制到各区域。