【QT】QPainter的使用

1、绘制自定义控件

1.1 QPaintEvent绘图事件

\quadQPaintEvent是Qt框架中一个重要的事件类，专门用于处理绘图事件。当Qt视图组件需要重绘自己的一部分时，就会产生QPaintvent 事件，这通常发生在以下几种情况:
1.窗口第一次显示时:当窗口或控件第一次出现在屏幕上时，系统会生成一个 0Paintevent 事件，通如窗口进行自身的绘制,
2.窗口大小改变时:当用户改变窗口的大小时，窗口的内容通常需要重新绘制以适应新的尺寸，
3.窗口部分被遮挡后又垂新显示时:如果窗口被其他窗口远挡，然后又重新露出来，被遮挡的部分通常需要重新绘制。
4.手动请求重绘:通过调用 QWidget的update()或repaint() 方法，可以手动触发重绘事件，
\quad在 Qt 应用程序中，通常通过重写 QWidget 的 paintEvent(QPaintEvent *)方法来处理绘制逻辑。例如:

class widget : public QWidget {protected:void paintEvent(QPaintEvent *event) override {Qpainter painter(this);// 绘制逻辑        }
};

\quad在 paintEvent 方法中，您可以创建一个 QPainter对象并使用它来执行绘制操作。QPainter 可以绘制各种基本图形，如线条、矩形、椭圆等，还可以绘制文本和图像，重写 paintEvent 是在 Qt中进行自定义绘制的标准做法。

示例代码：

// widget.h
#ifndef WIDGET_H
#define WIDGET_H#include <QTimer>
#include <QWidget>QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();protected:void paintEvent(QPaintEvent *event) override;private slots:void on_pushButton_clicked();private:Ui::Widget *ui;QTimer *m_timer;
};
#endif // WIDGET_H// widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QDebug>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);m_timer = new QTimer();connect(m_timer, &QTimer::timeout, this, [=](){// 手动请求重绘
//        update();repaint();});m_timer->setInterval(1000);m_timer->start();
}Widget::~Widget()
{delete ui;
}void Widget::paintEvent(QPaintEvent *event)
{static int i = 0;qDebug()<<"paintEvent:"<<i++;
}void Widget::on_pushButton_clicked()
{// 手动请求重绘update();
}

1.2 QPainter画家

1.2.1 概述

QPainter 是 Qt 库中用于在屏幕上进行绘画的类。它提供了各种绘制功能，比如画线、画图形、画文本等。
以下是一些基本的用法示例:
1.初始化 QPainter:首先，您需要一个QPaintDevice，比如一个 QWidget 或 QPixmap，然后使用它来切始化 QPainter 对象

QPainter painter(this)://假设在 QWidget 的子类中

设置画笔和画刷:您可以设置画笔(用于描边)和画刷(用于填充)的颜色、样式等

painter.setPen(Qt::blue);    // 设置画笔颜色为蓝色
painter.setBrush(Qt::yellow);//设置画刷颜色为黄色

绘制图形:使用 QPainter 的方法来绘制线条、矩形、圆形、文本等

painter.drawLine(10, 10, 100, 100);//画线
painter.drawRect(10, 10, 100, 100);//画矩形
painter.drawText(10, 10,"He11o，Qt!")://画文本

结束绘制:完成给制后，QPainter对象会在其析构函数中自动结束绘制。

\quad请注意，QPainter 的使用依赖于 Qt的事件循环，因此通常在 QWidget 的 paintevent 或者类似的事件处理中使用它。如果您在 Qt 应用程序中使用QPainter，请确保您避循 Qt的事件驱动机制。

示例代码：

// widget.h
#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();protected:void paintEvent(QPaintEvent *event) override;private:Ui::Widget *ui;
};
#endif // WIDGET_H// widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QPainter>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);
}Widget::~Widget()
{delete ui;
}void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);QPen pen(Qt::green, 5);painter.setPen(pen); // 设置画笔
//    painter.setPen(Qt::blue);painter.setFont(QFont("Arial", 24));// 画文本
//    void QPainter::drawText(const QPoint &position, const QString &text)painter.drawText(QPoint(0, 24), "绘制文本");
//    void QPainter::drawText(int x, int y, const QString &text)painter.drawText(0, 24 * 2 + 10, "666");
//    void QPainter::drawText(const QRect &rectangle, int flags, const QString &text, QRect *boundingRect = nullptr)painter.drawText(rect(), Qt::AlignCenter, "你好\n世界");// 画线
//    void drawLine(const QLine &line)painter.drawLine(QLine(10, 100, 200, 100));
//    void drawLine(int x1, int y1, int x2, int y2)painter.drawLine(10, 120, 200, 120);
//    void drawLine(const QPoint &p1, const QPoint &p2)painter.drawLine(QPoint(10, 140), QPoint(200, 140));// 画矩形
//    void drawRect(int x, int y, int width, int height)painter.drawRect(0, 170, 100, 50);
//    void drawRect(const QRect &rectangle)QRect rect(10, 240, 110, 60);painter.drawRect(rect);// 画圆形
//    void drawEllipse(const QRect &rectangle)painter.drawEllipse(rect);
//    void drawEllipse(int x, int y, int width, int height)painter.drawEllipse(300, 360, 100, 100); //int x, int y：矩形左上角坐标 width height:直径
//    void drawEllipse(const QPoint &center, int rx, int ry)painter.drawEllipse(QPoint(300, 360), 100, 80); // center:原心  int rx, int ry：半径// 画弧形QRect rect2(400, 10, 100, 100);painter.drawRect(rect2);painter.drawArc(rect2, 45*16, 135*16);// 画扇形painter.drawPie(400, 100, 100, 100, 30*16, 120*16);
}

