Cairo 图形指南 (4) —— 基本绘图

这一部分讲述如何绘制一些简单的图元，包括直线、填充与笔画操作、虚线、线端（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 );
        
         return  FALSE;
}

gboolean clicked (GtkWidget *widget, GdkEventButton *event,
                 gpointer user_data )
{
         if  (event->button ==  1 )  {
                coordx [count ] = event->x;
                coordy [count++ ] = event->y;
         }
        
         if  (event->button ==  3 )  {
                gtk_widget_queue_draw (widget );
         }
        
         return  TRUE;
}


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 ( );
        
         return  0;
}

该示例会创建一个支持鼠标交互绘制直线段的 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 () 函数重绘窗口区域。

---

---

描绘 (Stroke) 与填充 (Fill)

描绘 (Stroke) 可以绘制形状的轮廓，填充 (Fill) 则用于向形状内部灌注颜色。 

#include <math.h>
#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_line_width  (cr,  9 );

        cairo_set_source_rgb  (cr,  0.69,  0.19,  0 );
        cairo_arc  (cr, width /  2, height /  2,
                    (width < height ? width : height ) /  2 -  10,  0,
                    2 * M_PI );
        cairo_stroke_preserve  (cr );

        cairo_set_source_rgb  (cr,  0.3,  0.4,  0.6 );
        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 ),  200,  150 );

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

        gtk_main  ( );

         return  0;
}

这个示例绘制一个内部填充灰色的圆。

下面对代码进行解析：

---

#include <math.h>

之所以引入这个头文件，是因为程序中使用了圆周率常量 M_PI。

---

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

获取窗口的宽度与高度尺寸。程序中将使用这些值作为绘制圆形的参考尺寸，以实现窗口尺寸变化时，所绘制的圆的尺寸也会相应变化。

---

        cairo_set_source_rgb  (cr,  0.69,  0.19,  0 );
        cairo_arc  (cr, width /  2, height /  2,
                    (width < height ? width : height ) /  2 -  10,  0,
                    2 * M_PI );
        cairo_stroke_preserve  (cr );

描绘圆的轮廓。这里要注意一下 cairo_stroke_preserve () 函数与 cairo_stroke () 函数的区别（最好的办法是用后者替换一下前者，看看程序执行效果）。cairo_stroke_preserve () 函数会将它绘制的路径依然保存在 cairo 环境中，而 cairo_stroke () 所绘制的路径，在绘制完成后，就从 cairo的环境中清除了。

---

        cairo_set_source_rgb  (cr,  0.3,  0.4,  0.6 );
        cairo_fill  (cr );

对使用 cairo_stroke_preserve () 函数绘制的路径进行蓝色填充。

---

---

虚线 (Dash)

每条线都可以用不同的虚线笔 (dash pen) 来画。虚线模式是通过 cairo_set_dash () 函数来设定。模式类型通过一个数组来定义，数组中的值均为正数，它们用于设置虚线的虚部分与实部分。数组的长度与偏移量可以在程序中设定。如果数组的长度 为 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 );

        cairo_set_source_rgba  (cr,  0,  0,  0,  1 );

         static  const  double dashed1 [ ] =  {  4.0,  1.0  };
         static  int len1 =  sizeof  (dashed1 ) /  sizeof  (dashed1 [ 0 ] );

         static  const  double dashed2 [ ] =  {  4.0,  10.0,  4.0  };
         static  int len2 =  sizeof  (dashed2 ) /  sizeof  (dashed2 [ 0 ] );

         static  const  double dashed3 [ ] =  {  1.0  };

        cairo_set_line_width  (cr,  1.5 );

        cairo_set_dash  (cr, dashed1, len1,  0 );

        cairo_move_to  (cr,  40,  60 );
        cairo_line_to  (cr,  360,  60 );
        cairo_stroke  (cr );

        cairo_set_dash  (cr, dashed2, len2,  10 );

        cairo_move_to  (cr,  40,  120 );
        cairo_line_to  (cr,  360,  120 );
        cairo_stroke  (cr );

        cairo_set_dash  (cr, dashed3,  1,  0 );

        cairo_move_to  (cr,  40,  180 );
        cairo_line_to  (cr,  360,  180 );
        cairo_stroke  (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 ),  400,  300 );

        gtk_widget_show_all  (window );

        gtk_main  ( );

         return  0;
}

该示例演示了三种虚线模式的设置及绘制。

下面分析一下关键代码。

---

         static  const  double dashed1 [ ] =  {  4.0,  1.0  };

