Qt学习之路-简易画板2(自由涂鸦)

我个人觉得Designer不适合新手学习所以就自己写代码吧。先讲最简单的，实现画笔工具。首先创建一个主窗口

现在先不管主窗口，然后创建一个画板组件，新建一个C++类名字为PaintWidget基于QWidget类。

下面是代码

画板组件头文件代码：

//先理解画笔，不使用双缓冲绘图
#ifndef PAINTWIDGET_H
#define PAINTWIDGET_H

#include 
   
   
    
    
#include 
    
    
     
     
#include 
     
     
      
      
class PaintWidget : public QWidget
{
    Q_OBJECT
public:
    explicit PaintWidget(QWidget *parent = 0);//------------构造函数
   

public  slots:


protected:
    void paintEvent(QPaintEvent *);//-----------------------重绘事件(重点:由update()函数触发)
    void mousePressEvent(QMouseEvent *);//------------------鼠标按下事件
    void mouseMoveEvent(QMouseEvent *);//-------------------鼠标移动事件(重点理解)
    void mouseReleaseEvent(QMouseEvent *);//----------------鼠标释放事件

    void paint(QImage &theImage);//-------------------------画图工具
signals:

private:

    QImage image;//-----------------------------------------一块画布
    QRgb backColor;//---------------------------------------画布背景色
    QPoint lastPoint;//-------------------------------------前一个点，因为线是由无数点组成的
    QPoint endPoint;//--------------------------------------后一个点(结束点)
    bool isDrawing;//---------------------------------------判断是否在绘图也就是判断鼠标是否操作
};
#endif

     
     
    
    
   
   

画板组件cpp文件代码：

#include "paintwidget.h"
#include 
   
   
    
    
#include 
    
    
     
     
PaintWidget::PaintWidget(QWidget *parent) :
    QWidget(parent)
{
    isDrawing = false;//---------------------------------------------------未开时绘图，这是双缓冲用的，现在可以不用考虑
    image = QImage(700,500,QImage::Format_RGB32);//------------------------画板大小700,500,用32位色(就是平时用的都有)
    backColor = qRgb(255,255,255);
   
    image.fill(backColor);//-----------------------------------------------RGB（255，255，255）为白色，image画布被填充为白色
}

void PaintWidget :: paintEvent(QPaintEvent *){//---------------------------可理解为是一个绘图终端函数，在本程序中只通过update()触发，调用结束后
                                              //---------------------------这也是一个状态函数，只要没关闭mainwindow，一直待机等待update()触发
   
    QPainter painter(this);//----------------------------------------------QPainter是绘图操作，父亲是paintwidget类而paintwidget的父亲又是mainwindow
                           //----------------------------------------------既关闭mainwindow就关闭paintwidget就关闭了painter
   
    painter.drawImage(0,0,image);//----------------------------------------把图画在image上
}

void PaintWidget :: mousePressEvent(QMouseEvent *event){
    if(event->button() == Qt::LeftButton){//-------------------------鼠标按下且为左键
        lastPoint = event->pos();//----------------------------------设置起点为鼠标按下的点
        endPoint = event->pos();//-----------------------------------设置终点为鼠标按下的点
        isDrawing = true;//------------------------------------------开始绘图了
    }
}

void PaintWidget :: mouseMoveEvent(QMouseEvent *event){ //重点理解部分

    if(event->buttons() & Qt::LeftButton){//-------------------------鼠标按下左键并移动
        endPoint = event->pos();//-----------------------------------鼠标每移动一次都刷新终点
        
        paint(image);        //--------------理解清楚这个函数--------仔细看看void paint (QImage &theImage)函数
                            //---------------------------------------最后会通过update()函数调用void paintEvent(QPaintEvent *)重绘函数
                            //---------------------------------------再仔细看看void paintEvent(QPaintEvent *)重绘函数会把图画在image画布上
                            //---------------------------------------我觉得理解了这个就理解得差不多了
 }
}
void PaintWidget :: mouseReleaseEvent(QMouseEvent *event){
     isDrawing = false;//--------------------------------------------绘图完毕
    paint(image);//--------------------------------------------------把最后一点画在image画布上，可参考上面注释
}


void PaintWidget :: paint (QImage &theImage){//------------------(画图函数)调用这个函数就是调用重绘函数，把图画在image上
    QPainter p(&theImage); //------------------------------------把图画在theImage(theImage是painterDevice类型参数，由于是引用，其实就是画在image上)
    QPen apen;
    apen.setWidth(5);//------------------------------------------画笔线条宽度设置为5
    p.setPen(apen);//--------------------------------------------设置画笔线条宽度，也可以不设置，既把这两句注释掉，线条默认宽度为1
    p.drawLine(lastPoint,endPoint);//----------------------------画线，由于鼠标移动事件会调用此函数，因此lastPoint和endPoint相距近似为0
                                    //---------------------------因此可近似看成画点，点连起来就是画笔的痕迹了

    lastPoint = endPoint;//--------------------------------------把终点复制给起点
    update();//--------------------------------------------------刷新
}

    
    
   
   

主窗口头文件代码：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include 
   
   
    
    
#include "paintwidget.h"
#include 
    
    
     
     //滚动条


class MainWindow : public QMainWindow
{
    Q_OBJECT

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

protected:
signals:
    
private slots:
    
private:

    PaintWidget *area;//-----------------------------------创建一个画板组件
    QScrollArea *scrollArea;//-----------------------------创建一个滚动条
};

#endif // MAINWINDOW_H

    
    
   
   

主窗口cpp文件代码：

#include "mainwindow.h"
#include 
   
   
    
    
#include 
    
    
     
     
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent)
{
    this->setWindowTitle(tr("Drawing Board"));

    area = new PaintWidget;
    resize(700,500);
    scrollArea = new QScrollArea;
    scrollArea->setBackgroundRole(QPalette::Dark);
    scrollArea->setWidget(area);
    scrollArea->widget()->setMinimumSize(800,600);
    setCentralWidget(scrollArea);

}

MainWindow::~MainWindow()
{

}

    
    
   
   

OK，大功告成，运行就可以使用画笔功能了。后面再讲双缓冲画矩形，直线，椭圆。