原文介绍可见这里。

这篇介绍一个很好玩的窗口，一个可以进行绘图的窗口。换句话说，就是你已经可以做一个简单的绘图软件了！

效果见下面的动画：

虽然很粗糙，不过，做出这么个简单的绘图窗口算是很有成就感了吧。

关于代码：

不过代码也是比较长的，我将原文中的代码分成了两部分，即头文件mygtk.h和源程序main.c。

mygtk.h:

#ifndef MYGTK_H_INCLUDED
#define MYGTK_H_INCLUDED
/* 建立一个surface（我翻译为“表面”），用于存储当前的涂鸦*/
static cairo_surface_t *surface = NULL;
/* 摘自cairo.h，A cairo_surface_t represents an image, either as the destination
 * of a drawing operation or as source when drawing onto another
 * surface.  To draw to a #cairo_surface_t, create a cairo context
 * with the surface as the target, using cairo_create().*/

/* 将 surface 初始化为白色*/
static void clear_surface (void)
{
    cairo_t *cr;
    cr = cairo_create (surface);
    cairo_set_source_rgb (cr, 1, 1, 1);
    cairo_paint (cr);
    cairo_destroy (cr);
}

/* 创造一个新的、大小适当的 surface 去存储我们的涂鸦 */
static gboolean configure_event_cb (GtkWidget  *widget,
                    GdkEventConfigure *event,
                    gpointer           data)
{
    if (surface)
        cairo_surface_destroy (surface);

    surface = gdk_window_create_similar_surface (gtk_widget_get_window (widget),
              CAIRO_CONTENT_COLOR,
              gtk_widget_get_allocated_width (widget),
              gtk_widget_get_allocated_height (widget));

    /* 将 surface 初始化为白色*/
    clear_surface ();
    /* 我们做了处理后，不必再做进一步的处理 */
    return TRUE;
}

 /*通过 surface 重绘屏幕。
 * 接收一个现有的 cairo_t 对象，绘制widget的暴露部分。
 */
static gboolean draw_cb (GtkWidget *widget,
         cairo_t   *cr,
         gpointer   data)
{
    cairo_set_source_surface (cr, surface, 0, 0);
    cairo_paint (cr);
    return FALSE;
}

/*在指定的位置绘制一个矩形 */
static void draw_brush (GtkWidget *widget,
            gdouble    x,
            gdouble    y)
{
    cairo_t *cr;

    /* Paint to the surface, where we store our state */
    cr = cairo_create (surface);

    cairo_rectangle (cr, x - 3, y - 3, 6, 6);
    cairo_fill (cr);

    cairo_destroy (cr);
    /* Now invalidate the affected region of the drawing area. */
    gtk_widget_queue_draw_area (widget, x - 3, y - 3, 6, 6);
}

/* Handle button press events by either drawing a rectangle
 * or clearing the surface, depending on which button was pressed.
 * The ::button-press signal handler receives a GdkEventButton
 * struct which contains this information.
 */
static gboolean button_press_event_cb (GtkWidget      *widget,
                       GdkEventButton *event,
                       gpointer        data)
{
    /* paranoia check, in case we haven't gotten a configure event */
    if (surface == NULL)
        return FALSE;

    if (event->button == GDK_BUTTON_PRIMARY)
    {
        draw_brush (widget, event->x, event->y);
    }
    else if (event->button == GDK_BUTTON_SECONDARY)
    {
        clear_surface ();
        gtk_widget_queue_draw (widget);
    }

    /* We've handled the event, stop processing */
    return TRUE;
}

/* Handle motion events by continuing to draw if button 1 is
 * still held down. The ::motion-notify signal handler receives
 * a GdkEventMotion struct which contains this information.
 */
static gboolean motion_notify_event_cb (GtkWidget      *widget,
                        GdkEventMotion *event,
                        gpointer        data)
{
    /* paranoia check, in case we haven't gotten a configure event */
    if (surface == NULL)
        return FALSE;

    if (event->state & GDK_BUTTON1_MASK)
        draw_brush (widget, event->x, event->y);
    /* We've handled it, stop processing */
    return TRUE;
}

static void close_window (void)
{
    if (surface)
        cairo_surface_destroy (surface);
    gtk_main_quit ();
}


#endif // MYGTK_H_INCLUDED

main.c:

#include <gtk/gtk.h>
#include "mygtk.h"

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

    gtk_init (&argc, &argv);

    /* 构图 */
    window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title (GTK_WINDOW (window), "Drawing Area");
    g_signal_connect (window, "destroy", G_CALLBACK (close_window), NULL);
    gtk_container_set_border_width (GTK_CONTAINER (window), 8);

    frame = gtk_frame_new (NULL);
    gtk_frame_set_shadow_type (GTK_FRAME (frame), GTK_SHADOW_IN);
    gtk_container_add (GTK_CONTAINER (window), frame);

    da = gtk_drawing_area_new ();
    /* set a minimum size */
    gtk_widget_set_size_request (da, 100, 100);
    gtk_container_add (GTK_CONTAINER (frame), da);

    /* Signals used to handle the backing surface */
    g_signal_connect (da, "draw",
                      G_CALLBACK (draw_cb), NULL);
    /*信号“ configure-event“被发射了 ，
     *则所绑定构件的大小、位置与次序栈都被捕获了。
     */
    g_signal_connect (da,"configure-event",
                      G_CALLBACK (configure_event_cb), NULL);

    /* Event signals */
    g_signal_connect (da, "motion-notify-event",
                      G_CALLBACK (motion_notify_event_cb), NULL);
    g_signal_connect (da, "button-press-event",
                      G_CALLBACK (button_press_event_cb), NULL);

    /* Ask to receive events the drawing area doesn't normally
     * subscribe to. In particular, we need to ask for the
     * button press and motion notify events that want to handle.
     */
    gtk_widget_set_events (da, gtk_widget_get_events (da)
                           | GDK_BUTTON_PRESS_MASK
                           | GDK_POINTER_MOTION_MASK);

    gtk_widget_show_all (window);
    gtk_main ();
    return 0;
}

这里需要做些说明：

如果在codeblocks中查找声明显示找不到，应该是编译器选项的搜索路径没有添加上或者添加完全，大致应该如图：

即：添加你的GTK目录下include的所有目录及其子目录到搜索路径，这样就能找到函数声明了。

GTK3学习笔记4 Drawing