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

最新推荐文章于 2022-09-05 14:51:59 发布
最新推荐文章于 2022-09-05 14:51:59 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： gtk cairo 文章标签： 图形 gtk callback signal timer null
gtk 同时被 2 个专栏收录
21 篇文章 0 订阅
订阅专栏
cairo
19 篇文章 0 订阅
订阅专栏
本篇讲述如何处理文本。

灵魂伙伴

第一个示例是在 GTK+ 窗口中显示《灵魂伙伴》的部分歌词。

[html] view plain copy print ?
  1. #include <cairo.h>  
  2. #include <gtk/gtk.h>  
  3.    
  4. staticgboolean  
  5. on_expose_event(GtkWidget *widget,  
  6.     GdkEventExpose *event,  
  7.     gpointer data)  
  8. {  
  9.   cairo_t *cr;  
  10.    
  11.   cr = gdk_cairo_create(widget->window);  
  12.    
  13.   cairo_set_source_rgb(cr, 0.1, 0.1, 0.1);  
  14.    
  15.   cairo_select_font_face(cr,"Purisa",  
  16.       CAIRO_FONT_SLANT_NORMAL,  
  17.       CAIRO_FONT_WEIGHT_BOLD);  
  18.    
  19.   cairo_set_font_size(cr, 13);  
  20.    
  21.   cairo_move_to(cr, 20, 30);  
  22.   cairo_show_text(cr,"Most relationships seem so transitory");   
  23.   cairo_move_to(cr, 20, 60);  
  24.   cairo_show_text(cr,"They're all good but not the permanent one");  
  25.    
  26.   cairo_move_to(cr, 20, 120);  
  27.   cairo_show_text(cr,"Who doesn't long for someone to hold");  
  28.    
  29.   cairo_move_to(cr, 20, 150);  
  30.   cairo_show_text(cr,"Who knows how to love you without being told");  
  31.   cairo_move_to(cr, 20, 180);  
  32.   cairo_show_text(cr,"Somebody tell me why I'm on my own");  
  33.   cairo_move_to(cr, 20, 210);  
  34.   cairo_show_text(cr,"If there's a soulmate for everyone");  
  35.    
  36.   cairo_destroy(cr);  
  37.    
  38.   returnFALSE;  
  39. }  
  40.    
  41.    
  42. int main (int argc,char*argv[])  
  43. {  
  44.   GtkWidget *window;  
  45.    
  46.   gtk_init(&argc, &argv);  
  47.    
  48.   window = gtk_window_new(GTK_WINDOW_TOPLEVEL);  
  49.    
  50.   g_signal_connect(window,"expose-event",  
  51.       G_CALLBACK(on_expose_event), NULL);  
  52.   g_signal_connect(window,"destroy",  
  53.       G_CALLBACK(gtk_main_quit), NULL);  
  54.    
  55.   gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);  
  56.   gtk_window_set_default_size(GTK_WINDOW(window), 420, 250);  
  57.   gtk_window_set_title(GTK_WINDOW(window),"Soulmate");  
  58.   gtk_widget_set_app_paintable(window, TRUE);  
  59.    
  60.   gtk_widget_show_all(window);  
  61.    
  62.   gtk_main();  
  63.    
  64.   return0;  
  65. }  

在这个示例中，显示了 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() 函数显示文本。

 

 

一个字接一个字……

这种效果就是一个字一个字的显示，这些字的绘制存有时间差。


