Cairo图形指南（5）

形状与填充

这一部分，讲述一些基本的以及较为高级的形状绘制及其纯色 (solid color)、图案 (pattern) 与渐变 (gradient) 填充方法。

基本形状

Cairo 提供了几个用于绘制基本形状的函数。

#include <cairo.h>
#include <gtk/gtk.h>
#include <math.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 , 0 , 0 ) ;
        cairo_set_line_width ( cr, 1 ) ;

        cairo_rectangle ( cr, 20 , 20 , 120 , 80 ) ;
        cairo_rectangle ( cr, 180 , 20 , 80 , 80 ) ;
        cairo_stroke_preserve ( cr ) ;
        cairo_set_source_rgb ( cr, 1 , 1 , 1 ) ;
        cairo_fill ( cr ) ;

        cairo_set_source_rgb ( cr, 0 , 0 , 0 ) ;
        cairo_arc ( cr, 330 , 60 , 40 , 0 , 2 * M_PI ) ;
        cairo_stroke_preserve ( cr ) ;
        cairo_set_source_rgb ( cr, 1 , 1 , 1 ) ;
        cairo_fill ( cr ) ;

        cairo_set_source_rgb ( cr, 0 , 0 , 0 ) ;
        cairo_arc ( cr, 90 , 160 , 40 , M_PI / 4 , M_PI ) ;
        cairo_close_path ( cr ) ;
        cairo_stroke_preserve ( cr ) ;
        cairo_set_source_rgb ( cr, 1 , 1 , 1 ) ;
        cairo_fill ( cr ) ;

        cairo_set_source_rgb ( cr, 0 , 0 , 0 ) ;
        cairo_translate ( cr, 220 , 180 ) ;
        cairo_scale ( cr, 1 , 0.7 ) ;
        cairo_arc ( cr, 0 , 0 , 50 , 0 , 2 * M_PI ) ;
        cairo_stroke_preserve ( cr ) ;
        cairo_set_source_rgb ( cr, 1 , 1 , 1 ) ;
        cairo_fill ( cr ) ;

        cairo_destroy ( cr ) ;

        return FALSE ;
}


