Qt 2D 繪圖入門：QPainter 核心架構與基本繪圖實戰

進入 Qt 2D 繪圖領域，核心在於理解 QPainter、QPaintDevice、QPaintEngine 三位一體的架構設計。本文帶你從零構建第一個繪圖視窗，掌握基本圖形繪製與畫筆/畫刷設定。

繪圖系統三大核心類別

• QPainter：執行繪圖操作的「畫師」，保存筆刷、字型、轉換矩陣等狀態
• QPaintDevice：二維繪圖面的抽象基類，子類包括 QWidget (螢幕)、QImage (離屏)、QPixmap、QPrinter (列印)
• QPaintEngine：底層繪圖引擎介面，負責將 QPainter 指令轉換為特定設備指令，**通常對開發者透明**

第一個繪圖視窗：重寫 paintEvent()

// paintedwidget.h
class PaintedWidget : public QWidget {
    Q_OBJECT
public:
    PaintedWidget(QWidget *parent = nullptr);
protected:
    void paintEvent(QPaintEvent *event) override;
};

// paintedwidget.cpp
PaintedWidget::PaintedWidget(QWidget *parent) : QWidget(parent) {
    resize(800, 600);
    setWindowTitle(tr("Paint Demo"));
}

void PaintedWidget::paintEvent(QPaintEvent *event) {
    QPainter painter(this);  // 綁定到此 QWidget (QPaintDevice)
    
    // 1. 畫直線 (預設黑色、實線、寬度 1)
    painter.drawLine(80, 100, 650, 500);
    
    // 2. 設定紅色畫筆畫矩形
    painter.setPen(Qt::red);
    painter.drawRect(10, 10, 100, 400);
    
    // 3. 綠色寬筆 + 藍色填充畫橢圓
    painter.setPen(QPen(Qt::green, 5));
    painter.setBrush(Qt::blue);
    painter.drawEllipse(50, 150, 400, 200);
}

main() 入口

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    PaintedWidget w;
    w.show();
    return app.exec();
}

關鍵概念解析

QPainter 是狀態機

setPen()、setBrush()、setFont()、setTransform() 等設定會影響**後續**所有繪圖指令，直到再次變更或銷毀。

繪圖座標系統

• 原點 (0,0) 位於裝置左上角
• X 向右、Y 向下為正
• 單位為**裝置像素** (螢幕) 或 **1/72 英吋** (印表機)

常用 draw*() 函數族

畫筆 QPen 與畫刷 QBrush 詳解

// QPen 建構式: 顏色、寬度、線型、端點樣式、連接樣式
QPen pen(Qt::black, 3, Qt::DashDotLine, Qt::RoundCap, Qt::RoundJoin);
painter.setPen(pen);

// QBrush: 純色、漸層、紋理圖案
painter.setBrush(Qt::yellow);                    // 純色
painter.setBrush(QBrush(QColor(255,0,0,128)));  // 半透明紅
painter.setBrush(QBrush(QPixmap("pattern.png"))); // 紋理填充

效能與最佳實踐

1. 所有繪圖必須在 paintEvent() 內進行，否則結果未定義
2. QPainter 建立在堆疊上，析構時自動 end()，無需手動管理
3. 複雜場景考慮 QPicture 或 QGraphicsView (後續章節介紹)
4. 啟用反鋸齒：painter.setRenderHint(QPainter::Antialiasing) — 下篇詳細講解

掌握 QPainter 基礎，你已能繪製任意 2D 圖形。下一步將探討反鋸齒、座標變換與進階繪圖技巧。