cairo 教程5

编译过程可参考教程二

基本绘图

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

直线段

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

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

doublecoordx[100];
doublecoordy[100];

intcount =0;

staticgboolean
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);
       
       inti, 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(intargc,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为参数，绘制直线段。

       inti, 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 ()函数重绘窗口区域。