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月前
|
数据可视化 图形学 C++
C++ Qt开发:Charts绘图组件概述
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍`QCharts`二维绘图组件的常用方法及灵活运用。Qt Charts 提供了一个强大且易于使用的工具集,用于在 Qt 应用程序中创建各种类型的图表和图形可视化,该模块提供了多种类型的图表,包括折线图、散点图、条形图、饼图等。这使得开发人员能够轻松地将数据以直观的方式呈现给用户,增强应用程序的可视化效果。
54 0
C++ Qt开发:Charts绘图组件概述
|
5月前
|
编解码 图形学
29 QT - 绘图设备
29 QT - 绘图设备
19 0
|
存储 算法 数据可视化
Qt开发技术:Qt绘图系统(二)QPainter详解
Qt开发技术:Qt绘图系统(二)QPainter详解
Qt开发技术:Qt绘图系统(二)QPainter详解
|
存储 编解码 缓存
Qt开发技术:Qt绘图系统(一)绘图系统介绍
Qt开发技术:Qt绘图系统(一)绘图系统介绍
Qt开发技术:Qt绘图系统(一)绘图系统介绍
|
1月前
|
Linux API iOS开发
【Qt 渲染引擎】一文带你了解qt的三种 渲染引擎,包括栅格引擎(Raster)、OpenGL 和本地绘图系统
【Qt 渲染引擎】一文带你了解qt的三种 渲染引擎,包括栅格引擎(Raster)、OpenGL 和本地绘图系统
29 0
|
1月前
|
缓存 Linux 定位技术
Qt绘图指南:掌握高效、美观的GUI设计之道
Qt绘图指南:掌握高效、美观的GUI设计之道
121 1
|
7月前
|
C++ Python
Qt+C++基本绘图(画线,画圆,矩形, 撤销,重做)
Qt+C++基本绘图(画线,画圆,矩形, 撤销,重做)
150 0
Qt+C++基本绘图(画线,画圆,矩形, 撤销,重做)
|
算法 C++
成为Qt绘图高手,你需要掌握这些
成为Qt绘图高手,你需要掌握这些
|
C++
C/C++ Qt QChart 绘图组件应用
QtCharts 组件是QT中提供图表绘制的模块,该模块可以方便的绘制常规图形,Qtcharts 组件基于`GraphicsView`模式实现,其核心是`QChartView`和`QChart`的二次封装版。
370 0
C/C++ Qt QChart 绘图组件应用
|
编解码 API 图形学
Qt 5——绘图和绘图设备
Qt 5——绘图和绘图设备
168 0
Qt 5——绘图和绘图设备

热门文章

最新文章

推荐镜像

更多