Qt利用QPainter實現(xiàn)基本繪圖的示例詳解

更新時間：2022年12月12日 11:30:06 作者：音視頻開發(fā)老舅

Qt?中提供了強大的?2D?繪圖系統(tǒng)，可以使用相同的?API?在屏幕和繪圖設備上進行繪制，它主要基于QPainter、QPaintDevice?和?QPaintEngine?這三個類。本文主要和大家介紹一下QPainter實現(xiàn)的基本繪圖，感興趣的可以了解一下

簡述

Qt 中提供了強大的 2D 繪圖系統(tǒng)，可以使用相同的 API 在屏幕和繪圖設備上進行繪制，它主要基于QPainter、QPaintDevice 和 QPaintEngine 這三個類。

QPainter 用于執(zhí)行繪圖操作，其提供的 API 在 GUI 或 QImage、QOpenGLPaintDevice、QWidget 和QPaintDevice 顯示圖形（線、形狀、漸變等）、文本和圖像。
QPaintDevice 不直接繪制物理顯示畫面，而利用邏輯界面的中間媒介。例如，繪制矩形圖形時，為了將對象繪制到 QWidget、QGLPixelBuffer、QImage、QPixmap、QPicture 等多種界面中間，必須使用 QPaintDevice。
QPaintEngine 提供了一些接口，可用于 QPainter 在不同的設備上進行繪制。

繪圖系統(tǒng)由 QPainter 完成具體的繪制操作，QPainter 類提供了大量高度優(yōu)化的函數來完成 GUI 編程所需要的大部分繪制工作。它可以繪制一切想要的圖形，從最簡單的一條直線到其他任何復雜的圖形，例如：點、線、矩形、弧形、餅狀圖、多邊形、貝塞爾弧線等。此外，QPainter 也支持一些高級特性，例如反走樣（針對文字和圖形邊緣）、像素混合、漸變填充和矢量路徑等，QPainter 也支持線性變換，例如平移、旋轉、縮放。

QPainter 可以在繼承自 QPaintDevice 類的任何對象上進行繪制操作。QPainter 也可以與 QPrinter 一起使用來打印文件和創(chuàng)建 PDF 文檔。這意味著通?？梢杂孟嗤拇a在屏幕上顯示數據，也可以生成打印形式的報告。

QPainter 一般在部件的繪圖事件 paintEvent() 中進行繪制，首先創(chuàng)建 QPainter 對象，然后進行圖形的繪制，最后記得銷毀 QPainter 對象。當窗口程序需要升級或者重新繪制時，調用此成員函數。使用 repaint()和 update() 后，調用函數 paintEvent()。

繪制文本

void MainWindow::paintEvent(QPaintEvent *event) { Q_UNUSED(event);
 
    QPainter painter(this);
    // 設置畫筆顏色
    painter.setPen(QColor(0, 160, 230));
 
    // 設置字體：微軟雅黑、點大小50、斜體
    QFont font;
    font.setFamily("Microsoft YaHei");
    font.setPointSize(50);
    font.setItalic(true);
    painter.setFont(font);
 
    // 繪制文本
    painter.drawText(rect(), Qt::AlignCenter, "Qt");
}

首先為該部件創(chuàng)建了一個 QPainter 對象，用于后面的繪制。使用 setPen() 來設置畫筆的顏色（淡藍色）。通過使用 QFont 來構建我們想要的字體，setFamily()設置字體為微軟雅黑、setPointSize() 設置點大小30、setItalic() 設置斜體，然后通過 setFont() 來設置字體，最后調用 drawText() 來實現(xiàn)文本的繪制，這里的 rect() 是指當前窗體的顯示區(qū)域，Qt::AlignCenter 指文本居中繪制。

繪制直線

void MainWindow::paintEvent(QPaintEvent *event) { Q_UNUSED(event);
 
    QPainter painter(this);
    // 反走樣
    painter.setRenderHint(QPainter::Antialiasing, true);
    // 設置畫筆顏色
    painter.setPen(QColor(0, 160, 230));
    // 繪制直線
    painter.drawLine(QPointF(0, height()), QPointF(width() / 2, height() / 2));
}

首先我們通過 setRenderHint() 來設置反走樣，要么繪制出來的線條會出現(xiàn)鋸齒，調用 setPen() 來設置畫筆顏色（淡藍色）。最后調用 drawLine() 來實現(xiàn)直線的繪制，其中 QPointF(0, height()) 是指直線的起點坐標、QPointF(width() / 2, height() / 2) 是指直線的終點坐標。

