「轉貼」Cairo 圖形指南 (13) —— 文本

本篇講述如何處理文本。

靈魂夥伴

第一個示例是在 GTK+ 窗口中顯示《靈魂夥伴》的部分歌詞。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

#include #include static gboolean on_expose_event(GtkWidget *widget, GdkEventExpose *event, gpointer data) { cairo_t *cr; cr = gdk_cairo_create(widget->window); cairo_set_source_rgb(cr, 0.1, 0.1, 0.1); cairo_select_font_face(cr, "Purisa", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD); cairo_set_font_size(cr, 13); cairo_move_to(cr, 20, 30); cairo_show_text(cr, "Most relationships seem so transitory"); cairo_move_to(cr, 20, 60); cairo_show_text(cr, "They're all good but not the permanent one"); cairo_move_to(cr, 20, 120); cairo_show_text(cr, "Who doesn't long for someone to hold"); cairo_move_to(cr, 20, 150); cairo_show_text(cr, "Who knows how to love you without being told"); cairo_move_to(cr, 20, 180); cairo_show_text(cr, "Somebody tell me why I'm on my own"); cairo_move_to(cr, 20, 210); cairo_show_text(cr, "If there's a soulmate for everyone"); 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), 420, 250); gtk_window_set_title(GTK_WINDOW(window), "Soulmate"); gtk_widget_set_app_paintable(window, TRUE); gtk_widget_show_all(window); gtk_main(); return 0; }

在這個示例中，顯示了 Natasha Bedingfield 的《靈魂夥伴》的部分歌詞。（在這裡，可以聽這首歌，很美妙）

?

1 2 3

cairo_select_font_face(cr, "Purisa", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD);

這裡設置字體。這個函數接受了三個字體參數的傳入，字體的名稱、樣式與輕重。

?

1	cairo_set_font_size(cr, 13);

這裡設定字號。

?

1 2	cairo_move_to(cr, 20, 30); cairo_show_text(cr, "Most relationships seem so transitory");

通過在窗口中指定位置並調用 cairo_show_text() 函數顯示文本。

一個字接一個字……

這種效果就是一個字一個字的顯示，這些字的繪製存有時間差。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

#include #include gpointer text[7] = { "Z", "e", "t", "C", "o", "d", "e" }; gboolean timer = TRUE; static gboolean on_expose_event(GtkWidget *widget, GdkEventExpose *event, gpointer data) { cairo_t *cr; cairo_text_extents_t extents; static gint count = 0; cr = gdk_cairo_create(widget->window); cairo_select_font_face(cr, "Courier", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD); cairo_set_font_size(cr, 35); cairo_set_source_rgb(cr, 0.2, 0.2, 0.2); gint i; gint x = 0; for (i = 0; i <> cairo_text_extents(cr, text[i], &extents); x += extents.width + 2; cairo_move_to(cr, x + 30, 50); cairo_show_text(cr, text[i]); } count++; if (count == 8) { timer = FALSE; count = 0; } cairo_destroy(cr); return FALSE; } static gboolean time_handler (GtkWidget *widget) { if (widget->window == NULL) return FALSE; if (!timer) return FALSE; gtk_widget_queue_draw(widget); return TRUE; } 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), 300, 90); gtk_window_set_title(GTK_WINDOW(window), "ZetCode"); gtk_widget_set_app_paintable(window, TRUE); g_timeout_add(1000, (GSourceFunc) time_handler, (gpointer) window); gtk_widget_show_all(window); gtk_main(); return 0; }

在這個示例中，我們在 GTK+ 窗口中畫了「ZetCode」這個字串，並讓逐個字母伴隨一定的時間差逐一顯示。

?

1	gpointer text[7] = { "Z", "e", "t", "C", "o", "d", "e" };

構造一個字符數組。

?

1 2 3

cairo_select_font_face(cr, "Courier", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD);

將字體設置為 Courier。

?

1 2 3 4 5 6

for (i = 0; i <> cairo_text_extents(cr, text[i], &extents); x += extents.width + 2; cairo_move_to(cr, x + 30, 50); cairo_show_text(cr, text[i]); }

開始逐個字的繪製。extents.width 給出了當前字符的寬度。

膨脹

下面這個示例中，我們製造了一種膨脹的效果。這個示例顯示了一串在膨脹的居中文本，並且伴有淡出現象。這是很常見的效果，在 flash 動畫裡經常見到。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

#include #include gpointer text[7] = { "Z", "e", "t", "C", "o", "d", "e" }; gboolean timer = TRUE; static gboolean on_expose_event(GtkWidget *widget, GdkEventExpose *event, gpointer data) { cairo_t *cr; cairo_text_extents_t extents; static gdouble alpha = 1.0; static gdouble size = 1; gint x = widget->allocation.width / 2; gint y = widget->allocation.height / 2; cr = gdk_cairo_create(widget->window); 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); size += 0.8; if (size > 20) { alpha -= 0.01; } cairo_set_font_size(cr, 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_stroke(cr); cairo_paint_with_alpha(cr, alpha); if (alpha <= 0) { timer = FALSE; } cairo_destroy(cr); return FALSE; } static gboolean time_handler (GtkWidget *widget) { if (widget->window == NULL) return FALSE; if (!timer) return FALSE; gtk_widget_queue_draw(widget); return TRUE; } 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), 350, 200); gtk_window_set_title(GTK_WINDOW(window), "puff"); gtk_widget_set_app_paintable(window, TRUE); g_timeout_add(14, (GSourceFunc) time_handler, (gpointer) window); gtk_widget_show_all(window); gtk_main(); return 0; }

這個示例在 GTK+ 窗口中製造了一種膨脹並且淡出的文本渲染效果。

?

1 2	gint x = widget->allocation.width / 2; gint y = widget->allocation.height / 2;

獲取窗口中心坐標。

?

1 2	cairo_set_source_rgb(cr, 0.5, 0, 0); cairo_paint(cr);

將背景設為暗紅色。

?

1	size += 0.8;

每輪循環，字號都增長 0.8 個單位。

?

1 2 3

if (size > 20) { alpha -= 0.01; }

當字號大於 20 的時候，就開始淡出。

?

1	cairo_text_extents(cr, "ZetCode", &extents);

獲取文本尺寸。

?

1	cairo_move_to(cr, x - extents.width/2, y);

根據文本尺寸來將文本定位在窗口的中心位置。

?

1 2	cairo_text_path(cr, "ZetCode"); cairo_clip(cr);

獲取文本的的路徑，並將其設為當前的裁剪域。

?

1 2	cairo_stroke(cr); cairo_paint_with_alpha(cr, alpha);

繪製當前的路徑，並為之添加 alpha 值（可實現淡出效果）。