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 值（可实现淡出效果）。