Cairo 文字 · ZetCode 中文系列教程

# Cairo 文字 > 原文： [https://zetcode.com/gfx/cairo/cairotext/](https://zetcode.com/gfx/cairo/cairotext/) 在 Cairo 圖形教程的這一部分中，我們將處理文本。 ## 靈魂伴侶在第一個示例中，我們將在 GTK+ 窗口上顯示一些歌詞。 ```c static void do_drawing(cairo_t *cr) { 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"); } ``` 在此示例中，我們顯示了 Natasha Bedingfield 的 Soulmate 歌曲的部分歌詞。 ```c cairo_select_font_face(cr, "Purisa", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD); ``` 在這里，我們選擇字體。該函數采用三個參數，字體系列，字體傾斜度和字體粗細。 ```c cairo_set_font_size(cr, 13); ``` 在這里，我們指定字體大小。 ```c cairo_move_to(cr, 20, 30); cairo_show_text(cr, "Most relationships seem so transitory"); ``` 通過指定文本的位置并調用`cairo_show_text()`函數，可以在窗口上顯示文本。 ![Soulmate](https://img.kancloud.cn/1b/d1/1bd1cf69487c74c2ca58a7b8fe04b109_422x276.jpg) 圖：靈魂伴侶 ## 居中文字接下來，我們將展示如何在窗口上居中放置文本。 ```c static void do_drawing(cairo_t *cr, GtkWidget *widget) { cairo_text_extents_t extents; GtkWidget *win = gtk_widget_get_toplevel(widget); gint w, h; gtk_window_get_size(GTK_WINDOW(win), &w, &h); cairo_select_font_face(cr, "Courier", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD); cairo_set_font_size(cr, 60); cairo_text_extents(cr, "ZetCode", &extents); cairo_move_to(cr, w/2 - extents.width/2, h/2); cairo_show_text(cr, "ZetCode"); } ``` 該代碼將使文本在窗口上居中。即使我們調整窗口大小，它仍然居中。 ```c GtkWidget *win = gtk_widget_get_toplevel(widget); gint w, h; gtk_window_get_size(GTK_WINDOW(win), &w, &h); ``` 為了使文本在窗口上居中，有必要獲取父窗口的大小。 ```c cairo_select_font_face(cr, "Courier", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD); cairo_set_font_size(cr, 60); ``` 我們選擇要顯示的字體及其大小。 ```c cairo_text_extents(cr, "ZetCode", &extents); ``` 我們得到了文本范圍。這些是描述文字的數字。我們的示例需要文本的寬度。 ```c cairo_move_to(cr, w/2 - extents.width/2, h/2); cairo_show_text(cr, "ZetCode"); ``` 我們將文本放置在窗口的中間，并使用`cairo_show_text()`方法顯示它。 ![Centered text](https://img.kancloud.cn/b4/71/b4717d39821221a0fb6e315a4bd6fa84_352x276.jpg) 圖：居中文本 ## 帶陰影的文字現在，我們將在窗口上顯示陰影文本。 ```c static void do_drawing(cairo_t *cr, GtkWidget *widget) { cairo_select_font_face(cr, "Serif", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD); cairo_set_font_size(cr, 50); cairo_set_source_rgb(cr, 0, 0, 0); cairo_move_to(cr, 40, 60); cairo_show_text(cr, "ZetCode"); cairo_set_source_rgb(cr, 0.5, 0.5, 0.5); cairo_move_to(cr, 43, 63); cairo_show_text(cr, "ZetCode"); } ``` 要創建陰影，我們將文本繪制兩次。以不同的顏色。第二個文本向右和向下移動一點。 ```c cairo_set_source_rgb(cr, 0, 0, 0); cairo_move_to(cr, 40, 60); cairo_show_text(cr, "ZetCode"); ``` 第一個文本用黑色墨水繪制。它充當陰影。 ```c cairo_set_source_rgb(cr, 0.5, 0.5, 0.5); cairo_move_to(cr, 43, 63); cairo_show_text(cr, "ZetCode"); ``` 第二個文本用灰色墨水繪制。它向右和向下移動了 3px。 ![Shaded text](https://img.kancloud.cn/ae/54/ae543081a3c728ee9a78d7928cae7738_352x276.jpg) 圖：陰影文本 ## 漸變填充文本以下示例將產生很好的效果。我們將使用一些線性漸變填充文本。 ```c static void do_drawing(cairo_t *cr, GtkWidget *widget) { cairo_pattern_t *pat; cairo_set_source_rgb(cr, 0.2, 0.2, 0.2); cairo_paint(cr); gint h = 90; cairo_select_font_face(cr, "Serif", CAIRO_FONT_SLANT_ITALIC, CAIRO_FONT_WEIGHT_BOLD); cairo_set_font_size(cr, h); pat = cairo_pattern_create_linear(0, 15, 0, h*0.8); cairo_pattern_set_extend(pat, CAIRO_EXTEND_REPEAT); cairo_pattern_add_color_stop_rgb(pat, 0.0, 1, 0.6, 0); cairo_pattern_add_color_stop_rgb(pat, 0.5, 1, 0.3, 0); cairo_move_to(cr, 15, 80); cairo_text_path(cr, "ZetCode"); cairo_set_source(cr, pat); cairo_fill(cr); } ``` 我們在充滿線性漸變的窗口上繪制文本。顏色是一些橙色。 ```c cairo_set_source_rgb(cr, 0.2, 0.2, 0.2); cairo_paint(cr); ``` 為了使其更具視覺吸引力，我們將背景涂成深灰色。 ```c pat = cairo_pattern_create_linear(0, 15, 0, h*0.8); cairo_pattern_set_extend(pat, CAIRO_EXTEND_REPEAT); cairo_pattern_add_color_stop_rgb(pat, 0.0, 1, 0.6, 0); cairo_pattern_add_color_stop_rgb(pat, 0.5, 1, 0.3, 0); ``` 將創建線性漸變。 ```c cairo_move_to(cr, 15, 80); cairo_text_path(cr, "ZetCode"); cairo_set_source(cr, pat); cairo_fill(cr); ``` 文本顯示在窗口上。我們使用漸變作為繪畫源。 ![Text filled with gradient](https://img.kancloud.cn/4e/7a/4e7a2088c8f5df1d235d87bb5d4d94a2_402x186.jpg) 圖：用漸變填充的文本 ## 字形 `cairo_show_text()`方法僅適用于簡單的文本呈現。 Cairo 開發者將其稱為玩具方法。使用字形可以完成更專業的文本渲染。標志符號是圖形符號，可提供字符形式。字符提供含義。它可以有多個字形。角色沒有內在的外觀。字形沒有內在的含義。請注意，Pango 庫解決了許多常見的編程要求，包括文本。 ```c static void do_drawing(cairo_t *cr, GtkWidget *widget) { cairo_select_font_face(cr, "Serif", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_NORMAL); cairo_set_font_size(cr, 13); const int n_glyphs = 20 * 35; cairo_glyph_t glyphs[n_glyphs]; gint i = 0; gint x, y; for (y=0; y<20; y++) { for (x=0; x<35; x++) { glyphs[i] = (cairo_glyph_t) {i, x*15 + 20, y*18 + 20}; i++; } } cairo_show_glyphs(cr, glyphs, n_glyphs); } ``` 該代碼顯示了所選字體的 700 個字形。 ```c const int n_glyphs = 20 * 35; cairo_glyph_t glyphs[n_glyphs]; ``` 字形數組將存儲三個整數值。第一個值是字形到所選字體類型的索引。第二和第三值是字形的 x，y 位置。 ```c cairo_show_glyphs(cr, glyphs, n_glyphs); ``` `cairo_show_glyphs()`方法在窗口上顯示字形。本章介紹了 Cairo 文本。