Cairo 圖形指南 (2) —— 文本

本篇講述如何處理文本。

靈魂夥伴

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

#include <cairo.h>
#include <gtk/gtk.h>
 
staticgboolean
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);
 
  returnFALSE;
}
 
 
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();
 
  return0;
}

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

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_show_text() 函數顯示文本。

 

 

一個字接一個字……

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

#include <cairo.h>
#include <gtk/gtk.h>
 
gpointer text[7] = {"Z","e","t","C","o","d","e"};
gboolean timer = TRUE;
 
 
staticgboolean
on_expose_event(GtkWidget *widget,
    GdkEventExpose *event,
    gpointer data)
{
  cairo_t *cr;
  cairo_text_extents_t extents;
  staticgint 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 < count; 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);
 
  returnFALSE;
}
 
staticgboolean
time_handler (GtkWidget *widget)
{
  if(widget->window == NULL)returnFALSE;
 
  if(!timer)returnFALSE;
 
  gtk_widget_queue_draw(widget);
  returnTRUE;
}
 
 
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();
 
  return0;
}

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

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

構造一個字符數組。

cairo_select_font_face(cr,"Courier",

   CAIRO_FONT_SLANT_NORMAL,

   CAIRO_FONT_WEIGHT_BOLD);

將字體設置爲 Courier。

for (i = 0; i < count; 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 動畫裏經常見到。

#include <cairo.h>
#include <gtk/gtk.h>
 
 
gpointer text[7] = {"Z","e","t","C","o","d","e"};
gboolean timer = TRUE;
 
 
staticgboolean
on_expose_event(GtkWidget *widget,
    GdkEventExpose *event,
    gpointer data)
{
  cairo_t *cr;
  cairo_text_extents_t extents;
 
  staticgdouble alpha = 1.0;
  staticgdouble 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);
 
  returnFALSE;
}
 
staticgboolean
time_handler (GtkWidget *widget)
{
  if(widget->window == NULL)returnFALSE;
 
  if(!timer)returnFALSE;
 
  gtk_widget_queue_draw(widget);
 
  returnTRUE;
}
 
 
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();
 
  return0;
}

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

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

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

獲取窗口中心座標。

cairo_set_source_rgb(cr, 0.5, 0, 0);

cairo_paint(cr);

將背景設爲暗紅色。

size += 0.8;

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

if (size > 20) {

    alpha -= 0.01;

}

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

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);

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