qt学习之个人画板的实现（2）

曾经终败给现在 2022-08-06 03:23 128阅读 0赞

结合上次的，我这次实现了 涂鸦功能，虽然不是很复杂，也确实花了不少时间去看qt基础。但确实有一些注意点值得大家注意。特别是新手。

一定要注意大小写以及一些基本的语法规范，这样会为你节省不少debug的时间。

以下是我的画图组件的源代码（涂鸦实现）

这是画图组件的头文件，直接在新建的MainWindow 中新加上一个以QWidget为基类的类即可（不再赘述）。

#ifndef PAINTWIDGET_H
    #define PAINTWIDGET_H
    #include
       
        
    #include 
        
         
    #include
         
          
    #include
          
           
    class paintWidget : public QWidget
    {
        Q_OBJECT
    public:
        explicit paintWidget(QWidget *parent = 0);//构造函数
    
    
    
    public slots:
    
    protected:
    
        void paintEvent(QPaintEvent*);//绘画的事件
        void mousePressEvent(QMouseEvent *);//按动鼠标事件
        void mouseMoveEvent(QMouseEvent *);//移动鼠标事件
        void mouseReleaseEvent(QMouseEvent*);//松开鼠标事件
    
        void paint(QImage &theimage);//画图工具的设定
    signals:
    
    private:
        QImage image;//一张画布
        QPoint endPoint;//后一个点
        QPoint lastPoint;//前一个点
        QRgb setting_color;//背景色
    
        bool drawing;//判断是否在绘画
    };
    
    #endif // PAINTWIDGET_H

这是画图组件的cpp文件：

#include "paintwidget.h"
    #include
        
         
    #include
         
          
    paintWidget::paintWidget(QWidget *parent):
        QWidget(parent)
    {
        drawing=false;//表明未开始画图时，此时不做深究，用于双缓冲
        image=QImage(900,600,QImage::Format_RGB32);//设定一张采用32位图（最常用的）的规模为900*600的画布
        setting_color=qRgb(255,255,255);//选定背景色为白色
        image.fill(setting_color);//将背景色填充在画布上
    
    }
    
    void paintWidget::paintEvent(QPaintEvent *){
    
        QPainter painter(this);
    
        painter.drawImage(0,0,image);//在image上绘画
    }
    
    void paintWidget::mousePressEvent(QMouseEvent *event){
    
        if(event->button()==Qt::LeftButton){//判断是否按住鼠标左键
            lastPoint=event->pos();
            endPoint=event->pos();
    
            drawing = true;//正在画图
        }
    }
    
    void paintWidget::mouseMoveEvent(QMouseEvent *event){
    
        if(event->buttons()&Qt::LeftButton){//当满足按住并且拖动鼠标左键时
            endPoint=event->pos();//把鼠标所在位置的坐标传给后一个点
    
            paint(image);//在改坐标处画下一个点
        }
    }
    
    void paintWidget::mouseReleaseEvent(QMouseEvent *event){
        if(event->button()==Qt::LeftButton){//判断是否按住鼠标左键
            endPoint=event->pos();//
            drawing=false;//停止绘画
            paint(image);//画至此
        }
    
    }
    
    void paintWidget::paint(QImage &theimage){
        QPainter p(&theimage);//draw on the image
        QPen pen = QPen();//选用一支笔
        pen.setWidth(8);//设定画笔粗度为8，默认值为1
    
        p.setPen(pen);//设定画图工具为一支笔
        p.drawLine(lastPoint,endPoint);//用画图工具画线
    
        lastPoint=endPoint;
        update();/*进行更新界面显示，可引起窗口重绘事件，重绘窗口
           update()调用之后并不是立即重绘，而是将重绘事件放入主消息
           循环中，由main的eventloop来统一调度的(其实也是比较快的).
           update在调用paintEvent之前，还做了很多优化，如果update
           被调用了很多次，最后这些update会合并到一个大的重绘事件加
           入到消息队列，最后只有这个大的update被执行一次。*/
    }

以及接下来的，主窗口的初步设计，我稍微使用了一下designer一会儿附图，接下来有机会会继续改进。

主窗口的头文件：

#ifndef MAINWINDOW_H
    #define MAINWINDOW_H
    #include 
         
          
    #include "paintwidget.h"
    #include 
          
           //滚动条
    
    
    namespace Ui {
    class MainWindow;
    }
    
    class MainWindow : public QMainWindow
    {
        Q_OBJECT
    
    public:
        explicit MainWindow(QWidget *parent = 0);
        ~MainWindow();
    
    private slots:
        void on_label_linkActivated(const QString &link);
    
    private:
        paintWidget *area;//创建一个画图组件
        QScrollArea *scrollArea;//创建一个滚动条
        Ui::MainWindow *ui;
    };
    
    #endif // MAINWINDOW_H

主窗口的cpp文件：

#include "mainwindow.h"
    #include "ui_mainwindow.h"
    #include 
         
          
    #include 
          
           
    #include 
           
            
    
    #include 
            
             
    
    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
        this->setWindowTitle(tr("My Drawing Board"));//设定主窗口的名字为My Drawing Board
        area= new paintWidget;
        setFixedSize(900,700); //设定窗口初始可视大小为900*700    scrollArea = new QScrollArea;
        scrollArea->setBackgroundRole(QPalette::Dark); //scrollArea对象的背景色设为Dark
        scrollArea->setWidget(area); //将画布添加到滚动条范围中
        scrollArea->widget()->setMinimumSize(1000,500);//滚动条初始化大小设为1000*500
        setCentralWidget(scrollArea);//将滚动条加到中心区
        
    }
    
    MainWindow::~MainWindow()
    {
        delete ui;
    }

以下是初步尝试designer：

![Center][]

以及最后的涂鸦效果：

![Center 1][]

重点就是理解鼠标事件使画图功能的实现。

[Center]: /images/20220806/503620496c18403ab6e8087046a2b66e.png
[Center 1]: /images/20220806/b2d07caeac4d4bdfbb44942787e8338c.png