繪制矩形

void MainWindow::paintEvent(QPaintEvent *event) { Q_UNUSED(event);
 
    QPainter painter(this);
 
    // 反走樣
    painter.setRenderHint(QPainter::Antialiasing, true);
    // 設置畫筆顏色、寬度
    painter.setPen(QPen(QColor(0, 160, 230), 2));
    // 設置畫刷顏色
    painter.setBrush(QColor(255, 160, 90));
    painter.drawRect(50, 50, 160, 100);
}

首先我們使用 setPen() 來設置畫筆顏色（淡藍色）、寬度（2 像素），用來設置矩形區(qū)域的邊框。然后使用setBrush() 來設置畫刷顏色（橙色），用來填充矩形區(qū)域，最后調用 drawRect() 來實現(xiàn)矩形的繪制，其中參數依次順序為 x、y、w、h，是指區(qū)域從 x 為 50，y 為 50 的坐標點起，寬度為 160，高度為 100 的矩形。

繪制弧線

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
 
    // 矩形
    QRectF rect(90.0, 90.0, 80.0, 90.0);
    // 起始角度
    int startAngle = 30 * 16;
    // 跨越度數
    int spanAngle = 120 * 16;
 
    QPainter painter(this);
 
    // 反走樣
    painter.setRenderHint(QPainter::Antialiasing, true);
 
    // 設置畫筆顏色、寬度
    painter.setPen(QPen(QColor(0, 160, 230), 2));
 
    // 繪制弧線
    painter.drawArc(rect, startAngle, spanAngle);
}

畫弧線時，角度被分成了十六分之一，就是說，如果要 30 度，就需是 30*16。它有起始角度和跨度，還有位置矩形，所以，要想畫出自己想要的弧線，就需要大概估算出各個參數的預估值。

繪制橢圓

void MainWindow::paintEvent(QPaintEvent *event) { Q_UNUSED(event);
 
    QPainter painter(this);
 
    // 反走樣
    painter.setRenderHint(QPainter::Antialiasing, true);
 
    // 設置畫筆顏色、寬度
    painter.setPen(QPen(QColor(0, 160, 230), 2));
 
    // 繪制橢圓
    painter.drawEllipse(QPointF(120, 60), 50, 20);
 
    // 設置畫刷顏色
    painter.setBrush(QColor(255, 160, 90));
 
    // 繪制圓
    painter.drawEllipse(QPointF(120, 140), 40, 40);
}

這里我們繪制了一個橢圓和一個圓形，都是調用 drawEllipse() 接口，我們可以很輕易的發(fā)現(xiàn)，如果為橢圓的時候，后面兩個參數不一樣，圓形則相同。首先我們來看第一個參數 QPointF 是指橢圓的中心點相對當前窗體 QPoint(0, 0) 點的位置，后面的參數指橢圓的 x 軸及 y 軸的半徑。

繪制多邊形

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
 
    QPainter painter(this);
 
    // 反走樣
    painter.setRenderHint(QPainter::Antialiasing, true);
 
    // 設置畫筆顏色
    painter.setPen(QColor(0, 160, 230));
 
    // 各個點的坐標
    static const QPointF points[4] = {QPointF(30, 40), QPointF(60, 150), QPointF(150, 160), QPointF(220, 100)};
 
    // 繪制多邊形
    painter.drawPolygon(points, 4);
}

首先，我們定義一個個坐標點的位置，這里有四個點，分別為：QPointF(30, 40)、QPointF(60, 150)、QPointF(150, 160)、 QPointF(220, 100)，然后調用 drawPolygon() 將各個點連接起來，繪制為多邊形。

繪制圖片

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
 
    QPainter painter(this);
 
    // 反走樣
    painter.setRenderHint(QPainter::Antialiasing, true);
 
    // 繪制圖標
    painter.drawPixmap(rect(), QPixmap(":/Images/logo"));
}

通過 drawPixmap() 來繪制圖片，我們可以指定圖片繪制的區(qū)域 QRect，這里為整個界面的區(qū)域，當界面伸縮的時候，圖片也會跟著伸縮。

以上就是Qt利用QPainter實現(xiàn)基本繪圖的示例詳解的詳細內容，更多關于Qt QPainter繪圖的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: