XCB 基礎教學：Linux 圖形化程式設計入門

XCB 作為 X Window System 的 C 語言繫結，提供更輕量且有效率的 API，讓開發者能直接與 X 伺服器溝通，進行底層圖形操作。相較於 Xlib，XCB 採用非同步機制，更適合處理大量圖形事件。理解 XCB 的核心概念，包含連線管理、視窗建立與操作、繪圖上下文設定，以及事件迴圈的運作，是開發 X Window 應用程式的基礎。透過 XCB，開發者可以精確控制視窗的各種屬性，並實作客製化的圖形介面。隨著 Wayland 的興起，XCB 也提供相關整合機制，讓開發者能逐步轉換至新的圖形化系統。

XCB 基礎教學：圖形環境下的系統管理

XCB（X C Binding）是一個低層級的圖形函式庫，用於與 X Window System 進行通訊。它提供了一個程式設計介面，讓開發者能夠與 X 伺服器互動。以下是一些關於 XCB 的基本概念及其應用。

圖形環境中的 XCB

在圖形環境中，XCB 主要用於建立和管理圖形視窗及相關資源。這些資源包括視窗、繪圖上下文（Graphics Context, GC）以及其他圖形元素。

建立視窗

建立視窗是 XCB 的基本操作之一。以下是一個建立視窗的範例：

xcb_void_cookie_t xcb_create_window(
    xcb_connection_t *c,
    uint8_t depth,
    xcb_window_t wid,
    xcb_window_t parent,
    int16_t x,
    int16_t y,
    uint16_t width,
    uint16_t height,
    uint16_t border_width,
    uint16_t _class,
    xcb_visualid_t visual,
    uint32_t value_mask,
    const void *value_list
)

內容解密：

xcb_connection_t *c：表示與 X 伺服器的連線。
uint8_t depth：指定新視窗的深度。特別值 XCB_COPY_FROM_PARENT 表示從父視窗取得深度。
xcb_window_t wid：新視窗的 ID，由 xcb_generate_id 建立。
xcb_window_t parent：新視窗的父視窗。
int16_t x, int16_t y：新視窗的座標。
uint16_t width, uint16_t height：新視窗的寬度和高度。
uint16_t border_width：邊框寬度。如果 _class 是 InputOnly，則必須為零。
_class：一個位元遮罩，包含 xcb_window_class_t 值。
xcb_visualid_t visual：新視窗的視覺 ID。特別值 XCB_COPY_FROM_PARENT 表示從父視窗取得視覺。
uint32_t value_mask：一個位元遮罩，包含 xcb_cw_t 值。
const void *value_list：值列表。

這個函式會建立一個未對映的子視窗，並產生一個 CreateNotify 事件。新視窗會放在堆積疊順序的頂端，與同層級的視窗相比。

XCB 繪圖上下文（GC）

在 X Window System 中，繪圖上下文（GC）是一個包含各種繪圖屬性的資源。XCB 提供了一個結構來儲存這些屬性，例如前景和背景顏色、線條寬度、字型等。

以下是一些關鍵屬性：

前景和背景顏色：用於繪圖的顏色。前景顏色通常用於繪製形狀，而背景顏色則用於清除區域。
線條屬性：包括線條寬度、線條樣式（實心、虛線等）以及線條末端和交點的樣式。
字型：用於文字渲染的字型。
功能：定義如何在繪製操作中結合畫素值。常見的功能包括 COPY（替換現有畫素值）和 XOR（位元排他或）。
剪裁遮罩：指定一個區域，限制繪製操作的範圍。任何超出這個區域的部分都不會受到繪製操作影響。

以下是一個使用 GC 的簡單範例：

// 假設我們已經有與 X 伺服器的連線和一個視窗 (drawable)
xcb_connection_t* connection;
xcb_drawable_t window;

// 建立一個繪圖上下文
xcb_gcontext_t gc = xcb_generate_id(connection);
xcb_create_gc(connection, gc, window, XCB_GC_FOREGROUND | XCB_GC_GRAPHICS_EXPOSURES, values);

// 設定前景顏色為黑色
uint32_t values[1] = { 0x000000 };

// 使用建立好的繪圖上下文繪製一條線
xcb_point_t points[] = { {10, 10}, {50, 50} };
xcb_poly_line(connection, XCB_COORD_MODE_ORIGIN, window, gc, 2, points);

安裝與編譯 XCB 應用程式

要在 Raspberry Pi 上安裝並編譯 XCB 應用程式，可以使用以下命令：