[html] view plain copy print ?
  1. #include <cairo.h>  
  2. #include <gtk/gtk.h>  
  3.    
  4. gpointer text[7] = {"Z","e","t","C","o","d","e"};  
  5. gboolean timer = TRUE;  
  6.    
  7.    
  8. staticgboolean  
  9. on_expose_event(GtkWidget *widget,  
  10.     GdkEventExpose *event,  
  11.     gpointer data)  
  12. {  
  13.   cairo_t *cr;  
  14.   cairo_text_extents_t extents;  
  15.   staticgint count = 0;  
  16.    
  17.   cr = gdk_cairo_create(widget->window);  
  18.    
  19.   cairo_select_font_face(cr,"Courier",  
  20.       CAIRO_FONT_SLANT_NORMAL,  
  21.       CAIRO_FONT_WEIGHT_BOLD);  
  22.    
  23.   cairo_set_font_size(cr, 35);   
  24.   cairo_set_source_rgb(cr, 0.2, 0.2, 0.2);  
  25.    
  26.   gint i;  
  27.   gint x = 0;  
  28.    
  29.   for(i = 0; i < count; i++) {  
  30.       cairo_text_extents(cr, text[i], &extents);  
  31.       x += extents.width + 2;  
  32.       cairo_move_to(cr, x + 30, 50);  
  33.       cairo_show_text(cr, text[i]);   
  34.   }  
  35.    
  36.   count++;  
  37.    
  38.   if(count == 8) {  
  39.       timer = FALSE;  
  40.       count = 0;  
  41.   }  
  42.    
  43.   cairo_destroy(cr);  
  44.    
  45.   returnFALSE;  
  46. }  
  47.    
  48. staticgboolean  
  49. time_handler (GtkWidget *widget)  
  50. {  
  51.   if(widget->window == NULL)returnFALSE;  
  52.    
  53.   if(!timer)returnFALSE;  
  54.    
  55.   gtk_widget_queue_draw(widget);  
  56.   returnTRUE;  
  57. }  
  58.    
  59.    
  60. int main (int argc,char*argv[])  
  61. {  
  62.   GtkWidget *window;  
  63.    
  64.   gtk_init(&argc, &argv);  
  65.    
  66.   window = gtk_window_new(GTK_WINDOW_TOPLEVEL);  
  67.    
  68.   g_signal_connect(window,"expose-event",  
  69.       G_CALLBACK(on_expose_event), NULL);  
  70.   g_signal_connect(window,"destroy",  
  71.       G_CALLBACK(gtk_main_quit), NULL);  
  72.    
  73.   gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);  
  74.   gtk_window_set_default_size(GTK_WINDOW(window), 300, 90);  
  75.   gtk_window_set_title(GTK_WINDOW(window),"ZetCode");  
  76.   gtk_widget_set_app_paintable(window, TRUE);  
  77.    
  78.   g_timeout_add(1000, (GSourceFunc) time_handler, (gpointer) window);  
  79.    
  80.   gtk_widget_show_all(window);  
  81.    
  82.    
  83.   gtk_main();  
  84.    
  85.   return0;  
  86. }  


在这个示例中，我们在 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 动画里经常见到。


[html] view plain copy print ?
  1. #include <cairo.h>  
  2. #include <gtk/gtk.h>  
  3.    
  4.    
  5. gpointer text[7] = {"Z","e","t","C","o","d","e"};  
  6. gboolean timer = TRUE;  
  7.    
  8.    
  9. staticgboolean  
  10. on_expose_event(GtkWidget *widget,  
  11.     GdkEventExpose *event,  
  12.     gpointer data)  
  13. {  
  14.   cairo_t *cr;  
  15.   cairo_text_extents_t extents;  
  16.    
  17.   staticgdouble alpha = 1.0;  
  18.   staticgdouble size = 1;  
  19.    
  20.    
  21.   gint x = widget->allocation.width / 2;  
  22.   gint y = widget->allocation.height / 2;  
  23.    
  24.   cr = gdk_cairo_create(widget->window);  
  25.    
  26.   cairo_set_source_rgb(cr, 0.5, 0, 0);  
  27.   cairo_paint(cr);  
  28.    
  29.   cairo_select_font_face(cr,"Courier",  
  30.       CAIRO_FONT_SLANT_NORMAL,  
  31.       CAIRO_FONT_WEIGHT_BOLD);  
  32.    
  33.   size += 0.8;  
  34.    
  35.   if(size > 20) {  
  36.       alpha -= 0.01;  
  37.   }  
  38.    
  39.   cairo_set_font_size(cr, size);  
  40.    
  41.   cairo_set_source_rgb(cr, 1, 1, 1);  
  42.    
  43.   cairo_text_extents(cr,"ZetCode", &extents);  
  44.   cairo_move_to(cr, x - extents.width/2, y);  
  45.   cairo_text_path(cr,"ZetCode");  
  46.   cairo_clip(cr);  
  47.   cairo_stroke(cr);  
  48.   cairo_paint_with_alpha(cr, alpha);  
  49.    
  50.   if(alpha <= 0) {  
  51.       timer = FALSE;  
  52.   }  
  53.    
  54.   cairo_destroy(cr);  
  55.    
  56.   returnFALSE;  
  57. }  
  58.    
  59. staticgboolean  
  60. time_handler (GtkWidget *widget)  
  61. {  
  62.   if(widget->window == NULL)returnFALSE;  
  63.    
  64.   if(!timer)returnFALSE;  
  65.    
  66.   gtk_widget_queue_draw(widget);  
  67.    
  68.   returnTRUE;  
  69. }  
  70.    
  71.    
  72. int main (int argc,char*argv[])  
  73. {  
  74.   GtkWidget *window;  
  75.    
  76.   gtk_init(&argc, &argv);  
  77.    
  78.   window = gtk_window_new(GTK_WINDOW_TOPLEVEL);  
  79.    
  80.   g_signal_connect(window,"expose-event",  
  81.       G_CALLBACK(on_expose_event), NULL);  
  82.   g_signal_connect(window,"destroy",  
  83.       G_CALLBACK(gtk_main_quit), NULL);  
  84.    
  85.   gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);  
  86.   gtk_window_set_default_size(GTK_WINDOW(window), 350, 200);  
  87.   gtk_window_set_title(GTK_WINDOW(window),"puff");  
  88.   gtk_widget_set_app_paintable(window, TRUE);  
  89.    
  90.   g_timeout_add(14, (GSourceFunc) time_handler, (gpointer) window);  
  91.    
  92.   gtk_widget_show_all(window);  
  93.    
  94.   gtk_main();  
  95.    
  96.   return0;  
  97. }  


