GTK+中文社区(gtk.awaysoft.com)

 找回密码
 马上加入

QQ登录

只需一步,快速开始

查看: 4444|回复: 1

[转]Cairo 图形指南 (3) —— Cairo 后端

[复制链接]
  • TA的每日心情
    奋斗
    2021-11-19 13:15
  • 签到天数: 20 天

    连续签到: 1 天

    [LV.4]偶尔看看III

    发表于 2011-2-3 01:59:15 | 显示全部楼层 |阅读模式
    Cairo 支持多种后端,本文基于几个示例讲述如何使用 Cairo 各种后端创建 PNG 图像、PDF 文件与 SVG 文件以及如何使用 Cairo 在 GTK 窗口中绘图。
    1. PNG 图像
    第一个示例 (example-1.c) 用于生成 PNG 图像。
    #include <cairo.h>

    int
    main (int argc, char *argv[])
    {
            cairo_surface_t *surface;
            cairo_t *cr;

            surface =
                cairo_image_surface_create (CAIRO_FORMAT_ARGB32, 320, 48);
            cr = cairo_create (surface);

            cairo_set_source_rgb (cr, 0.627, 0, 0);
            cairo_select_font_face (cr, "Adobe Heiti Std",
                                    CAIRO_FONT_SLANT_NORMAL,
                                    CAIRO_FONT_WEIGHT_NORMAL);
            cairo_set_font_size (cr, 24.0);

            cairo_move_to (cr, 10.0, 34.0);
            cairo_show_text (cr, "我是中国人,我爱我的祖国。");

            cairo_surface_write_to_png (surface, "image.png");

            cairo_destroy (cr);
            cairo_surface_destroy (surface);

            return 0;
    }


    这个示例是一个很小的控制台程序,运行后可生成一份 PNG 图像文件。
    #include <cairo.h>

    上述头文件声明了上面示例中调用的函数以及一些常量的定义。
    cairo_surface_t *surface;
    cairo_t *cr;


      
    这两行代码声明了一个 Cairo 外观与一个 Cairo 环境。
      
    surface = cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 320, 48);
    cr = cairo_create(surface);


    现在我们生成了 Cairo 外观与 Cairo 环境,所生成的外观是一份 320x48 px 的图像。
      
    cairo_set_source_rgb (cr, 0.627, 0, 0);

    设置源的颜色为 darkred,就好比是选择了暗红色的颜料。
      
    cairo_select_font_face(cr, "Adobe Heiti Std", CAIRO_FONT_SLANT_NORMAL,
          CAIRO_FONT_WEIGHT_NORMAL);
    cairo_set_font_size(cr, 24.0);


    选择字体类型并设置其尺寸。(注:可使用 "fc-list" 命令查看系统所安装字体)
      
    cairo_move_to(cr, 10.0, 34.0);
    cairo_show_text(cr, "我是中国人,我爱我的祖国。");


    将“画笔”移动到图像区域的 (10.0, 34.0) 位置开始绘制文本。
      
    cairo_surface_write_to_png(surface, "image.png");

    这个函数创建 PNG 图像。
      
    cairo_destroy(cr);
    cairo_surface_destroy(surface);


    最后,回收所有 Cairo 环境与外观所占用的内存资源。
    编译这个示例:
    $ gcc -o example-1 `pkg-config --cflags --libs gtk+-2.0` example-1.c

    生成的 PNG 图像如下图所示:

    2. PDF 文件
    在第二个示例 (example-2.c) 中,将使用 Cairo 生成一份 PDF 文件,其内容与第一个示例所生成的图像是相同的。
    #include <cairo.h>
    #include <cairo-pdf.h>

    int
    main (int argc, char *argv[])
    {
            cairo_surface_t *surface;
            cairo_t *cr;

            surface = cairo_pdf_surface_create ("pdffile.pdf", 320, 48);
            cr = cairo_create (surface);

            cairo_set_source_rgb (cr, 0.627, 0, 0);
            cairo_select_font_face (cr, "Adobe Heiti Std",
                                    CAIRO_FONT_SLANT_NORMAL,
                                    CAIRO_FONT_WEIGHT_NORMAL);
            cairo_set_font_size (cr, 24.0);

            cairo_move_to (cr, 10.0, 34.0);
            cairo_show_text (cr, "我是中国人,我爱我的祖国。");

            cairo_show_page (cr);

            cairo_destroy (cr);
            cairo_surface_destroy (surface);

            return 0;
    }


    编译这个示例:
    $ gcc -o example-2 `pkg-config --cflags --libs gtk+-2.0` example-2.c

    生成的 PDF 文件,请使用 PDF 阅读器查看,Linux 用户可使用 Evince 或 KPDF。
    surface = cairo_pdf_surface_create ("pdffile.pdf", 320, 48);

    要生成 pdf 文件,必须使用 cairo_pdf_surface () 函数创建一个 pdf 外观。pdf 文件的页面大小是以排版标准中的像素点尺寸为单位控制的。
    cairo_show_page(cr);

    生成的 PDF 文档在 Evince 中显示效果如下图所示:

    3. SVG 文件
    第三个示例演示如何使用 Cairo SVG 后端生成一份简单的 SVG (Scalble Vector Graphics) 文件。SVG 技术近几年很热门。
    #include <cairo.h>
    #include <cairo-svg.h>

    int
    main (int argc, char *argv[])
    {
            cairo_surface_t *surface;
            cairo_t *cr;

            surface = cairo_svg_surface_create ("svgfile.svg", 320, 48);
            cr = cairo_create (surface);

            cairo_set_source_rgb (cr, 0.627, 0, 0);
            cairo_select_font_face (cr, "Adobe Heiti Std",
                                    CAIRO_FONT_SLANT_NORMAL,
                                    CAIRO_FONT_WEIGHT_NORMAL);
            cairo_set_font_size (cr, 24.0);

            cairo_move_to (cr, 10.0, 34.0);
            cairo_show_text (cr, "我是中国人,我爱我的祖国。");

            cairo_destroy (cr);
            cairo_surface_destroy (surface);

            return 0;
    }


    编译这个示例:
    $ gcc -o example-3 `pkg-config --cflags --libs gtk+-2.0` example-3.c

    生成的 SVG 文件可以使用 Firefox、Opera、Inkscape 程序查看。
    surface = cairo_svg_surface_create("svgfile.svg", 320, 48);

    要生成一份 SVG 文件,必须使用 cairo_svg_surface_create () 函数创建一个 svg 外观。除此之外,其余代码的功用与上述示例类似。
    本例生成的 SVG 文件,使用 Firefox 查看结果如下图所示:

    4. GTK 窗口
    在最后这个示例中,演示如何在 GTK 窗口中使用 Cairo 绘制图形。基于 GTK 后端的 Cairo 绘图模型将贯穿于本指南。
    #include <cairo.h>
    #include <gtk/gtk.h>

    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.627, 0, 0);
            cairo_select_font_face (cr, "Adobe Heiti Std", CAIRO_FONT_SLANT_NORMAL,
                                    CAIRO_FONT_WEIGHT_NORMAL);
            cairo_set_font_size (cr, 24.0);

            cairo_move_to (cr, 10.0, 34.0);
            cairo_show_text (cr, "我是中国人,我爱我的祖国。");

            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), 320, 48);
            gtk_widget_set_app_paintable (window, TRUE);

            gtk_widget_show_all (window);

            gtk_main ();

            return 0;
    }


    这个示例程序运行后,会在屏幕中央跳出一个 GTK+ 窗口,上面绘制了一串文本,如下图所示:

    #include <cairo.h>
    #include <gtk/gtk.h>


    首先要包含 cairo 与 gtk+ 库的头文件。
    g_signal_connect (window, "expose-event",
                              G_CALLBACK (on_expose_event), NULL);


    当 GTK+窗口被重绘时,会发出 expose-event 信号,我们可将这一信号连接到 on_expose_event () 回调函数上。
    gtk_widget_set_app_paintable (window, TRUE);

    要在 GTK+ 窗口中绘制 Cairo 图形,可以使用 GtkDrawingArea widget 或者更为简单的 GtkWindow widget,本例选择 GtkWindow 。由 GtkWindow widget 对 expose-event 信号处理后,默认要重新绘制窗口背景,这会将我们在 on_expose_event () 函数中定义的 Cairo 图形覆盖掉,因此需要调用 gtk_widget_set_app_paintable () 函数通知 GTK+ 不要这么干。如果是在 GtkDrawingArea widget 中绘制 Cairo 图形,则可省区这一步。
    cairo_t *cr;

    cr = gdk_cairo_create (widget->window);


    Cairo 图形绘制工作是在 on_expose_event () 函数中进行的,在该函数中,我们为 GTK+ 系统创建了一个 Cairo 环境,并在该环境中绘制了一行文本。

      

    该用户从未签到

    发表于 2011-11-29 19:36:18 | 显示全部楼层
    不知道为什么,复制代码编译后,结果是空白!求解答?
    *滑块验证:
    您需要登录后才可以回帖 登录 | 马上加入

    本版积分规则

    申请友链|Archiver|小黑屋|手机版|GTK+中文社区 ( 粤ICP备13080851号 )

    我要啦免费统计

    GMT+8, 2024-3-29 03:23 , Processed in 0.076479 second(s), 7 queries , Redis On.

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表