int
main ( int argc, char *argv [ ] )
{

        GtkWidget *window;
        GtkWidget *darea;

        gtk_init ( &argc, &argv ) ;

        window = gtk_window_new ( GTK_WINDOW_TOPLEVEL ) ;

        darea = gtk_drawing_area_new ( ) ;
        gtk_container_add ( GTK_CONTAINER ( window ) , darea ) ;

        g_signal_connect ( darea, "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 ) , 390 , 240 ) ;

        gtk_widget_show_all ( window ) ;

        gtk_main ( ) ;

        return 0 ;
}

这个示例，绘制了矩形、正方形、圆、圆弧和椭圆。

下面对关键代码简单分析：

        cairo_rectangle ( cr, 20 , 20 , 120 , 80 ) ;
        cairo_rectangle ( cr, 180 , 20 , 80 , 80 ) ;

绘制矩形与正方形。正方形在 cairo 中是矩形的一种特例。

        cairo_arc ( cr, 330 , 60 , 40 , 0 , 2 * M_PI ) ;

 画了一个圆，圆心为 (330, 60)px，半径为 40px。Cairo 所谓的圆，其实是起始角为 0 度，终止角为 360 度的弧线。

        cairo_scale ( cr, 1 , 0.7 ) ;
        cairo_arc ( cr, 0 , 0 , 50 , 0 , 2 * M_PI ) ;

画椭圆的方法也与画圆类似，只是需要先设定长轴与短轴的比例，在本例中为 1:0.7。

复杂的图形

复杂的图形是由简单的图形拼凑出来的，譬如下面这个绘制圆角矩形的程序。

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

static void
draw_round_rectangle ( cairo_t * cr,
                       double x, double y,
                       double width, double height, double r )
{
        cairo_move_to ( cr, x + r, y ) ;
        cairo_line_to ( cr, x + width - r, y ) ;

        cairo_move_to ( cr, x + width, y + r ) ;
        cairo_line_to ( cr, x + width, y + height - r ) ;

        cairo_move_to ( cr, x + width - r, y + height ) ;
        cairo_line_to ( cr, x + r, y + height ) ;

        cairo_move_to ( cr, x, y + height - r ) ;
        cairo_line_to ( cr, x, y + r ) ;

        cairo_arc ( cr, x + r, y + r, r, M_PI, 3 * M_PI / 2.0 ) ;
        cairo_arc ( cr, x + width - r, y + r, r, 3 * M_PI / 2 , 2 * M_PI ) ;
        cairo_arc ( cr, x + width - r, y + height - r, r, 0 , M_PI / 2 ) ;
        cairo_arc ( cr, x + r, y + height - r, r, M_PI / 2 , M_PI ) ;
}

static gboolean
on_expose_event ( GtkWidget * widget,
                 GdkEventExpose * event, gpointer data )
{
        cairo_t *cr;
        int width, height;
       
        double w, h, x, y, r;
       
        gtk_window_get_size ( GTK_WINDOW ( widget ) , &width, &height ) ;
       
        x = width / 5.0 ;
        y = height / 5.0 ;
        w = 3 * width / 5.0 ;
        h = 3 * height / 5.0 ;
        r = h / 4.0 ;
       
        cr = gdk_cairo_create ( widget->window ) ;

        cairo_set_source_rgb ( cr, 0.8 , 0.4 , 0 ) ;
        cairo_set_line_width ( cr, 6 ) ;

        draw_round_rectangle ( cr, x, y, w, h, r ) ;
        cairo_stroke_preserve ( cr ) ;
        cairo_set_source_rgb ( cr, 0.8 , 0.8 , 0.2 ) ;
        cairo_fill ( cr ) ;

        cairo_destroy ( cr ) ;

        g_print ( "test/n " ) ;
       
        return FALSE ;
}

static gboolean
on_configure_event ( GtkWidget * widget,
              GdkEventConfigure * event, gpointer data )
{
        gdk_window_invalidate_rect ( widget->window,
                                    &widget->allocation,
                                     FALSE ) ;
        return FALSE ;
}

int
main ( int argc, char *argv [ ] )
{
        GtkWidget *window;
        GtkWidget *darea;

        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 ) ;
        g_signal_connect ( G_OBJECT ( window ) , "configure-event" ,
                         G_CALLBACK ( on_configure_event ) , NULL ) ;

       
        gtk_window_set_position ( GTK_WINDOW ( window ) ,
                                 GTK_WIN_POS_CENTER ) ;
        gtk_window_set_default_size ( GTK_WINDOW ( window ) , 400 , 300 ) ;
        gtk_widget_set_app_paintable ( window, TRUE ) ;
        gtk_widget_show_all ( window ) ;

        gtk_main ( ) ;

        return 0 ;
}

注：因为 "The cairo graphics tutorial" 在这一部分所提供的示例程序不具代表性，因此写了这个程序。

该示例程序绘制了一个可跟随窗口尺寸进行缩放变化的圆角矩形。

自定义的 draw_round_rectangle () 函数利用 Cairo 提供的基本图元函数，利用直线段与圆弧拼凑出圆角矩形。on_configure_event () 函数用于响应窗口尺寸变化事件，在其中调用 gdk_window_invalidate_rect () 函数让窗口绘图区域失效，并产生窗口重绘制事件（即 expose 事件）。

填充 (Fill)

虽然上一篇已经讲述了一些有关填充的知识，但这里所讲述的内容是与形状相关的。填充可分为三种类型：纯色、图案、渐变。

纯色 (Solid color)

