一、绘图事件
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); }
绘图设备:总结