$ sudo apt -y install xcb
$ sudo apt -y install libc6
$ sudo apt -y install libxcb-util-dev

編譯時可以使用以下命令：

$ gcc -Wall input_file.c -o output_file -lxcb

Mermaid 流程圖示

此圖示展示了建立視窗及設定 GC 的基本流程：

  graph TD;
    A[啟動應用程式] --> B[建立連線];
    B --> C[取得螢幕資訊];
    C --> D[建立 GC];
    D --> E[設定 GC 屬性];
    E --> F[建立視窗];
    F --> G[設定視窗屬性];
    G --> H[顯示視窗];

Mermaid 解說

此流程圖展示了啟動應用程式後的基本步驟：

啟動應用程式後先建立與 X 伺服器的連線。
接著取得螢幕資訊，以便後續操作。
建立一個 GC 用於繪製操作。
設定 GC 的屬性，例如前景顏色和背景顏色。
建立一個新的視窗並設定其屬性。
最終將建立好的視窗顯示在螢幕上。

利用XCB進行圖形化程式設計

在現代Linux系統中，X Windows System（通常簡稱為X）和Wayland是兩個主要的圖形化系統。XCB（X C Binding）是一個用於與X伺服器通訊的C語言函式庫，提供了比Xlib更低層次和更高效的API。以下我們將探討如何使用XCB來建立簡單的圖形化應用程式，並深入瞭解其背後的技術細節。

XCB簡介

XCB是一個輕量級的X協定函式庫，設計目標是提供更高效和更靈活的API。與Xlib不同，XCB使用非同步通訊機制，這使得它在處理大量事件時表現更佳。

基本XCB應用程式

以下是一個簡單的XCB應用程式範例，這個程式會建立一個視窗並在其中繪製兩個矩形。

#include <stdlib.h>
#include <stdio.h>
#include <xcb/xcb.h>

