QT学习一之画板制作(解决绘画卡顿)

    hello,大家好。

    本人学习了一段时间的Qt，今天在公司电视大屏有个画板工具功能，灵机一动制作一个简易的画板程序。

    本文主要介绍如何采用QWidget，QPainter制作画板。

    画板功能：全屏无边框画板，支持手绘，右键（偷懒= -0- =）擦除。

    开发工具：Qt5.9.5 Vs2015       (没用到什么高级功能，其他版本的也应该支持- 0 -)

    程序思路：

1. 创建画板界面
2. 鼠标拖动模拟画笔
3. 右键擦除所有绘画
   

    程序难点：

•     绘制连贯（绘制的图形不出现断点）
  
•     增加绘画效率（画笔拖动过程中，绘图不卡顿）

    我们按照程序思路一步一步完成我们的程序：

1.     创建画板界面：

  

 class VDCSketchpadWidget : public QWidget
{

    Q_OBJECT

public:

    explicit VDCSketchpadWidget(QWidget *parent = 0);

    ~VDCSketchpadWidget();

private:

    void paintEvent(QPaintEvent *event);

private:

    Ui::VDCSketchpadWidget *ui;

};

   实现画板全屏无边框，界面构造函数增加如下代码

setWindowFlags(Qt::BypassWindowManagerHint|Qt::Drawer);//全无边框;画板    
setWindowState(Qt::WindowFullScreen);   //全屏

2.实现鼠标拖动模拟画笔

现附上代码

class VDCSketchpadWidget : public QWidget
{

    Q_OBJECT

public:

    explicit VDCSketchpadWidget(QWidget *parent = 0);

    ~VDCSketchpadWidget();

private:

    void paintEvent(QPaintEvent *event);

    void mousePressEvent(QMouseEvent *event);

    void mouseReleaseEvent(QMouseEvent *event);

    void mouseMoveEvent(QMouseEvent *event);

    void drawBackGround(QPainter&);         //绘制背景

    void drawUserDraw(QPainter&);           //用户绘制

private:

    Ui::VDCSketchpadWidget *ui;

    QVector<QLineF> m_lineFList;

    QPointF m_startPointF;

    QPointF m_endPointF;

    bool m_bValidDraw;  //有效绘画

    bool m_bStart;      //True 初始绘制 False 绘制中

};

其中增加了

mousePressEvent mouseRealseEvent mouseMoveEvent 

用于监听画笔（鼠标）状态

增加私有变量m_lineFList 存储一次有效绘画所有的连接线（避免鼠标移动过快，出现断点）

增加m_startPointF m_endPointF 记录每次画笔拖动的其实点，终止点坐标

这里为了避免m_lineFList 过大导致绘图过慢。画板的构造函数增加代码

setAttribute(Qt::WA_OpaquePaintEvent );//update 不擦除界面

每次update界面都不会重绘

记录画刷（鼠标）

void VDCSketchpadWidget::mousePressEvent(QMouseEvent *event)
{

    m_bValidDraw = event->button() == Qt::LeftButton;

    if(m_bValidDraw)

        m_startPointF =event->pos();

    m_lineFList.clear();

}

void VDCSketchpadWidget::mouseReleaseEvent(QMouseEvent *event)

{

}

void VDCSketchpadWidget::mouseMoveEvent(QMouseEvent *event)

{

    if(m_bValidDraw)

    {

        m_endPointF =event->pos();

        m_lineFList<<QLineF(m_startPointF,m_endPointF);

        m_startPointF = m_endPointF;

        qDebug()<< "point List "<<m_lineFList.size();

        update();

    }

}

其中绘画函数如下

void VDCSketchpadWidget::paintEvent(QPaintEvent *event)
{

    QPainter painter(this);

    if(m_bStart)

    {

        drawBackGround(painter);

        m_bStart =false;

    }

    else

        drawUserDraw(painter);

}

3.右键擦除所有绘画

将realseMouseEvent函数修改为如下代码即可

void VDCSketchpadWidget::mouseReleaseEvent(QMouseEvent *event)

{

    if(event->button() == Qt::RightButton)

    {

        m_bStart =true;

        update();

    }

}

m_bStart =true paintEvent绘制背景图

三步完成后

这样一个简易的画板就制作完成了。

效果如图

如需查看代码详情，请参见源码地址：https://download.****.net/download/u013211185/10462975

GitHub地址：https://github.com/HuBuBei/Qt/tree/master/QSketchpad