文章目錄

• 基礎知識
• 基本繪制和填充
• 繪制文字
• • 代碼
  • 效果
• 繪制路徑
• • 代碼
  • 效果
• 繪制圖像
• • 四種常見的繪制圖像的方法
  • 代碼
  • 效果
  • 雙緩沖繪圖
  • • 效果顯示

基礎知識

• 主要的三個類
  • QPainter
    • QWidget
    • QPixmap
    • QPicture
    • QPrinter
    • QOpenGLPaintDevice
  • QPainterDevice
  • QPainterEngine

三者關系圖

基本繪制和填充

繪圖系統由QPainter完成具體的繪制操作，QPainter可以繪制一切想要的圖形，QPainter可以在繼承自QPainterDevice類的任何對象上進行繪制操作

Qt 之圖形（QPainter 的基本繪圖） 看這里

繪制文字

可參考Qt 之圖形（繪制文本）

代碼

	QPainter painter(this);QRectF rect(10.0, 10.0, 380.0, 280.0);painter.setPen(Qt::red);painter.drawRect(rect);painter.setPen(Qt::blue);painter.setPen(Qt::blue);painter.drawText(rect, Qt::AlignHCenter, QStringLiteral("你好"));painter.drawText(rect, Qt::AlignLeft, QStringLiteral("左對齊"));painter.drawText(rect, Qt::AlignRight, QStringLiteral("右對齊"));painter.drawText(rect, Qt::AlignVCenter, QStringLiteral("中間左側對齊"));painter.drawText(rect, Qt::AlignBottom, QStringLiteral("底部對齊"));painter.drawText(rect, Qt::AlignCenter, QStringLiteral("中間對齊"));painter.drawText(rect, Qt::AlignBottom | Qt::AlignRight, QStringLiteral("底部 | 右側對齊"));

效果

繪制路徑

詳細看這里Qt 之圖形（QPainterPath）

代碼

	QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);painter.setPen(Qt::red);QPainterPath path;path.moveTo(50, 250);path.lineTo(50, 230);path.cubicTo(QPointF(105, 40), QPointF(115, 80), QPointF(120, 60));path.lineTo(130, 130);path.addEllipse(QPoint(130, 130), 30, 30);painter.setBrush(Qt::red);painter.drawPath(path);path.translate(200, 0);painter.setPen(Qt::darkBlue);painter.drawPath(path);

效果

繪制圖像

四種常見的繪制圖像的方法

代碼

	QPainter painter;//繪制imageQImage image(100, 100, QImage::Format_ARGB32);painter.begin(&image);painter.setPen(QPen(Qt::green, 3));painter.setBrush(Qt::yellow);painter.drawRect(10, 10, 60, 60);painter.drawText(10, 10, 60, 60, Qt::AlignCenter, QStringLiteral("QImage"));painter.setBrush(QColor(0, 0, 0, 100));painter.drawRect(50, 50, 40, 40);painter.end();//繪制pixmapQPixmap pix(100, 100);painter.begin(&pix);painter.setPen(QPen(Qt::green, 3));painter.setBrush(Qt::yellow);painter.drawRect(10, 10, 60, 60);painter.drawText(10, 10, 60, 60, Qt::AlignCenter, QStringLiteral("QPixmap"));painter.setBrush(QColor(0, 0, 0, 100));painter.drawRect(50, 50, 40, 40);painter.end();//繪制bitmapQBitmap bit(100, 100);painter.begin(&bit);painter.setPen(QPen(Qt::green, 3));painter.setBrush(Qt::yellow);painter.drawRect(10, 10, 60, 60);painter.drawText(10, 10, 60, 60, Qt::AlignCenter, QStringLiteral("QBitmap"));painter.setBrush(QColor(0, 0, 0, 100));painter.drawRect(50, 50, 40, 40);painter.end();//繪制pictureQPicture picture;painter.begin(&picture);painter.setPen(QPen(Qt::green, 3));painter.setBrush(Qt::yellow);painter.drawRect(10, 10, 60, 60);painter.drawText(10, 10, 60, 60, Qt::AlignCenter, QStringLiteral("QPicture"));painter.setBrush(QColor(0, 0, 0, 100));painter.drawRect(50, 50, 40, 40);painter.end();painter.begin(this);painter.drawImage(50, 20, image);painter.drawPixmap(200, 20, pix);painter.drawPixmap(50, 170, bit);painter.drawPicture(200, 170, picture);

效果

雙緩沖繪圖

### 代碼
在頭文件加入

private:QPixmap pix;QPixmap tempPix;QPoint startPoint;QPoint endPoint;//是否正在繪圖的標志bool isDrawing;protected:void mousePressEvent(QMouseEvent *event);void mouseMoveEvent(QMouseEvent *event);void mouseReleaseEvent(QMouseEvent *event);void paintEvent(QPaintEvent *event);

在cpp文件加入

void ch10_4_1::mousePressEvent(QMouseEvent *event)
{if (event->button() == Qt::LeftButton){startPoint = event->pos();isDrawing = true;}
}void ch10_4_1::mouseMoveEvent(QMouseEvent *event)
{if (event->button() & Qt::LeftButton){endPoint = event->pos();tempPix = pix;update();}
}void ch10_4_1::mouseReleaseEvent(QMouseEvent *event)
{if (event->button() == Qt::LeftButton){endPoint = event->pos();isDrawing = false;update();}
}void ch10_4_1::paintEvent(QPaintEvent *event)
{int x = startPoint.x();int y = startPoint.y();int width = endPoint.x() - x;int height = endPoint.y() - y;QPainter painter;painter.begin(&tempPix);painter.drawRect(x, y, width, height);painter.end();painter.begin(this);painter.drawPixmap(0, 0, tempPix);if (! isDrawing){pix = tempPix;}
}

其中的ch10_4_1為類名

這里先在臨時緩沖區進行繪圖，然后將其繪制到界面上，最后判斷是否已經完成繪圖，如果是，則將臨時緩沖區內容復制到緩沖區中，這樣就完成了整個矩形的繪制

如果想實現Windows桌面上的拖動鼠標出現的橡皮筋選擇框，可以使用QRubberBand類來實現橡皮筋線。

效果顯示

總結

以上是生活随笔為你收集整理的QT 2D绘图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。