现象：如上代码绘制

1.2.2 渐变色

1.2.2.1 线性渐变

\quadQLinearGradient 是Qt框架中用于创建线性渐变的类，线性渐变是一种从一个颜色平滑过演到另一个颜色的效果，其变化沿着两个点之间的直线进行。这种渐变在图形用户界面设计中非常常见，用于添加深度、立体感或动态效果。

基本用法
要使用QLinearGradient，你需要执行以下几个基本步豫:
1.创建 QLinearGradient 对象:指定渐变的起点和终点坐标。
2.设置颜色停靠点:在渐变线上定义颜色和相应的位置,
3.使用渐变创建 QBrush:用 QLinearGradient 对象来创建一个 QBrush，然后用它在 QPainter 中进行绘制。

示例代码

#include <QPainter>
#include <QLinearGradient>
void wywidget::paintEvent(gPaintEvent )
{//创建一个 QLinearGradient 对象QLinearGradient linearGradient(0, 0, 100, 100);//起点(0，0)终点(100，100)// 设置颜色停靠点linearGradient.setcolorAt(0.0, Qt::red):// 起点颜色linearGradient.setcolorAt(1.0，Qt::blue);// 终点颜色//使用这个渐变创建 QBrushQBrush brush(linearGradient)://使用 QBrush 进行绘图QPainter painter(this);painter.setBrush(brush);painter.setPen(Qt::NoPen):// 无边框painter.drawRect(this->rect()))://绘制矩形覆盖整个小部件
}

在这个例子中，QLinearGradient 创建了一个从红色到蓝色的渐变，其方向是从小部件的左上角(0,0)到右下角(100,100)。

注意事项：

• QLinearGradient 的颜色变化是沿着两个指定点之间的直线进行的，通过改变这些点的位置，你可以控制渐变的方向和长度
• setColorAt()方法的第一个参数是一个介于0.0和1.0之间的浮点数，表示颜色在渐变线上的位置。0.0 通常对应于起点，1.0对应于终点。
• 你可以设置多个颜色停靠点来创建更复杂的渐变效果，例如，你可以在0,0处设置一种颜色，在 0.5处设置另一种颜色，在 1.0处再设置一种颜色。
• 使用 QLinearGradient 创建的 QBrush 可以用于填充任何形状。包括矩形、椭圆、多边形等。
• 为了获取更好的视觉效果，可以启用 QPainter 的抗锯齿选项(QPainter::Antialiasing)。
• 请注意，当窗口小部件的大小发生变化时，渐变的效果可能也会随之改变，除非你相应地调整渐变的起点和终点坐标或使用其他方法来适应大小变化。

示例代码：

// widget.h
#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();protected:void paintEvent(QPaintEvent *event) override;private:Ui::Widget *ui;
};
#endif // WIDGET_H// widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QPainter>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);
}Widget::~Widget()
{delete ui;
}void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);
//    QLinearGradient linearGradient(0, 0, width(), height()); // 对角线渐变
//    QLinearGradient linearGradient(0, height()/2, width(), height()/2); // x方向渐变QLinearGradient linearGradient(width()/2, 0, width()/2, height()); // y方向渐变linearGradient.setColorAt(0, QColor(255, 0, 0, 200));linearGradient.setColorAt(1.0, QColor(0, 0, 255, 200));QBrush brush(linearGradient);painter.setBrush(brush);painter.drawRect(rect());
}

现象：

1.2.2.2 径向渐变

\quadQRadialGradient 是 Qt框架中用于创建径向渐变的类，径向渐变是一种从中心点向外部辐射的颜色渐变，通常在中心点有一种颜色，而向外围渐渐变化为另一种颜色。这种渐变非常适合用于模拟光源、阴影或创建圆形的立体感

基本用法

要使用 QRadialGradient，你需要执行以下几个基本步家:
1.创建 QRadialGradient 对象:指定渐变的中心点、半径以及焦点(可选)
2.设置颜色停靠点:在径向渐变中定义颜色和对应的位置
3.使用渐变创建 QBrush:利用 QRadialGradient 对象创建一个 QBrush，然后用它在 QPainter 中进行绘制。

