cairo 教程5

编译过程可参考教程二

基本绘图

这一部分讲述如何绘制一些简单的图元，包括直线、填充与笔画操作、虚线、线端（Cap）与线的交合等图形的绘制方法。

直线段

直线段是非常基础的矢量图形对象。画一条直线段，需要调用两个函数：cairo_move_to()函数，用于设置线段起点；cairo_line_to()用于设定线段终点。

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

double coordx[100] ;
double coordy[100] ;

int count = 0 ;

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, 0.5) ;
       
        int i, j;
        for( i = 0 ; i <= count - 1 ; i++ ){
                for( j  = 0 ; j <= count -1 ; j++ ){
                       cairo_move_to( cr,coordx[ i] , coordy[ i]) ;
                       cairo_line_to( cr,coordx[ j] , coordy[ j]) ;
                }
        }
       
        count = 0 ;
        cairo_stroke( cr) ;
        cairo_destroy( cr) ;
       
        returnFALSE ;
}

gboolean clicked( GtkWidget*widget, GdkEventButton *event,
                 gpointeruser_data)
{
        if(event->button == 1){
                coordx[ count] = event->x;
                coordy[ count++] = event->y;
        }
       
        if(event->button == 3){
                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) ;
       
        gtk_widget_add_events ( window, GDK_BUTTON_PRESS_MASK) ;
       
        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( window, "button-press-event" ,
                        G_CALLBACK( clicked) , NULL) ;
       
        gtk_window_set_position( GTK_WINDOW( window) , GTK_WIN_POS_CENTER) ;
        gtk_window_set_title( GTK_WINDOW( window) , "lines") ;
        gtk_window_set_default_size( GTK_WINDOW( window) , 400 , 300) ;
        gtk_widget_set_app_paintable( window, TRUE) ;
       
        gtk_widget_show_all( window) ;
       
        gtk_main() ;
       
        return0 ;
}

该示例会创建一个支持鼠标交互绘制直线段的 GTK+ 窗口。在窗口中使用鼠标左键随便点几下，每一次点击时，光标位置的坐标都会被记入长度为 100 的数组；然后点击鼠标右键，所有由鼠标左键点击所得到的点会被彼此连接形成直线段；在窗口中再次点击鼠标右键时，会对窗口绘图区域进行清除。

下面对该示例程序代码进行分析：

---

       cairo_set_source_rgb( cr, 0 , 0 , 0) ;
        cairo_set_line_width ( cr, 0.5) ;

设置颜色为黑色，线宽为 0.5pt 为参数，绘制直线段。

---

       int i, j;
        for( i = 0 ; i <= count - 1 ; i++ ){
                for( j  = 0 ; j <= count -1 ; j++ ){
                       cairo_move_to( cr,coordx[ i] , coordy[ i]) ;
                       cairo_line_to( cr,coordx[ j] , coordy[ j]) ;
                }
        }

用 cairo_move_to() 和 cairo_line_to() 函数在 cr 中定义绘图路径 (path)，连接 coordx[] 和 coordy[] 所记录的每个点。

---

       cairo_stroke( cr) ;

cairo_stroke() 函数会将 cr 中的路径绘制出来。

---

       g_signal_connect( window, "button-press-event" ,
                        G_CALLBACK( clicked) , NULL) ;

设定button-press-event事件的回调函数为clicked ()。

---

       if( event->button == 1){
                coordx[ count] = event->x;
                coordy[ count++] = event->y;
        }

在clicked ()函数中，当鼠标左键点击事件发生时，讲光标所在位置的 x 和 y 坐标分别记入数组coordx 和 coordy 。

---

       if( event->button == 3){
                gtk_widget_queue_draw( widget) ;
        }

 在clicked ()函数中，当鼠标右键单击时，调用 gtk_widget_queue_draw () 函数重绘窗口区域。

---