Cairo 图形指南 (5) —— 形状与填充

最新推荐文章于 2024-06-22 12:41:52 发布

fancy_sky

最新推荐文章于 2024-06-22 12:41:52 发布

阅读量3.1k

点赞数

分类专栏：【Cairo图形】

【Cairo图形】专栏收录该内容

8 篇文章 2 订阅

订阅专栏

这一部分，讲述一些基本的以及较为高级的形状绘制及其纯色 (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 又是黑色。