Qt开发基础（12）——绘图事件

目录

1.绘图事件的基本操作

2.绘图事件的高级设置

 3.利用画家画资源图片

4.绘图设备 

---

1.绘图事件的基本操作

#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 *)
{
    //实例化画家对象，this指定的是绘图设备
    QPainter painter(this);

    //设置画笔的颜色
    QPen pen(QColor(255,0,0));

    //设置笔的宽度
    pen.setWidth(3);

    //让画家使用这个颜色的笔
    painter.setPen(pen);

    //设置画刷
    QBrush brush(QColor(0,255,0));//或者 QBrush brush(QColor::green);

    //设置画刷风格
    brush.setStyle(Qt::Dense7Pattern);

    //让画家使用画刷
    painter.setBrush(brush);

    //画线
    painter.drawLine(QPoint(0,0),QPoint(100,100));
    //画圆:圆心，半径rx=ry,就是一个圆
    painter.drawEllipse(QPoint(100,100),50,50);

    //画圆:圆心，半径rx！=ry,就是一个椭圆
    painter.drawEllipse(QPoint(100,100),50,70);


    //画矩形
    painter.drawRect(QRect(20,20,50,50));

    //画文字
    painter.drawText(QRect(10,200,100,50),"hello world");
}

Widget::~Widget()
{
    delete ui;
}

2.绘图事件的高级设置

#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 *)
{

    QPainter painter(this);
    painter.drawEllipse(QPoint(100,50),50,50);

    //对于下面的圆设置一下抗锯齿的能力，就是没有毛刺，更加清晰，但效率较低
    painter.setRenderHint(QPainter::Antialiasing);
    painter.drawEllipse(QPoint(200,50),50,50);


    //画两个重合的矩形
    painter.drawRect(QRect(200,200,50,50));

    //为了不让重合，我们可以移动画家画的位置
    painter.translate(100,0);
    
    //还原画家的保存状态
    painter.restore();
    
    painter.drawRect(QRect(200,200,50,50));
}

Widget::~Widget()
{
    delete ui;
}

 3.利用画家画资源图片

#include "widget.h"
#include "ui_widget.h"
#include<QPainter>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //点击移动按钮，移动右图片，我们只需改x的位置即可
    connect(ui->pushButton,&QPushButton::clicked,[=](){
        //如果要手动调用绘图事件，用updata()更新
        update();
    });

}

void Widget::paintEvent(QPaintEvent *)
{

    QPainter painter(this);

    //如果超出屏幕，从0开始
    if(posX>this->width())
    {
        posX=0;
    }
    posX+=20;//让这幅图每次按一次移动20个单位
    painter.drawPixmap(posX,0,QPixmap("D:/testImage/2.jpg"));

}

Widget::~Widget()
{
    delete ui;
}

4.绘图设备 

 绘图设备时指继承QPainterDevice的子类，Qt一共提供了四个这样的类，分别如下所示：

• QPixmap专门为图像在屏幕上的显示做了优化
• QBitmap是QPixmap的一个子类，它的色深限定为1，可以使用QPixmap的isQBitmap来确定这个QPixmap是不是QBitmap
• QImage专门为图像的像素级访问做了优化
• QPicture则可以记录和重现QPainter的各条命令

之前我们绘制都是往widget上画，现在我们往磁盘上画：

新建文件如下所示：

将Pixmap作为绘图设备：

#include "widget.h"
#include "ui_widget.h"
#include<QPixmap>
#include<QPainter>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //Pixmap绘图设备
    QPixmap pix(300,300);//设定宽高

    //填充颜色
    pix.fill(Qt::white);

    //声明画家
    QPainter painter(&pix);//往pix上画
    painter.setPen(QPen(Qt::green));
    painter.drawEllipse(QPoint(150,150),100,100);

    //保存
    pix.save("D:/pix.png");
}

Widget::~Widget()
{
    delete ui;
}

 

---

---

 将QImage作为绘图设备：可以对像素进行访问

    //QImage作为绘图设备
    QImage img(300,300,QImage::Format_RGB32);//宽高和格式
    img.fill(Qt::white);

    QPainter painter(&img);
    painter.setPen(QPen(Qt::green));
    painter.drawEllipse(QPoint(150,150),100,100);

    //保存
    img.save("D:/img.png");

---

---

像素访问：

widget.cpp如下：

#include "widget.h"
#include "ui_widget.h"
#include<QPixmap>
#include<QPainter>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //Pixmap绘图设备
//    QPixmap pix(300,300);//设定宽高

//    //填充颜色
//    pix.fill(Qt::white);

//    //声明画家
//    QPainter painter(&pix);//往pix上画
//    painter.setPen(QPen(Qt::green));
//    painter.drawEllipse(QPoint(150,150),100,100);

//    //保存
//    pix.save("D:/pix.png");


    //QImage作为绘图设备
//    QImage img(300,300,QImage::Format_RGB32);//宽高和格式
//    img.fill(Qt::white);

//    QPainter painter(&img);
//    painter.setPen(QPen(Qt::green));
//    painter.drawEllipse(QPoint(150,150),100,100);

//    //保存
//    img.save("D:/img.png");



}

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    //利用QImage 对像素进行修改
    QImage img;
    img.load("D:\\testImage\\2.jpg");

    //修改像素值
    for(int i=50;i<100;i++)
    {
        for(int j=50;j<100;j++)
        {
            QRgb value = qRgb(255,0,0);
            img.setPixel(i,j,value);
        }
    }
    painter.drawImage(0,0,img);


}


Widget::~Widget()
{
    delete ui;
}

---

---

QPicture绘图设备：可以记录和重现绘图指令

#include "widget.h"
#include "ui_widget.h"
#include<QPixmap>
#include<QPainter>
#include<QPicture>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //QPicture绘图设备，可以记录和重现绘图指令
    QPicture pic;
    QPainter painter;
    painter.begin(&pic);
    painter.setPen(QPen(Qt::cyan));
    painter.drawEllipse(QPoint(150,150),100,100);
    painter.end();//结束画画

    //保存磁盘
    pic.save("D:/pic.zt");
}

void Widget::paintEvent(QPaintEvent *)
{

}


Widget::~Widget()
{
    delete ui;
}

---

---

重现QPicture的绘图指令

widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include<QPixmap>
#include<QPainter>
#include<QPicture>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //QPicture绘图设备，可以记录和重现绘图指令
    QPicture pic;
    QPainter painter;
    painter.begin(&pic);
    painter.setPen(QPen(Qt::cyan));
    painter.drawEllipse(QPoint(150,150),100,100);
    painter.end();//结束画画

    //保存磁盘
    pic.save("D:/pic.zt");
}

void Widget::paintEvent(QPaintEvent *)
{
    //重现绘图指令
    QPainter painter(this);
    QPicture pic;
    pic.load("D:/pic.zt");

    painter.drawPicture(0,0,pic);

}


Widget::~Widget()
{
    delete ui;
}