Qt6学习笔记十三(绘图)

简介: Qt6学习笔记十三(绘图)

一、绘图事件

QPainter画家

QPen画笔

QBrush画刷(填充)

重写绘图事件(自动调用这个绘图事件,在widget构造就会调用这个函数)

在widget.h中,声明绘图事件(重写)

//绘图事件
void paintEvent(QPaintEvent *event);

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){
    //实例化画家对象   this指定的是绘图的设备(当前窗口)
    QPainter painter(this);
    //设置画笔
    QPen pen(QColor(255,0,0));//创建画笔 (颜色)
    pen.setWidth(3);//设置画笔宽度
    pen.setStyle(Qt::DashLine);//设置画笔风格(帮助文档查看)
    //设置画刷(填充)
    QBrush brush(QColor(0,255,0));//或者可以直接输入颜色Qt::cyan
    brush.setStyle(Qt::Dense6Pattern);//设置画刷风格
    //让画家使用画笔/画刷
    painter.setPen(pen);
    painter.setBrush(brush);
    //画线
    painter.drawLine(QPoint(0,0),QPoint(100,100));
    //画圆(圆就是特殊的椭圆)
    painter.drawEllipse(QPoint(100,100),50,50);
    //画矩形
    painter.drawRect(QRect(20,20,50,50)); //左上角x,y,和w,h
    //画文字
    painter.drawText(QRect(10,200,100,50),"好好学习");//如果文本框的宽度不够会自动换行
}

效果图

绘图事件总结

二、绘图高级设置

抗锯齿设置

画2个圆,第二个设置了抗锯齿

QPainter painter(this);
    painter.drawEllipse(QPoint(100,50),50,50);
    //设置 抗锯齿  效率较低
    painter.setRenderHint(QPainter::Antialiasing);
    painter.drawEllipse(QPoint(200,50),50,50);

画家状态改变、保存和还原

painter.drawRect(QRect(20,20,50,50));//画矩形
    painter.translate(100,0);//移动画家
    //保存画家状态(画家的位置)
    painter.save();
    painter.drawRect(QRect(20,20,50,50));//画矩形
    painter.translate(100,0);//移动画家
    //还原画家状态(画家回到保存点)
    painter.restore();
    painter.drawRect(QRect(20,20,50,50));//画矩形
    //最后可以发现只有2个矩形,因为有2个矩形重叠了

有2个矩形在第二个位置重叠了

三、手动调用绘图事件

需求:通过QPainter显示图片,通过点击按钮,使得图片向右移动,超过Widget宽度,重新从0开始。

首先在资源文件中添加图片

在widget.h中

//绘图事件
    void paintEvent(QPaintEvent *event);
    //设置图片x位置
    int posX=0;

widget.cpp中

#include "widget.h"
#include "./ui_widget.h"
#include<QPainter>//画家 类
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //点击移动按钮   移动图片
    connect(ui->pushButton,&QPushButton::clicked,[=](){
        //如果要手动调用绘图事件  用update更新
        posX+=20;
        update();
    });
}
Widget::~Widget()
{
    delete ui;
}
void Widget::paintEvent(QPaintEvent *event){
    QPainter painter(this);
    //如果超出屏幕 从0开始
    if(posX>this->width()){
        posX=0;
    }
    painter.drawPixmap(posX,100,QPixmap(":/images/1.jpg").scaled(250,200));
}

补充:

可以在widget.cpp的构造函数中,使用QTimer使得,图片自动移动

QTimer* timer=new QTimer(this);
    timer->start(1000);
    connect(timer,&QTimer::timeout,[=](){
        posX+=20;
        update();
    });

高级设置和手动调用绘图事件:总结

四、绘图设备

QPixmap绘图设备

//Pixmap绘图设备(专门为平台做了显示优化)
QPixmap pix(300,300);
//填充颜色(背景)
pix.fill(Qt::white);
//声明画家
QPainter painter(&pix);
painter.setPen(QPen(Qt::green));
//画圆
painter.drawEllipse(QPoint(150,150),100,100);
//保存图片
pix.save("E:\\1.png");

QImage绘图设备

//QImage 绘图设备 (可以对像素进行访问)
QImage img(300,300,QImage::Format_RGB32);//要比QPixmap多一个format
img.fill(Qt::white);
QPainter painter(&img);
painter.setPen(QPen(Qt::green));
painter.drawEllipse(QPoint(150,150),100,100);
img.save("E:\\2.png");

QImage是可以对像素点进行修改的

QPicture绘图设备

保存绘图指令

//QPicture 绘图设备 (可以记录和重现绘图指令)
    QPicture pic;//无参构造不要加括号,否则会被当作成函数声明
    QPainter painter;
    painter.begin(&pic);//开始画画(可以指定设备。这行和上面这行等效于QPainter painter(&pic);)
    painter.setPen(QPen(Qt::cyan));
    painter.drawEllipse(QPoint(150,150),100,100);
    painter.end();//结束画画
    //保存到磁盘
    pic.save("E:\\pic.zt");//里面记录着所有绘图的指令

在绘图事件下重现

void Widget::paintEvent(QPaintEvent *event){
    QPainter painter(this);
    QPicture pic;
    pic.load("E:\\pic.zt");
    painter.drawPicture(0,0,pic);
}

绘图设备:总结


相关文章
|
4月前
|
容器
【qt】GraphicsView绘图架构
【qt】GraphicsView绘图架构
77 0
|
4月前
【qt】绘图
【qt】绘图
38 0
|
2月前
(14)Qt绘图(one)
本文介绍了在Qt中使用QPainter进行绘图的基础操作,包括如何指定绘图设备、使用QPen和QBrush设置线条和填充样式、绘制不同样式的线条和形状,以及如何实现纹理填充和渐变填充等效果。
64 6
(14)Qt绘图(one)
|
2月前
|
计算机视觉
(15)Qt绘图(two)
Qt框架中QPainter类的多种绘图功能,包括坐标变换、基本图形绘制、文本和图片绘制、图像保存以及碰撞检测等。
48 1
(15)Qt绘图(two)
|
4月前
【Qt 学习笔记】Qt窗口 | 标准对话框 | 消息对话框QMessageBox
【Qt 学习笔记】Qt窗口 | 标准对话框 | 消息对话框QMessageBox
776 4
【Qt 学习笔记】Qt窗口 | 标准对话框 | 消息对话框QMessageBox
|
4月前
|
API
Qt绘图之Paint系统
Qt绘图之Paint系统
68 2
|
4月前
Qt绘图之QWidget
Qt绘图之QWidget
92 1
|
4月前
|
开发者
【Qt 学习笔记】Qt系统相关 | Qt事件 | 事件的介绍及基本概念
【Qt 学习笔记】Qt系统相关 | Qt事件 | 事件的介绍及基本概念
237 4
|
4月前
【Qt 学习笔记】Qt窗口 | 标准对话框 | 文件对话框QFileDialog
【Qt 学习笔记】Qt窗口 | 标准对话框 | 文件对话框QFileDialog
869 4
|
4月前
|
数据安全/隐私保护
【Qt 学习笔记】Qt窗口 | 对话框 | 模态与非模态对话框的创建
【Qt 学习笔记】Qt窗口 | 对话框 | 模态与非模态对话框的创建
440 4