QT5 QPainter 自定义绘图

最新推荐文章于 2025-06-16 15:43:30 发布

原创最新推荐文章于 2025-06-16 15:43:30 发布 · 737 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#c++ #qt

c++ 同时被 2 个专栏收录

5 篇文章

订阅专栏

1 篇文章

订阅专栏

QT QPainter 绘图
一、基本绘图类：
Qt 中提供了强大的 2D 绘图系统，可以使用相同的 API 在屏幕和绘图设备上进行绘制，它主要基于QPainter、QPaintDevice 和 QPaintEngine 这三个类。

QPainter 用于执行绘图操作，其提供的 API 在 GUI 或 QImage、QOpenGLPaintDevice、QWidget 和QPaintDevice 显示图形（线、形状、渐变等）、文本和图像。
QPaintDevice 不直接绘制物理显示画面，而利用逻辑界面的中间媒介。例如，绘制矩形图形时，为了将对象绘制到 QWidget、QGLPixelBuffer、QImage、QPixmap、QPicture 等多种界面中间，必须使用 QPaintDevice。
QPaintEngine 提供了一些接口，可用于 QPainter 在不同的设备上进行绘制。
绘图系统由 QPainter 完成具体的绘制操作，QPainter 类提供了大量高度优化的函数来完成 GUI 编程所需要的大部分绘制工作。它可以绘制一切想要的图形，从最简单的一条直线到其他任何复杂的图形，例如：点、线、矩形、弧形、饼状图、多边形、贝塞尔弧线等。此外，QPainter 也支持一些高级特性，例如反走样（针对文字和图形边缘）、像素混合、渐变填充和矢量路径等，QPainter 也支持线性变换，例如平移、旋转、缩放。

QPainter 可以在继承自 QPaintDevice 类的任何对象上进行绘制操作。QPainter 也可以与 QPrinter 一起使用来打印文件和创建 PDF 文档。这意味着通常可以用相同的代码在屏幕上显示数据，也可以生成打印形式的报告。

QPainter 一般在部件的绘图事件 paintEvent() 中进行绘制，首先创建 QPainter 对象，然后进行图形的绘制，最后记得销毁 QPainter 对象。当窗口程序需要升级或者重新绘制时，调用此成员函数。使用 repaint()和 update() 后，调用函数 paintEvent()。

绘图事件：

void wiget::paintEvent(QPaintEvent *event)
{ 
}

QPainter只能在paintEvent中进行绘图。paintEvent事件在窗口刷新时触发，如最大化最小化，拖动窗口边缘时也会触发。

主要属性：
(1) QPen：控制线条颜色宽度线性。

(2) QBrush：设置一个区域的填充特性。

(3) QFont：用于绘制文字。

(4) QPixmap: 绘制图片，适合小图片。

(5) QImage: 绘制图片，适合大图片。

(6) QBitmap: QPixmap的一个子类，单通道图。

(7) QPicture: 一张画布，可以用于保存、读取Qpainter的绘图。

(8)QPrinter类是一个在打印机上绘制的绘图设备。它允许你将图形输出到打印机，生成打印预览，或者直接生成PDF文件。

基本图形绘制函数：
drawPoint() //画点

drawLine() //画直线

drawRect() //画矩形

drawArc() //画圆弧

drawEllipse() //画椭圆

drawPie() //画扇形

drawPolygon() //画多边形

drawChord() //画弦

drawRoundedRect() //画圆角矩形

drawPolyline() //画折线

drawConvexPolygon() //画凸多边形

二．重点绘图属性类介绍
1.QFont的一些属性与功能：
QFont是Qt框架中用于描述字体属性的工具类。

设置属性：

//设置属性：
void setFamily(const QString &family);
 
void setPointSize(int size);
 
void setWeight(int weight);
 
void setItalic(bool italic);
 
void setUnderline(bool underline);

获取属性：

//获取属性：
QString family() const;
 
int pointSize() const;
 
int weight() const;
 
bool italic() const;
 
bool underline() const;

2.QPen的一些属性与功能：
主要函数：

//函数原型 功能

void setColor(QColor &color) //设置画笔颜色
 
void setWidth(int width) //设置线条宽度
 
void setStyle(Qt::PenStyle style) //设置线条样式，参数为Qt::PenStyle枚举类型
 
void setCapStyle(Qt::PenCapStyle style) //设置线条端点样式，参数为Qt::PenCapStyle枚举类型
 
void setJoinStyle(Qt::PenJoinStyle style)//设置连接样式，参数为Qt::PenJoinStyle枚举类型属性修

改后，需要使用setPen()来应用于绘图。
（1）线条样式：

void setStyle(Qt::PenStyle style) //设置线条样式，参数为Qt::PenStyle枚举类型