设定第一条虚线的模式，它的实部是 4 个像素，虚部是 1 个像素。

---

         static  int len1 =  sizeof  (dashed1 ) /  sizeof  (dashed1 [ 0 ] );

计算数组 dashed1 的长度。

---

        cairo_set_dash  (cr, dashed1, len1,  0 );

设置虚线模式。

---

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

这次，我们是在 drawing_area 部件上绘图，不再是窗口区域了。

---

---

线帽 (Line caps)

线帽是针对直线段的端点形状而言的，分为三种：

• CAIRO_LINE_CAP_SQUARE
• CAIRO_LINE_CAP_ROUND
• CAIRO_LINE_CAP_BUTT

对应形状如下图所示：

同一条直线段，CAIRO_LINE_CAP_SQUARE 线帽与 CAIRO_LINE_CAP_BUTT 线帽会导致直线段长度有所差别，前者会比后者长一个线宽尺寸。

#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_rgba  (cr,  0,  0,  0,  1 );
        cairo_set_line_width  (cr,  10 );

        cairo_set_line_cap  (cr, CAIRO_LINE_CAP_BUTT );
        cairo_move_to  (cr,  40,  60 );
        cairo_line_to  (cr,  360,  60 );
        cairo_stroke  (cr );

        cairo_set_line_cap  (cr, CAIRO_LINE_CAP_ROUND );
        cairo_move_to  (cr,  40,  150 );
        cairo_line_to  (cr,  360,  150 );
        cairo_stroke  (cr );

        cairo_set_line_cap  (cr, CAIRO_LINE_CAP_SQUARE );
        cairo_move_to  (cr,  40,  240 );
        cairo_line_to  (cr,  360,  240 );
        cairo_stroke  (cr );

        cairo_set_line_width  (cr,  1.5 );

        cairo_move_to  (cr,  40,  40 );
        cairo_line_to  (cr,  40,  260 );
        cairo_stroke  (cr );

        cairo_move_to  (cr,  360,  40 );
        cairo_line_to  (cr,  360,  260 );
        cairo_stroke  (cr );

        cairo_move_to  (cr,  365,  40 );
        cairo_line_to  (cr,  365,  260 );
        cairo_stroke  (cr );

        cairo_destroy  (cr );

         return  FALSE;
}

该示例绘制三条具有不同线帽的直线段，同时也展示了不同线帽对线的长度的影响。

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

---

        cairo_set_line_width  (cr,  10 );

设置线的宽度为 10px。

---

        cairo_set_line_cap  (cr, CAIRO_LINE_CAP_ROUND );
        cairo_move_to  (cr,  40,  150 );
        cairo_line_to  (cr,  360,  150 );
        cairo_stroke  (cr );

 画了一条线帽为 CAIRO_LINE_CAP_ROUND 的直线段。

---

        cairo_move_to  (cr,  40,  40 );
        cairo_line_to  (cr,  40,  260 );
        cairo_stroke  (cr );

这是三条竖线之一，用于表现线帽对线的长度的影响。

---

---

线的交合 (Line joins)

线的交合存在以下三种风格：

• CAIRO_LINE_JOIN_MITER
• CAIRO_LINE_JOIN_BEVEL
• CAIRO_LINE_JOIN_ROUND

对应形状如下图所示。

#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.1,  0,  0 );

        cairo_rectangle  (cr,  30,  30,  100,  100 );
        cairo_set_line_width  (cr,  14 );
        cairo_set_line_join  (cr, CAIRO_LINE_JOIN_MITER );
        cairo_stroke  (cr );

        cairo_rectangle  (cr,  160,  30,  100,  100 );
        cairo_set_line_width  (cr,  14 );
        cairo_set_line_join  (cr, CAIRO_LINE_JOIN_BEVEL );
        cairo_stroke  (cr );

        cairo_rectangle  (cr,  100,  160,  100,  100 );
        cairo_set_line_width  (cr,  14 );
        cairo_set_line_join  (cr, CAIRO_LINE_JOIN_ROUND );
        cairo_stroke  (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 ),  300,  280 );

        gtk_widget_show_all  (window );

        gtk_main  ( );

         return  0;
}
 

该示例采用不同的交合类型绘制了三个矩形。

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

---

        cairo_rectangle  (cr,  30,  30,  100,  100 );
        cairo_set_line_width  (cr,  14 );
        cairo_set_line_join  (cr, CAIRO_LINE_JOIN_MITER );
        cairo_stroke  (cr );

绘制了一个线宽为 14px，交合类型为 CAIRO_LINE_JOIN_MITER 的矩形。

---