对象的颜色是采用红 (R)、绿 (G)、蓝 (B) 三原色描述的，Cairo 的 RGB 取值是从 0 到 1 的双精浮点数。

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

        int width, height;
        gtk_window_get_size ( GTK_WINDOW ( widget ) , &width, &height ) ;


        cairo_set_source_rgb ( cr, 0.5 , 0.5 , 1 ) ;
        cairo_rectangle ( cr, 20 , 20 , 100 , 100 ) ;
        cairo_fill ( cr ) ;

        cairo_set_source_rgb ( cr, 0.6 , 0.6 , 0.6 ) ;
        cairo_rectangle ( cr, 150 , 20 , 100 , 100 ) ;
        cairo_fill ( cr ) ;

        cairo_set_source_rgb ( cr, 0 , 0.3 , 0 ) ;
        cairo_rectangle ( cr, 20 , 140 , 100 , 100 ) ;
        cairo_fill ( cr ) ;

        cairo_set_source_rgb ( cr, 1 , 0 , 0.5 ) ;
        cairo_rectangle ( cr, 150 , 140 , 100 , 100 ) ;
        cairo_fill ( 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 ( G_OBJECT ( window ) , "expose-event" ,
                          G_CALLBACK ( on_expose_event ) , NULL ) ;
        g_signal_connect ( G_OBJECT ( 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 ) , 270 , 260 ) ;
        gtk_window_set_title ( GTK_WINDOW ( window ) , "colors" ) ;

        gtk_widget_set_app_paintable ( window, TRUE ) ;
        gtk_widget_show_all ( window ) ;

        gtk_main ( ) ;

        return 0 ;
}

该示例绘制了 4 个正方形，分别采用四种不同颜色进行填充。这个例子，由于很简单，就不再像原作者那样自作多情的分析了。

图案 (Pattern)

所谓图案填充，就是将图片填充到形状内部。

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

cairo_surface_t *surface1;
cairo_surface_t *surface2;
cairo_surface_t *surface3;
cairo_surface_t *surface4;

static void
create_surfaces ( )
{
        surface1 = cairo_image_surface_create_from_png ( "blueweb.png" ) ;
        surface2 = cairo_image_surface_create_from_png ( "maple.png" ) ;
        surface3 = cairo_image_surface_create_from_png ( "crack.png" ) ;
        surface4 =
            cairo_image_surface_create_from_png ( "chocolate.png" ) ;
}

static void
destroy_surfaces ( )
{
        g_print ( "destroying surfaces" ) ;
        cairo_surface_destroy ( surface1 ) ;
        cairo_surface_destroy ( surface2 ) ;
        cairo_surface_destroy ( surface3 ) ;
        cairo_surface_destroy ( surface4 ) ;
}

