如何用Qt制作简单的鼠标绘图画板(支持导出图片)

---

01 - 鼠标绘图效果

  GIF没设置好，会有灰色阴影出现

02 - 基本思路

  

03 - 代码

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

protected:
    void mousePressEvent(QMouseEvent *event);
    void mouseReleaseEvent(QMouseEvent *event);
    void mouseMoveEvent(QMouseEvent *event);
    void paintEvent(QPaintEvent *event);

private slots:
    void on_pushButton_clicked();

    void on_pushButton_2_clicked();

private:
    Ui::Widget *ui;
    bool press;
    QPoint point;
    QList<QPoint> point_list;

};

#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"

#include <QMouseEvent>
#include <QPainter>
#include <QSize>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    setMouseTracking(true);
    this->press = false;
}

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

//绘画，每次update的时候执行
void Widget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);         //创建画板，画板附着在对象this上，也就是Widget窗口
    QPen mypen;                     //创建画笔
    mypen.setWidth(15);             //点的大小
    mypen.setColor(Qt::black);      //点的颜色
    painter.setPen(mypen);          //画板设置画笔

    int i = 0;                      //把每一次鼠标移动的地方进行画点
    while(point_list.size()!=0 && i != point_list.size())
    {
        painter.drawPoint(point_list.at(i));
        i++;
    }
}

//鼠标左键按下，开始记录坐标
void Widget::mousePressEvent(QMouseEvent *event)
{
    if(event->button() == Qt::LeftButton){
        this->press = true;
    }
}

//鼠标移动事件
void Widget::mouseMoveEvent(QMouseEvent *event)
{
    if(event->buttons() & Qt::LeftButton)
    {
        if(this->press)     //只有鼠标被按下的时候才记录坐标
        {
            point = event->pos();       //记录坐标
            point_list.append(point);   //记录每一次移动的坐标
            update();                   //更新，让画笔画画
        }

    }
}

//鼠标松开，停止记录
void Widget::mouseReleaseEvent(QMouseEvent *event)
{
    if(event->button()==Qt::LeftButton)
    {
        this->press = false;
    }
}

//确定按键
void Widget::on_pushButton_clicked()
{
    QPixmap pixmap = QPixmap::grabWidget(this);     //把Widget窗口内容转为QPixmap
    QSize picSize(28,28);                           //设置修改的大小为28*28
    QPixmap ret = pixmap.scaled(picSize);           //重新修改QPixmap的大小

    ret.save("C:\\Users\\Administrator\\Desktop\\num.png"); //保存QPixmap为png图片
}

//清除按键
void Widget::on_pushButton_2_clicked()
{
    point_list.clear();     //清空鼠标坐标记录
    update();               //更新，让画笔画画
}

UI