Qt::NoPen //没有画笔，设置此属性时，用画笔不会画出任何东西。但是画刷仍然有效，表现出来就是无边界，但有填充。

Qt::SolidLine //实线

Qt::DashLine //虚线

Qt::DotLine //点状线

Qt::DashDotLine //虚线和点交替

Qt::DashDotDotLine //虚线和双点交替

Qt::CustomDashLine //自定义样式

（2）线条端点样式：

void setCapStyle(Qt::PenCapStyle style) //设置线条端点样式，参数为Qt::PenCapStyle枚举类型

Qt::FlatCap //平顶端点
 
Qt::SquareCap //方形端点
 
Qt::RoundCap //圆形端点

（3）线条连接样式：

void setJoinStyle(Qt::PenJoinStyle style)//设置连接样式，参数为Qt::PenJoinStyle枚举类型属性修改后，需要使用setPen()来应用于绘图。
Qt::BevelJoin //斜切连接

Qt::MiterJoin //直角连接

Qt::RoundJoin //圆连接

3.QBrush的一些属性与功能：
主要函数：

//函数原型 功能

void setColor(QColor &color) //设置画刷颜色

void setStyle(Qt::BrushStyle style) //设置画刷样式

void setTexture(QPixmap &pixmap) //设置一个QPixmap图片作为画刷的图片

void setTextureImage(QImage &image) //设置一个QImage类型的图片作为画刷的图片

（1）基本填充和线性填充：

//枚举常量 描述

Qt::NoBrush //不填充

Qt::SolidPattern //单一颜色填充

Qt::HorPattern //水平线填充

Qt::VerPattern //垂直线填充

（2）渐变填充：

Qt::LinearGradientPattern //线性渐变，需要使用QLinearGradient类对象作为Brush

Qt::RadialGradientPattern //辐射渐变，需要使用QRadialGradient类对象作为Brush

Qt::ConicalGradientPattern //圆锥型渐变，需要使用QConicalGradient类对象作为Brush

Qt::TexturePattern //材质填充，需要指定texture或textureImage图片

4. QPrinter用法
（1）QPrinter printer;

printer.setOutputFormat(QPrinter::PdfFormat); // 设置输出格式为PDF，也可以其他格式

printer.setOutputFileName("output.pdf"); // 设置输出文件名

QPainter painter1(&printer);

painter1.drawText(100, 100, "Hello, PDF1!");

painter1.end(); // 结束绘制，内容将被发送到打印机

（2）注意：
用QPrinter需要添加 QT += printsupport；

当设置QPainter painter1(&printer)后，绘制图形输出到pdf文件，就不会再输出到ui页面上了。

sample8_123QPainter.h  文件

#pragma once
 
#include <QtWidgets/QWidget>
#include "ui_sample8_123QPainter.h"
 
 
 
class sample8_123QPainter : public QWidget
{
    Q_OBJECT
 
public:
    sample8_123QPainter(QWidget *parent = Q_NULLPTR);
 
private:
    Ui::sample8_123QPainterClass ui;
 
 
protected:
    void paintEvent(QPaintEvent *event) Q_DECL_OVERRIDE;//Q_DECL_OVERRIDE 表示这个函数是对父类虚函数的重载
 
    void MyPaint1();//绘制矩形
    
    void MyPaintText();//绘制文本
    
    void MyPaintLine();//绘制直线
    
    void MyPaintArc();//绘制弧线
    
    void MyPaintEllipse();//绘制椭圆
    
    void MyPaintPloygon();//绘制多边形
    
    void MyPaintPicture();//绘制图片
 
    void MyQLinearGradient();//线性渐变
 
    void MyQRadialGradient();//径向渐变
  
};

sample8_123QPainter.cpp  文件

#include "sample8_123QPainter.h"
 
#include    <QPainter>
 
 
sample8_123QPainter::sample8_123QPainter(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);
 
    setPalette(QPalette(Qt::white));//设置窗口为白色背景
    setAutoFillBackground(true);
    this->resize(400, 400);
}
 
void sample8_123QPainter::paintEvent(QPaintEvent *event)
{
    //MyPaint1();//绘制矩形
 
    MyPaintText();//绘制文本
 
}

绘制文本：
//绘制文本
void sample8_123QPainter::MyPaintText()
{
    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");
}

创建一个 QPainter 对象，用于后面的绘制。使用 setPen() 来设置画笔的颜色（淡蓝色）。通过使用 QFont 来构建我们想要的字体，setFamily()设置字体为微软雅黑、setPointSize() 设置点大小30、setItalic() 设置斜体，然后通过 setFont() 来设置字体，最后调用 drawText() 来实现文本的绘制，这里的 rect() 是指当前窗体的显示区域，Qt::AlignCenter 指文本居中绘制。

绘制矩形：

