QT绘图
1.概述
这篇文章介绍如何绘图
2.绘图基本操作
创建一个普通的widget类型的项目
在widget.h 文件中重写绘图事件
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE
class Widget : public QWidget
{
Q_OBJECT
public:
Widget(QWidget *parent = nullptr);
~Widget();
// 绘图事件
void paintEvent(QPaintEvent *event);
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);
}
//重写绘画事件
void Widget::paintEvent(QPaintEvent *event)
{
// 实例化绘画对象，这个this指的是在Widget对象中绘画，它不是对象树。
QPainter painter(this);
// 绘制直线
painter.drawLine(QPoint(10,10), QPoint(100,10));
// 画椭圆,第一个参数中心点，第二个参数X轴，第三个参数y轴
painter.drawEllipse(QPoint(100,100),50,80);
// 画圆,第一个参数中心点，第二个参数X轴，第三个参数y轴
painter.drawEllipse(QPoint(200,300),80,80);
// 画矩形 前两个参数是起点位置，后两个参数是长度
painter.drawRect(QRect(10,10,20,30));
// 画文字，第一个参数是x和y的起点位置，第二个参数是显示的文字
painter.drawText(QPoint(30,30),"千里江陵一日还");
}
Widget::~Widget()
{
delete ui;
}
3.设置画笔
设置画笔使用QPen 类提供的函数，首先查看帮助手册，了解他有哪些功能可以设置。
1.设置画笔颜色
// 实例化绘画对象，这个this指的是在Widget对象中绘画，它不是对象树。
QPainter painter(this);
// 设置画笔颜色
QPen pen(QColor(255,255,0));
// 让绘画对象使用这个画笔
painter.setPen(pen);
// 绘制直线
painter.drawLine(QPoint(10,10), QPoint(100,10));
2.设置画笔宽度
// 设置宽度
pen.setWidth(10);
3.设置画笔风格
通过帮助文档查看画笔风格有哪些样式，点击style函数，跳转到枚举值。
点击Qt::PenStyle查看penStyle风格
// 设置风格
pen.setStyle(Qt::DashLine);
4.设置画刷
查看帮助手册，QBrush类提供的画刷功能。
// 设置画刷对象
QBrush brush(Qt::green);
// 设置画刷样式
brush.setStyle(Qt::Dense7Pattern);
// 让画家使用画刷
painter.setBrush(brush);
效果展示
5.其他设置
/******************绘画高级用法*******************************/
QPainter painter2(this);
// 消除锯齿
painter2.setRenderHint(QPainter::HighQualityAntialiasing);
painter2.drawEllipse(QPoint(500,500),30,30);
painter2.drawRect(QRect(10,550,10,20));
// 移动画家在画布上的位置
painter2.translate(20,0);
painter2.drawRect(QRect(10,550,10,20));
// 保存画家当前的状态
painter2.save();
// 上面保存了画家的状态，所以再次绘画时他的起始位置不是0，上面的20，0
painter2.drawRect(QRect(10,550,10,20));
4.手动调用绘图事件
上面介绍的是通过绘图事件自动调用绘图工具进行绘画，当我们希望手动通过某个控件去触发绘图事件去绘画时，使用信号和槽实现。
事项的功能：我们使用按钮控制绘制的矩形向右移动，当点击一下按钮，矩形向右移动一次。
在widget.ui文件中添加一个pushButon按钮控件
在widget.cpp 文件中绘制一个矩形，为了让矩形向右移动，将X轴坐标值定义为变量，每次点击按钮就改变这个x轴的值。
widget.h文件中新建变量
class Widget : public QWidget
{
Q_OBJECT
public:
Widget(QWidget *parent = nullptr);
~Widget();
// 绘图事件
void paintEvent(QPaintEvent *event);
// 设置x轴移动变量
int posx = 0;
private:
Ui::Widget *ui;
};
#endif // WIDGET_H
在widget.cpp 文件中绘制一个矩形
//重写绘画事件
void Widget::paintEvent(QPaintEvent *event)
{
QPainter painter3(this);
posx+=100;
// 当绘图超出屏幕显示区域后，重新设置他的位置
if(posx > this->width())
{
posx = 0;
}
painter3.drawRect(QRect(posx,100,60,60));
}
在widget.cpp 文件中构造器中创建信号和槽，每点击一次按钮让矩形向右移动一次。
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
connect(ui->pushButton,&QPushButton::clicked,[=](){
// 手动调用绘图事件用update
update();
});
}
效果展示，点击按钮后矩形向右移动了。