int main() {
    xcb_connection_t *c;
    xcb_screen_t *screen;
    xcb_drawable_t win;
    xcb_gcontext_t foreground;
    xcb_generic_event_t *e;
    uint32_t mask = 0;
    uint32_t values[2];

    // 幾何物件
    xcb_rectangle_t rectangles[] = {
        {10, 50, 40, 20},
        {80, 50, 10, 40}
    };

    // 初始化
    c = xcb_connect(NULL, NULL);
    screen = xcb_setup_roots_iterator(xcb_get_setup(c)).data;

    // 建立黑色（前景）圖形上下文
    win = screen->root;
    foreground = xcb_generate_id(c);
    mask = XCB_GC_FOREGROUND | XCB_GC_GRAPHICS_EXPOSURES;
    values[0] = screen->black_pixel;
    values[1] = 0;
    xcb_create_gc(c, foreground, win, mask, values);

    // 請求我們視窗的ID
    win = xcb_generate_id(c);

    // 建立視窗
    mask = XCB_CW_BACK_PIXEL | XCB_CW_EVENT_MASK;
    values[0] = screen->white_pixel;
    values[1] = XCB_EVENT_MASK_EXPOSURE;
    xcb_create_window(c,
                      XCB_COPY_FROM_PARENT,
                      win,
                      screen->root,
                      0, 0,
                      150, 150,
                      10,
                      XCB_WINDOW_CLASS_INPUT_OUTPUT,
                      screen->root_visual,
                      mask, values);

    // 在螢幕上顯示視窗
    xcb_map_window(c, win);
    xcb_flush(c);

#### 內容解密：
在這段程式碼中，我們首先連線到X伺服器並取得第一個螢幕。接著，我們建立了一個黑色的圖形上下文（GC），這個GC將用於繪製矩形。然後，我們請求一個視窗ID並建立視窗。最後，我們在螢幕上顯示視窗並重新整理請求。

```mermaid
graph TD
A[連線到X伺服器] --> B[取得螢幕]
B --> C[建立GC]
C --> D[請求視窗ID]
D --> E[建立視窗]
E --> F[顯示視窗]
F --> G[重新整理請求]

此圖示展示了程式的基本流程：從連線到X伺服器開始，經過取得螢幕、建立圖形上下文、請求視窗ID、建立視窗、顯示視窗，最後重新整理請求。

// 啟動事件-請求迴圈
while ((e = xcb_wait_for_event(c))) {
    switch (e->response_type & ~0x80) {
        case XCB_EXPOSE: {
            // 繪製矩形
            xcb_poly_rectangle(c, win, foreground, 2, rectangles);
            xcb_flush(c);
            break;
        }
        default: {
            // 未知事件型別，忽略它
            break;
        }
    }
    free(e);
}

// 清理
xcb_disconnect(c);
return 0;
}

內容解密：

在這段程式碼中，我們進入了事件-請求迴圈。當接收到EXPOSE事件時，表示視窗已經暴露並在螢幕上顯示。我們會繪製兩個矩形並重新整理請求。對於其他未知事件型別，我們會忽略它們。最終，我們會斷開與X伺服器的連線並結束程式。

鍵盤與滑鼠事件處理

除了繪製圖形外，XCB還可以處理鍵盤和滑鼠事件。以下是一個範例程式碼，展示如何報告滑鼠按鍵按壓和移動事件。

void print_modifiers(uint32_t mask) {
    const char **mod, *mods[] = {
        "Shift", "Lock", "Ctrl", "Alt",
        "Mod2", "Mod3", "Mod4", "Mod5",
        "Button1", "Button2", "Button3", "Button4", "Button5"
    };
    printf("Modifier mask: ");
    for (mod = mods; mask; mask >>= 1, mod++) {
        if (mask & 1) {
            printf("%s ", *mod);
        }
    }
    putchar('\n');
}

int main() {
   // ... (與前面範例相同)

   // 建立視窗時設定事件遮罩
   mask = XCB_CW_BACK_PIXEL | XCB_CW_EVENT_MASK;
   values[0] = screen->white_pixel;
   values[1] = XCB_EVENT_MASK_EXPOSURE |
               XCB_EVENT_MASK_BUTTON_PRESS |
               XCB_EVENT_MASK_BUTTON_RELEASE |
               XCB_EVENT_MASK_POINTER_MOTION |
               XCB_EVENT_MASK_ENTER_WINDOW |
               XCB_EVENT_MASK_LEAVE_WINDOW |
               XCB_EVENT_MASK_KEY_PRESS |
               XCB_EVENT_MASK_KEY_RELEASE;

   // ... (與前面範例相同)

   while ((e = xcb_wait_for_event(c))) {
       switch (e->response_type & ~0x80) {
           case XCB_BUTTON_PRESS: {
               printf("Button press at (%d, %d)\n",
                      ((xcb_button_press_event_t*)e)->event_x,
                      ((xcb_button_press_event_t*)e)->event_y);
               print_modifiers(((xcb_button_press_event_t*)e)->state);
               break;
           }
           case XCB_MOTION_NOTIFY: {
               printf("Motion notify at (%d, %d)\n",
                      ((xcb_motion_notify_event_t*)e)->event_x,
                      ((xcb_motion_notify_event_t*)e)->event_y);
               print_modifiers(((xcb_motion_notify_event_t*)e)->state);
               break;
           }
           default: {
               break;
           }
       }
       free(e);
   }

   // 清理
   xcb_disconnect(c);
   return 0;
}

內容解密：

在這段程式碼中，我們首先定義了一個函式print_modifiers來列印修飾鍵狀態。然後在主函式中，當建立視窗時設定了多種事件遮罩（例如按鍵按壓、按鍵釋放、指標移動等）。在事件迴圈中，我們處理了按鍵按壓和指標移動事件，並列印預出滑鼠位置和修飾鍵狀態。

未來趨勢與技術選型

隨著Wayland逐漸取代X Windows System成為主流圖形化系統，未來可能會有越來越多的應用程式轉向Wayland。然而，對於現有的根據X的應用程式來說，Wayland提供了一個轉換層Wayland（wayland-egl），這使得開發者可以逐步轉換而不需要完全重寫應用程式。

在技術選型方面，如果需要高效且靈活的圖形化API，XCB是一個不錯的選擇。然而，如果需要更高層次的抽象和跨平台支援，則可以考慮使用GTK或Qt等工具包。

資源管理與效能最佳化

在實務應用中，資源管理和效能最佳化是至關重要的。例如，在建立大量視窗或處理大量事件時，應注意避免資源洩漏和效能瓶頸。可以考慮使用雙緩衝技術來提高繪製效率。

錯誤教訓

在實務開發中，玄貓遇到過一些錯誤教訓。例如，初次學習XCB時經常因為錯誤處理未知事件而導致程式當機。因此，玄貓強調在實務開發中必須仔細處理每種可能的事件型別。

總結來說，利用XCB進行圖形化程式設計需要深入理解其底層機制和事件處理流程。透過合理的技術選型和最佳化措施，能夠大大提升應用程式的效能和穩定性。

玄貓

技術愛好者，專注於分享程式開發、雲端技術與 AI 應用的心得體會。