void sample8_123QPainter::MyPaint1()
{
    QPainter painter(this);//创建QPainter对象
    painter.setRenderHint(QPainter::Antialiasing);//
    painter.setRenderHint(QPainter::TextAntialiasing);//
 
    int W = this->width(); //绘图区宽度
    int H = this->height();//绘图区高度
    QRect rect(W / 4, H / 4, W / 2, H / 2);//中间区域矩形框
 
    //设置画笔
    QPen pen;
    pen.setWidth(3);//线宽
    pen.setColor(Qt::red);//划线颜色
 
    //Qt::NoPen,Qt::SolidLine, Qt::DashLine, Qt::DotLine,Qt::DashDotLine,Qt::DashDotDotLine,Qt::CustomDashLine
    pen.setStyle(Qt::DashLine);//线的类型，实线、虚线等
 
    //Qt::FlatCap, Qt::SquareCap,Qt::RoundCap
    pen.setCapStyle(Qt::FlatCap);//线端点样式
 
    //Qt::MiterJoin,Qt::BevelJoin,Qt::RoundJoin,Qt::SvgMiterJoin
    pen.setJoinStyle(Qt::BevelJoin);//线的连接点样式
    painter.setPen(pen);
 
    //设置画刷1
    QBrush  brush;
    brush.setColor(Qt::yellow); //画刷颜色
    brush.setStyle(Qt::SolidPattern); //画刷填充样式
    painter.setBrush(brush);
 
    设置画刷2
    //QPixmap texturePixmap("../sample8_1QPainter/images/texture.jpg");// 
    //QBrush  brush;
    //brush.setStyle(Qt::TexturePattern);//画刷填充样式
    //brush.setTexture(texturePixmap);//设置材质图片
    //painter.setBrush(brush);
 
    //绘图
    //painter.drawLine(rect.left(),rect.top(),rect.right(),rect.bottom());
    //painter.drawRect(rect);//只填充定义的渐变区域
    //painter.drawRect(this->rect()); //填充更大区域，会有延展效果
 
    //painter.fillRect(rect,Qt::red);//只填充定义的渐变区域，用红色填充
    //painter.drawRoundRect(rect);//只填充定义的渐变区域，圆角矩形
    painter.drawRoundedRect(rect,40,20);
}

使用 setPen() 来设置画笔颜色（淡蓝色）、宽度（2 像素），用来设置矩形区域的边框。然后使用setBrush() 来设置画刷颜色（橙色），用来填充矩形区域，最后调用 drawRect() 来实现矩形的绘制，其中参数依次顺序为 x、y、w、h，是指区域从 x 为 50，y 为 50 的坐标点起，宽度为 160，高度为 100 的矩形。

绘制直线：

