Qt 2D绘图函数QPainter类基本用法（绘制图片、直线、填充颜色的矩形）（自定义QWidget边框和任意形状）

Qt中绘制2D图形最核心的一个类是QPainter。类QPainter是在设备类QPaintDevice上绘制几何图形（包括直线、曲线、圆形、弧形、矩形等等），其中设备类QPaintDevice的子类又有QWidget、QImage、QPictrue、QPixmap、QOpenGLPaintDevice等，也即是说，我们可以继承这些类，通过重写QPaintEvent事件进行重绘，或者用事件过滤器捕获QPaintEvent事件信息进行响应重绘也行。

一、原理讲解

本文主要总结用类QPainter绘制直线、矩形、图片。其中，绘制直线用画笔类QPen，绘制矩形不但用单画笔类QPen，还要用到画刷类QBrush，绘制图片需要用类QPixmap。

QPen：绘制几何图形边缘的线段颜色、线段宽度、线段各种类型（点画线、虚线、solid实体线段）等等；

QBrush：填充几何图形的调色板，由颜色和填充风格组成。

QPixmap：加载图片资源，一般是较小的图片。如果图片很大，可以用QImage，然后通过QPixmap::fromImage(QImage *)进行加载；

1.1绘制直线

绘制直线用到函数QPainter::drawLine(QPoint，QPoint)，步骤如下：

a1：先设置画笔QPen线段颜色、线段宽度、线段类型；

a2：确定绘制直线的起点和终点；

a3：初始化QPainter，设置画笔QPen，然后调用函数QPainter::drawLine()进行直线绘制；

核心代码如下：

#include <QPen>
#include <QPoint>
#include <QPaintEvent>

void QCustomWidget::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    //绘图前准备画笔、画刷
    QPen pen; //画笔。绘制图形边线，由颜色、宽度、线风格等参数组成
    pen.setColor(QColor(255,0,0,255));    
    QPainter painter(this);   //可在QPaintDevice上绘制各种图形。QPaintDevice有之类QWidget、QImage、QOpenGLPaintDevice等
    painter.setPen(pen);    
    painter.drawLine(QPoint(0,0),QPoint(this->rect().width()-50,0));   //QPainter绘制直线
}

1.2绘制矩形

绘制矩形用到核心函数为QPainter::drawRect()，步骤如下：

a1：先设置画笔QPen线段颜色、线段宽度、线段类型，也就是矩形的边框；

a2：接着确定画刷QBrush的填充颜色和填充类型；初始化是，要设置填充颜色和填充类型（QBrush::setStyle(Qt::SolidPattern);），否则画刷填充失败！！！

a3：确定绘制矩形的起点、终点、宽度、高度；

a3：初始化QPainter，设置画笔QPen和画刷QBrush，然后调用函数QPainter::drawRect()绘制矩形；

核心代码如下：

void QCustomWidget::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    //绘图前准备画笔、画刷
    QPen pen; //画笔。绘制图形边线，由颜色、宽度、线风格等参数组成
    pen.setColor(QColor(255,0,0,255));
    QBrush brush;   //画刷。填充几何图形的调色板，由颜色和填充风格组成
    brush.setColor(QColor(0,255,0,120));
    brush.setStyle(Qt::SolidPattern);
    QPainter painter(this);   //可在QPaintDevice上绘制各种图形。QPaintDevice有之类QWidget、QImage、QOpenGLPaintDevice等
    painter.setPen(pen);
    painter.setBrush(brush);
    painter.drawRect(50,50,200,100);
}

1.3绘制图像

绘制图像用到核心函数为QPainter::drawPixmap()，步骤如下：

a1：实例一个QPixmap对象，然后加载一幅图片；

a2：调用函数QPainter::drawPixmap()进行图片绘制；

核心代码如下：

void QCustomWidget::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);  

    QPainter painter(this);   //可在QPaintDevice上绘制各种图形。QPaintDevice有之类QWidget、QImage、QOpenGLPaintDevice等
    
    //绘制图片
    QPixmap pixmap;
    pixmap.load((QString(":/resource/image/向右箭头.jpg")));
    painter.drawPixmap(rect().width()-50,0,50,50,pixmap);
}

二、完整实例代码工程

该工程是一个完整的实例，功能包括用QPainter绘制直线、绘制和填充矩形、绘制图片、实时输出窗口QWIdget大小和最大化时的窗口大小尺寸。其中，所有功能都封装在继承QWidget的类QCustomWidget，只要调用QWidget一样调用类QCustomWidget就行。

2.1新建一个类名为QCustomWidget，分别在qcustomwidget.h、qcustomwidget.cpp中添加如下代码

qcustomwidget.h

#ifndef QCUSTOMWIDGET_H
#define QCUSTOMWIDGET_H

#include <QWidget>

class QCustomWidget : public QWidget
{
    Q_OBJECT
public:
    explicit QCustomWidget(QWidget *parent = nullptr);

signals:

protected:
    void paintEvent(QPaintEvent *event);

public slots:
};

#endif // QCUSTOMWIDGET_H

 

qcustomwidget.cpp

#include "qcustomwidget.h"

#include <QPen>
#include <QBrush>
#include <QPoint>
#include <QPixmap>
#include <QPainter>
#include <QDebug>

QCustomWidget::QCustomWidget(QWidget *parent) : QWidget(parent)
{
    this->resize(960,640);
//    this->setWindowFlag(Qt::FramelessWindowHint);   //设置无边框
}

void QCustomWidget::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    //绘图前准备画笔、画刷
    QPen pen; //画笔。绘制图形边线，由颜色、宽度、线风格等参数组成
    pen.setColor(QColor(255,0,0,255));
    QBrush brush;   //画刷。填充几何图形的调色板，由颜色和填充风格组成
    brush.setColor(QColor(0,255,0,120));
    brush.setStyle(Qt::SolidPattern);
    QPainter painter(this);   //可在QPaintDevice上绘制各种图形。QPaintDevice有之类QWidget、QImage、QOpenGLPaintDevice等
    painter.setPen(pen);
    painter.setBrush(brush);
    painter.drawLine(QPoint(0,0),QPoint(this->rect().width()-50,0));   //QPainter绘制直线
    painter.drawRect(50,50,200,100);

    //绘制图片
    QPixmap pixmap;
    pixmap.load((QString(":/resource/image/向右箭头.jpg")));
    painter.drawPixmap(rect().width()-50,0,50,50,pixmap);

    qDebug()<<rand();
}

 

2.2调用代码如下

QCustomWidget *customWidget=new QCustomWidget;
customWidget->show();

 

2.3程序运行结果图如下

最大化前

最大化后

 

拖拽图片

 

 

参考内容：

https://www.cnblogs.com/lifexy/p/9203929.html（参考：QPainter用法详解）

https://www.cnblogs.com/lifan3a/articles/8629412.html（参考：Qt显示图片四种方法、gif、jpg、png）

https://www.cnblogs.com/MakeView660/p/11225445.html（参考：QPainter绘制图片QPixmap、平铺图片）