原文介紹可見這裡。

這篇介紹一個很好玩的視窗，一個可以進行繪圖的視窗。換句話說，可以做一個簡單的繪圖軟體。
效果見下面的動畫：

雖然很粗糙，不過，做出這麼個簡單的繪圖視窗算是很有成就感了吧。

關於程式碼：

不過程式碼也是比較長的，我將原文中的程式碼分成了兩部分，即標頭檔案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的所有目錄及其子目錄到搜尋路徑，這樣就能找到函式聲明瞭。