static gboolean
on_expose_event ( GtkWidget * widget,
                 GdkEventExpose * event, gpointer data )
{
        cairo_t *cr;

        cairo_pattern_t *pattern1;
        cairo_pattern_t *pattern2;
        cairo_pattern_t *pattern3;
        cairo_pattern_t *pattern4;

        cr = gdk_cairo_create ( widget->window ) ;

        int width, height;
        gtk_window_get_size ( GTK_WINDOW ( widget ) , &width, &height ) ;


        pattern1 = cairo_pattern_create_for_surface ( surface1 ) ;
        pattern2 = cairo_pattern_create_for_surface ( surface2 ) ;
        pattern3 = cairo_pattern_create_for_surface ( surface3 ) ;
        pattern4 = cairo_pattern_create_for_surface ( surface4 ) ;


        cairo_set_source ( cr, pattern1 ) ;
        cairo_pattern_set_extend ( cairo_get_source ( cr ) ,
                                  CAIRO_EXTEND_REPEAT ) ;
        cairo_rectangle ( cr, 20 , 20 , 100 , 100 ) ;
        cairo_fill ( cr ) ;

        cairo_set_source ( cr, pattern2 ) ;
        cairo_pattern_set_extend ( cairo_get_source ( cr ) ,
                                  CAIRO_EXTEND_REPEAT ) ;
        cairo_arc ( cr, 200 , 70 , 50 , 0 , 2 * M_PI ) ;
        cairo_fill ( cr ) ;

        cairo_set_source ( cr, pattern3 ) ;
        cairo_pattern_set_extend ( cairo_get_source ( cr ) ,
                                  CAIRO_EXTEND_REPEAT ) ;
        cairo_rectangle ( cr, 20 , 140 , 100 , 100 ) ;
        cairo_fill ( cr ) ;

        cairo_set_source ( cr, pattern4 ) ;
        cairo_pattern_set_extend ( cairo_get_source ( cr ) ,
                                  CAIRO_EXTEND_REPEAT ) ;
        cairo_rectangle ( cr, 150 , 140 , 100 , 100 ) ;
        cairo_fill ( cr ) ;

        cairo_pattern_destroy ( pattern1 ) ;
        cairo_pattern_destroy ( pattern2 ) ;
        cairo_pattern_destroy ( pattern3 ) ;
        cairo_pattern_destroy ( pattern4 ) ;

        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 ( G_OBJECT ( window ) , "expose-event" ,
                          G_CALLBACK ( on_expose_event ) , NULL ) ;
        g_signal_connect ( G_OBJECT ( window ) , "destroy" ,
                          G_CALLBACK ( gtk_main_quit ) , NULL ) ;

        create_surfaces ( ) ;

        gtk_window_set_position ( GTK_WINDOW ( window ) ,
                                 GTK_WIN_POS_CENTER ) ;
        gtk_window_set_default_size ( GTK_WINDOW ( window ) , 270 , 260 ) ;
        gtk_window_set_title ( GTK_WINDOW ( window ) , "patterns" ) ;

        gtk_widget_set_app_paintable ( window, TRUE ) ;
        gtk_widget_show_all ( window ) ;

        gtk_main ( ) ;

        destroy_surfaces ( ) ;

        return 0 ;
}

该示例，载入 4 张图片，分别填充至三个矩形与一个圆形内部区域。所使用的 4 幅图，均采用 GIMP 制作。程序中，图片的外观 (surface) 实在 on_expose_event () 函数中创建的，这并不是很妥当，因为窗口每次被重绘时，都需要从硬盘中读取图片。

        pattern1 = cairo_pattern_create_for_surface ( surface1 ) ;

由图片外观创建一个图案。

        cairo_set_source ( cr, pattern1 ) ;
        cairo_pattern_set_extend ( cairo_get_source ( cr ) ,
                                  CAIRO_EXTEND_REPEAT ) ;
        cairo_rectangle ( cr, 20 , 20 , 100 , 100 ) ;
        cairo_fill ( cr ) ;

这里，绘制第一个矩形。cairo_set_source () 函数通知 Cairo 环境，让它使用一份图案作为源 (source)。图片所形成的图案或许并不适合于形状，当使用 cairo_pattern_set_extend () 函数讲图案填充模式设为 CAIRO_EXTEND_REPEAT 时，可以让图案像瓦片那样填充于形状内部。cairo_rectangle () 函数创建一个矩形路径，cairo_fill () 函数将已经准备好的图案填充到矩形路径所构成的封闭区域中。

渐变 (Gradient)

在计算机图形学中，渐变是形状由明到暗或者从一种颜色向另一种颜色的平滑过度。在 2D 绘图与渲染程序中，渐变通常被用于创造多彩的背景与一些特效，比如光影的仿真。

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