//绘制直线
void sample8_123QPainter::MyPaintLine()
{
    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() 来设置反走样，要么绘制出来的线条会出现锯齿，调用 setPen() 来设置画笔颜色（淡蓝色）。最后调用 drawLine() 来实现直线的绘制，其中 QPointF(0, height()) 是指直线的起点坐标、QPointF(width() / 2, height() / 2) 是指直线的终点坐标。

绘制弧线：

//绘制弧线
void sample8_123QPainter::MyPaintArc()
{
    //矩形
    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 sample8_123QPainter::MyPaintEllipse()
{
    QPainter painter(this);
 
    //painter.setRenderHint(QPainter::Antialiasing, true);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setRenderHint(QPainter::TextAntialiasing);
 
    int W = this->width(); //绘图区宽度
    int H = this->height();//绘图区高度
    QRect rect(W / 4, H / 4, W / 2, H / 2);//中间区域矩形框
 
    //设置画笔颜色、宽度
    painter.setPen(QPen(QColor(0, 160, 230), 3));
 
    //绘制椭圆
    painter.drawEllipse(QPointF(120, 60), 50, 20);
 
    //设置画刷颜色
    painter.setBrush(QColor(255, 160, 90));
 
    //绘制圆
    painter.drawEllipse(QPointF(120, 140), 40, 40);
 
    //设置画刷颜色
    painter.setBrush(QColor(90, 160, 255));
    painter.drawEllipse(rect);
}

绘制了一个椭圆和一个圆形，都是调用 drawEllipse() 接口，我们可以很轻易的发现，如果为椭圆的时候，后面两个参数不一样，圆形则相同。首先我们来看第一个参数 QPointF 是指椭圆的中心点相对当前窗体 QPoint(0, 0) 点的位置，后面的参数指椭圆的 x 轴及 y 轴的半径。

绘制多边形：

//绘制多边形
void sample8_123QPainter::MyPaintPloygon()
{
    QPainter painter(this);
 
    //反走样
    painter.setRenderHint(QPainter::Antialiasing, true);
 
    //设置画笔颜色
    //painter.setPen(QColor(0, 160, 230));
    //设置画笔颜色、宽度
    painter.setPen(QPen(QColor(0, 160, 230), 3));
 
    //各个点的坐标
    static const QPointF points[4] = { QPointF(30, 40), QPointF(60, 150), QPointF(150, 160), QPointF(220, 100) };
 
    //绘制多边形
    painter.drawPolygon(points, 4);
}

绘制图片：

//绘制图片
void sample8_123QPainter::MyPaintPicture()
{
    QPainter painter(this);
 
    //反走样
    painter.setRenderHint(QPainter::Antialiasing, true);
 
    // 绘制图标
    painter.drawPixmap(rect(), QPixmap("../sample8_1QPainter/images/001.jpg"));//
}

通过 drawPixmap() 来绘制图片，我们可以指定图片绘制的区域 QRect，这里为整个界面的区域，当界面伸缩的时候，图片也会跟着伸缩。

渐变绘制：
1、线性渐变

//线性渐变
void sample8_123QPainter::MyQLinearGradient()
{
    QPainter    painter(this);//创建QPainter对象
    painter.setRenderHint(QPainter::Antialiasing);//
    painter.setRenderHint(QPainter::TextAntialiasing);//
 
    int W = this->width();//绘图区宽度
    int H = this->height();//绘图区高度
    QRect rect(W / 4, H / 4, W / 2, H / 2);//中间区域矩形框
 
    //线性渐变
    //QLinearGradient  linearGrad(rect.left(),rect.top(),rect.right(),rect.bottom()); //对角线
    QLinearGradient  linearGrad(rect.left(), rect.top(), rect.right(), rect.top());//从左到右
    linearGrad.setColorAt(0, Qt::blue);//起点颜色
    linearGrad.setColorAt(0.5, Qt::green);//起点颜色
    linearGrad.setColorAt(1, Qt::red);//终点颜色
    linearGrad.setSpread(QGradient::ReflectSpread);//展布模式
    //QGradient::PadSpread ,QGradient::RepeatSpread, QGradient::ReflectSpread
    painter.setBrush(linearGrad);
 
    //绘图
    painter.drawRect(rect);//只填充定义的渐变区域
    //painter.drawRect(this->rect());//填充更大区域，会有延展效果
}

    //绘图
    painter.drawRect(rect);//只填充定义的渐变区域
    //painter.drawRect(this->rect());//填充更大区域，会有延展效果
  

    //绘图
    //painter.drawRect(rect);//只填充定义的渐变区域
    painter.drawRect(this->rect());//填充更大区域，会有延展效果

2、径向渐变

//径向渐变
void sample8_123QPainter::MyQRadialGradient()
{
    QPainter    painter(this);//创建QPainter对象
    painter.setRenderHint(QPainter::Antialiasing);//
    painter.setRenderHint(QPainter::TextAntialiasing);//
 
    int W = this->width();//绘图区宽度
    int H = this->height();//绘图区高度
    QRect rect(W / 4, H / 4, W / 2, H / 2);//中间区域矩形框
 
    //径向渐变
    QRadialGradient  radialGrad(W / 2, H / 2, qMax(W / 8, H / 8), W / 2, H / 2);
    //radialGrad.setColorAt(0,Qt::white);
    radialGrad.setColorAt(0,Qt::green);
    radialGrad.setColorAt(1,Qt::blue);
    radialGrad.setSpread(QGradient::ReflectSpread);
    //QGradient::PadSpread ,QGradient::RepeatSpread, QGradient::ReflectSpread
    painter.setBrush(radialGrad);
 
    //绘图
    //painter.drawRect(rect);//只填充定义的渐变区域
    painter.drawRect(this->rect());//填充更大区域，会有延展效果
}

3、圆锥形渐变

//圆锥型渐变
void sample8_123QPainter::MyQConicalGradient()
{
    QPainter    painter(this);//创建QPainter对象
    painter.setRenderHint(QPainter::Antialiasing);//
    painter.setRenderHint(QPainter::TextAntialiasing);//
 
    int W = this->width();//绘图区宽度
    int H = this->height();//绘图区高度
    QRect rect(W / 4, H / 4, W / 2, H / 2);//中间区域矩形框
 
    //圆锥型渐变
    QConicalGradient  coniGrad(W/2,H/2,45);
    coniGrad.setColorAt(0,Qt::yellow);
    coniGrad.setColorAt(0.5,Qt::blue);
    coniGrad.setColorAt(1,Qt::green);
    //coniGrad.setSpread(QGradient::PadSpread);//对于锥形渐变不起作用
    painter.setBrush(coniGrad);
 
    //绘图
    painter.drawRect(rect);//只填充定义的渐变区域
    //painter.drawRect(this->rect());//填充更大区域，会有延展效果
}