这个示例在 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 值（可实现淡出效果）。


转自    http://blog.csdn.net/haiwil/article/details/6771755


intruder83
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cairo显示多行文本
lxbin2003的专栏
05-05 742
在使用 cairo 绘制文本时，发现它不能绘制多行文本，搜索到官网[cairo] automatic multi-line text?，它说需要使用Pango库，这就痛苦了。 于是研究了一下cairo源码，自己实现了一下。附上函数： #define HAVE_STDINT_H 1 #define HAVE_CONFIG_H 1 #include "cairo/cairo-private.h" #include "cairo/cairo-compiler-private.h" #include "...
Cairo图形指南
02-27
cairo比较完整的教学资料，看完可以掌握基本了。内含大量的样例代码，附以注解，易懂
Cairo 图形指南 (10) —— 文本
simiaoxiaoseng
04-30 1415
本篇讲述如何处理文本。第一个示例是在 GTK+ 窗口中显示《灵魂伙伴》的部分歌词。01.#include 02.#include 03. 04. 05.static gboolean06.on_expose_event(GtkWidget *wid
使用cairo和freetype进行字体布局和渲染
Zhongjiaxiang_hi的专栏
09-05 799
cairo，渲染
cairo官方教程cairo绘图模型
05-08
本教程是cairo官方教程的中文版，深刻详细的解释了cairo绘图模型，给人一种非常形象的认识。如果学习cairo绘图，这是一个必不可少的资料
使用cairo绘制图形的部分函数总结
xingzouagain的博客
09-11 3747
一 绘制文本 [cpp] view plain copy //设置源的颜色   cairo_set_source_rgb(cr,0.627,0,0);   //选择字体类型或尺寸   cairo_select_font_face(cr,"Adobe Heiti Std",CAIRO_FONT_SLANT_NORMAL,CAIRO_FONT_
cairo多平台2D图形库.rar
05-23
cairo多平台2D图形库，C++ 2D图形库 Cairo是2D图形库，支持多种输出 设备。当前支持的输出目标包括X窗口 系统（通过Xlib和XCB），石英，win32和图像缓冲区， 以及PDF，PostScript和SVG文件输出。实验后端 包括OpenGL...
利用C语言的Cairo图形库绘制太极图实例教程
08-31
标题中的“利用C语言的Cairo图形库绘制太极图实例教程”表明了本文将通过C语言，使用Cairo图形库来实现太极图的绘制。Cairo是一个强大的2D图形库，它提供了丰富的功能，适用于多种操作系统和输出设备，如X Window、...
Cairo_1.5-3.zip
07-22
4. **高级图形操作**：Cairo提供了丰富的API，用于绘制线条、曲线、矩形、圆形、文本、图像以及复杂的路径操作。它还支持抗锯齿渲染、透明度和混合模式，使得图形效果更加专业。 5. **文本渲染**：Cairo支持多种...
vc2105编译cairo图形库说明以及vc工程文件
03-01
在IT行业中，图形库是开发可视化应用不可或缺的部分，Cairo是一个跨平台的2D图形库，广泛用于创建高质量的图像输出。本篇文章将详细介绍如何在Visual Studio 2015 (vc2105)环境下编译Cairo图形库，并使用提供的项目...
[转载]Cairo 图形指南[转载]
maze的专栏
06-08 2792
欢迎阅读 Cairo 绘图指南，这份指南会向你讲述 Cairo 二维矢量绘图库的基本知识以及一些高级问题。指南中的示例采用 C 语言实现，其中大部分使用了 GTK+ 库。 二维矢量图形 计算机图形可分为两类，矢量图形与光栅图形。光栅图形是将图像表示为像素点集。矢量图形则是使用一些几何图元（点、直线、曲线、多边形等）表示图像，这些图元是使用数学公式生成的。 这两类计算机图形表达方式各有所长短。相较于光栅图形，矢量图形存在以下优越性： 图形文件更小 可任意缩放 平移、缩放、填充或旋转等图形变换...
cairo裁剪使用分析
sl8023dxf的专栏
05-22 1121
cairo_arc (cr, 128.0, 128.0, 76.8, 0, 2 * M_PI); cairo_clip (cr); cairo_new_path (cr); /* current path is not consumed by cairo_clip() */ cairo_rectangle (cr, 0, 0, 256, 256); cairo_fill (cr); 一步一步分析： 1、cairo_arc其实只是在cairo_t里面.
用 cairo 实现跨平台图形
编程资料大全
01-31 441
用 cairo 实现跨平台图形 用于产生一致输出的矢量绘图库 级别： 中级 cairo 的目标是以跨平台的方式在打印机和屏幕上产生相同的输出，它正在成为 Linux® 图形领域的重要...
Cairo 图形指南 (8) —— 裁剪与遮蔽
simiaoxiaoseng
04-30 1212
在这一篇中讲述裁剪（Clipping）与遮蔽（Masking）。在下面的示例中，对一幅图像进行裁剪。01.#include 02.#include 03.#include 04. 05.cairo_surface_t *image;06. 07
3.Cairo图表库--绘图后端
混沌世界
04-12 3532
绘图后端Cairo支持不同的绘图后端。本节里，我们用Cairo创建一个PNG图形，PDF文件，SVG文件，在一个GTK窗口上绘图。PNG图形第一个例子里，我们会创建一个PNG图形#include int main ( int argc, char *argv[] ) { cairo_surface_t *surface; cairo_t *cr; surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 390, 60 ); cr =
Cairo图形指南（3）
shenbin1430的专栏
09-22 3613
Cairo 后端Cairo 支持多种后端，本文基于几个示例讲述如何使用 Cairo 各种后端创建 PNG 图像、PDF 文件与 SVG 文件以及如何使用 Cairo 在 GTK 窗口中绘图。1. PNG 图像第一个示例 (example-1.c) 用于生成 PNG 图像。#include intmain (int argc, char *ar
cairo简单使用指南
sinat_28502203的博客
05-26 2779
git clone ssh://rocket.he@165.213.149.219:29418/magnolia/framework/graphics/chart-demo cairo cairo.h 1. 画圆弧 cairo_public void cairo_arc (cairo_t *cr,            double xc, double yc,
cairo图形指南下载
最新发布
10-01
要下载Cairo图形指南，首先需要找到可靠的来源。Cairo是一个跨平台的开源图形库，用于绘制2D向量图形。在进行下载前，可以先到Cairo官方网站（https://cairographics.org/）浏览相关信息。 在官方网站上找到"Downloads"或者"获取"的选项，点击进入下载页面。通常，下载页面会列出各种版本的Cairo图形指南可供选择。选择适合自己操作系统的版本，例如Windows、Linux或者macOS。 根据自己的操作系统，点击相应的下载链接，等待下载完成。一般来说，Cairo图形指南的下载文件以压缩包的形式提供，可以是zip文件、tar.gz文件等。如果下载的是压缩文件，需要先解压缩，可以使用系统自带的解压软件或者第三方解压工具。 解压缩完成后，就可以开始阅读Cairo图形指南了。Cairo图形指南通常以PDF、HTML或者文本格式提供，可以根据个人的喜好选择合适的格式进行阅读。可以使用电脑自带的PDF阅读器、文本编辑器等工具进行查看。 在阅读Cairo图形指南时，可以了解Cairo的基本概念、使用方法和相关的示例代码。图形指南会提供详细的说明和实例，以帮助读者更好地理解和应用Cairo图形库。 总之，要下载Cairo图形指南，需要先访问Cairo官方网站，找到适合自己操作系统的版本，下载并解压缩文件，最后选择合适的格式进行阅读。通过学习Cairo图形指南，可以更好地利用Cairo开发出高质量的2D图形应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值