示例代码：

#include <QPainter>
#include <QRadialGradient>void wywidget::paintEvent(QPaintEvent *)
{//创建一个 QRadialGradient 对象QRadialGradient radialGradient(50, 50, 50);//中心和半径(50, 50, 50)// 可选:设置集点//radialGradient.setFocalPoint(30, 30);// 设贾颜色停靠点radialGradient.setcolorAt(0.0, Qt::yellow);// 中心颜色radialGradient.setcolorAt(1.0，Qt::black); // 外围颜色// 使用这个渐变创建 QBrushQBrush brush(radialGradient)://使用 QBrush 进行绘图QPainter painter(this);painter.setBrush(brush);painter.setPen(Qt::NoPen)://无边框painter.drawRect(this->rect())://绘制矩形覆盖整个小部件
}

在这个例子中，QRadialGradient 创建了一个从中心的黄色向外围的黑色渐变。渐变的中心和半径都设置在(50,50,50).

注意事项

• setColorAt()方法的第一个参数是一个介于0.0和1.0之间的浮点数，表示颜色在径向渐变中的位置，0.0通常对应于中心点，1.0对应于边缘
• 通过添加多个颜色停靠点，你可以创建更复杂的径向渐变效果。
• setFocalPoint()方法允许你设置焦点位置，这是渐变颜色开始变化的点，可以与中心点不同。
• 使用 QRadialGradient 创建的 QBrush 可以用于填充任何形状，如矩形、椭圆、多边形等，

示例代码：

void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);QRadialGradient radialGradient(200, 200, 100);radialGradient.setColorAt(0.0, QColor(255, 255, 255));radialGradient.setColorAt(1.0, QColor(0, 0, 0));painter.setBrush(QBrush(radialGradient));painter.drawEllipse(QPoint(200, 200), 100, 100); 
}

现象：

1.2.2.3 圆锥形渐变

\quadQConicalGradient 是 Qt框架中用于创建圆锥形渐变的类。圆锥渐变是一种渐变效果，其中颜色沿着圆锥的轮廓变化，类似于旋转颜色轮。这种渐变以其中心点为基点，颜色沿圆周分布，可以创建出富有动感的视觉效果。

基本用法

要使用 QConicalGradient，你通常需要做以下几个步骤:
1.创建 QConicalGradient 对象：指定渐变的中心点和起始角度。
2.设置颜色停靠点：为渐变添加不同的颜色和对应的位置(角度)。
3.使用渐变创建 QBrush：使用这个渐变对象来创建一个 QBrush，然后应用到 QPainter 中进行绘图

示例代码:

#include <QPainter>
#include <QConicalGradient>void Widget::paintEvent(QPaintEvent *)
{// 创建一个 QConicalGradient 对象QConicalGradient conicalGradient(100, 100, 0)://中心点(100，100)，起始角度 0// 添加颜色停靠点conicalGradient.setcolorAt(0.0, Qt::red);conicalGradient.setcolorAt(0.5, Qt::blue):conicalGradient.setcolorAt(1.0, Qt::red);//使用这个渐变创建 QBrushQBrush brush(conicalGradient);// 使用 QBrush 进行绘图QPainter painter(this);painter.setBrush(brush);painter.setPen(Qt::NoPen);//无边框painter.drawRect(this->rect());//绘制矩形覆盘整个小部件
}

\quad在这个例子中，QConicalGradient 被用来创建一个从红色到蓝色再回到红色的渐变。渐变的中心设置在点(100,100)，并且从0度开始旋转。

注意事项

• QConicalGradient 的颜色是沿着圆周分布的，其中 0,0和 1.0 在圆周上是相同的位置。
• 你可以通过添加多个颜色停靠点来创建更复杂的渐变效果。
• QConicalGradient在使用时，角度是按照顺时针方向测量的，超始点(0度)通常在三点钟方向。
• 为了达到最佳的渲染效果，可以启用 QPainter 的抗锯齿渲染提示(QPainter::Antialiasing)。
• QConicalGradient 非常适合用于创建施转或动态效果的图形，例如加载指示器、进度条或任何需要圆周颜色变化的场景。

示例代码：

void Widget::paintEvent(QPaintEvent *event)
{QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);QConicalGradient conicalGradient(200, 200, 100);conicalGradient.setColorAt(0.0, QColor(255, 0, 0));conicalGradient.setColorAt(0.5, QColor(0, 255, 0));conicalGradient.setColorAt(1.0, QColor(0, 0, 255));painter.setPen(Qt::NoPen);painter.setBrush(QBrush(conicalGradient));painter.drawEllipse(QPoint(200, 200), 100, 100);
}

现象：

加了painter.setPen(Qt::NoPen); 取消描边

未加 painter.setPen(Qt::NoPen); 有描边