static gboolean
on_expose_event ( GtkWidget * widget,
                 GdkEventExpose * event, gpointer data )
{
        cairo_t *cr;
        cairo_pattern_t *pat1;
        cairo_pattern_t *pat2;
        cairo_pattern_t *pat3;

        cr = gdk_cairo_create ( widget->window ) ;

        pat1 = cairo_pattern_create_linear ( 0.0 , 0.0 , 350.0 , 350.0 ) ;

        gdouble j;
        gint count = 1 ;
        for ( j = 0.1 ; j < 1 ; j += 0.1 ) {
                if ( ( count % 2 ) ) {
                        cairo_pattern_add_color_stop_rgb ( pat1, j, 0 , 0 ,
                                                           0 ) ;
                } else {
                        cairo_pattern_add_color_stop_rgb ( pat1, j, 1 , 0 ,
                                                           0 ) ;
                }
                count++;
        }

        cairo_rectangle ( cr, 20 , 20 , 300 , 100 ) ;
        cairo_set_source ( cr, pat1 ) ;
        cairo_fill ( cr ) ;


        pat2 = cairo_pattern_create_linear ( 0.0 , 0.0 , 350.0 , 0.0 ) ;

        gdouble i;
        count = 1 ;
        for ( i = 0.05 ; i < 0.95 ; i += 0.025 ) {
                if ( ( count % 2 ) ) {
                        cairo_pattern_add_color_stop_rgb ( pat2, i, 0 , 0 ,
                                                           0 ) ;
                } else {
                        cairo_pattern_add_color_stop_rgb ( pat2, i, 0 , 0 ,
                                                           1 ) ;
                }
                count++;
        }

        cairo_rectangle ( cr, 20 , 140 , 300 , 100 ) ;
        cairo_set_source ( cr, pat2 ) ;
        cairo_fill ( cr ) ;


        pat3 = cairo_pattern_create_linear ( 20.0 , 260.0 , 20.0 , 360.0 ) ;

        cairo_pattern_add_color_stop_rgb ( pat3, 0.1 , 0 , 0 , 0 ) ;
        cairo_pattern_add_color_stop_rgb ( pat3, 0.5 , 1 , 1 , 0 ) ;
        cairo_pattern_add_color_stop_rgb ( pat3, 0.9 , 0 , 0 , 0 ) ;

        cairo_rectangle ( cr, 20 , 260 , 300 , 100 ) ;
        cairo_set_source ( cr, pat3 ) ;
        cairo_fill ( cr ) ;

        cairo_pattern_destroy ( pat1 ) ;
        cairo_pattern_destroy ( pat2 ) ;
        cairo_pattern_destroy ( pat3 ) ;

        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 ( G_OBJECT ( window ) , "expose-event" ,
                          G_CALLBACK ( on_expose_event ) , NULL ) ;
        g_signal_connect ( G_OBJECT ( 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 ) , 340 , 390 ) ;
        gtk_window_set_title ( GTK_WINDOW ( window ) , "gradients" ) ;

        gtk_widget_set_app_paintable ( window, TRUE ) ;
        gtk_widget_show_all ( window ) ;

        gtk_main ( ) ;

        return 0 ;
}
 

在这一示例程序中，我们绘制了三个具有不同渐变风格的矩形。

        pat3 = cairo_pattern_create_linear ( 20.0 , 260.0 , 20.0 , 360.0 ) ;

这里，创建了一个线性渐变图案。参数设定了绘制渐变方向的直线，在示例中，它是一条竖线。

        cairo_pattern_add_color_stop_rgb ( pat3, 0.1 , 0 , 0 , 0 ) ;
        cairo_pattern_add_color_stop_rgb ( pat3, 0.5 , 1 , 1 , 0 ) ;
        cairo_pattern_add_color_stop_rgb ( pat3, 0.9 , 0 , 0 , 0 ) ;

定义了渐变图案的断点。在示例中，渐变图案表现为黑色与黄色的过渡。通过添加两个黑色断点和一个黄色断点，就可以构成一个水平方向的渐变图案，颜色 的变化方向则是沿竖直方向。渐变图案从矩形的上端至下端，开始是黑色，到 1/10 宽度时，黑色便停止了，然后就是由黑色向黄色的渐变渲染；到达矩形中部时，黄色达到饱和状态。黄色断点会在 9/10 宽度处终止，最后的 1/10 又是黑色。