hello,大家好。

    本人學習了一段時間的Qt，今天在公司電視大屏有個畫板工具功能，靈機一動製作一個簡易的畫板程式。

    本文主要介紹如何採用QWidget，QPainter製作畫板。

    畫板功能：全屏無邊框畫板，支援手繪，右鍵（偷懶= -0- =）擦除。

    開發工具：Qt5.9.5 Vs2015       (沒用到什麼高階功能，其他版本的也應該支援- 0 -)

    程式思路：

1. 建立畫板介面
2. 滑鼠拖動模擬畫筆
3. 右鍵擦除所有繪畫
   

    程式難點：

•     繪製連貫（繪製的圖形不出現斷點）
  
•     增加繪畫效率（畫筆拖動過程中，繪圖不卡頓）

    我們按照程式思路一步一步完成我們的程式：

1.     建立畫板介面：

 classVDCSketchpadWidget:publicQWidget
{

Q_OBJECT

public:

explicitVDCSketchpadWidget(QWidget*parent=0);

~VDCSketchpadWidget();

private:

voidpaintEvent(QPaintEvent*event);

private:

Ui::VDCSketchpadWidget*ui;

};

   實現畫板全屏無邊框，介面建構函式增加如下程式碼

setWindowFlags(Qt::BypassWindowManagerHint|Qt::Drawer);//全無邊框;畫板    
 
setWindowState(Qt::WindowFullScreen);//全屏

2.實現滑鼠拖動模擬畫筆

現附上程式碼

classVDCSketchpadWidget:publicQWidget
{

Q_OBJECT

public:

explicitVDCSketchpadWidget(QWidget*parent=0);

~VDCSketchpadWidget();

private:

voidpaintEvent(QPaintEvent*event);

voidmousePressEvent(QMouseEvent*event);

voidmouseReleaseEvent(QMouseEvent*event);

void
 
mouseMoveEvent(QMouseEvent*event);

voiddrawBackGround(QPainter&);//繪製背景

voiddrawUserDraw(QPainter&);//使用者繪製

private:

Ui::VDCSketchpadWidget*ui;

QVector<QLineF>m_lineFList;

QPointFm_startPointF;

QPointFm_endPointF;

boolm_bValidDraw;//有效繪畫

boolm_bStart;//True初始繪製False繪製中

};

其中增加了

mousePressEvent mouseRealseEvent mouseMoveEvent 

用於監聽畫筆（滑鼠）狀態

增加私有變數m_lineFList 儲存一次有效繪畫所有的連線線（避免滑鼠移動過快，出現斷點）

增加m_startPointF m_endPointF 記錄每次畫筆拖動的其實點，終止點座標

這裡為了避免m_lineFList 過大導致繪圖過慢。畫板的建構函式增加程式碼

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

每次update介面都不會重繪

記錄畫刷（滑鼠）

voidVDCSketchpadWidget::mousePressEvent(QMouseEvent*event)
{

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

if(m_bValidDraw)

m_startPointF=event->pos();

m_lineFList.clear();

}

voidVDCSketchpadWidget::mouseReleaseEvent(QMouseEvent*event)

{

}

voidVDCSketchpadWidget::mouseMoveEvent(QMouseEvent*event)

{

if(m_bValidDraw)

{

m_endPointF=event->pos();

m_lineFList<<QLineF(m_startPointF,m_endPointF);

m_startPointF=m_endPointF;

qDebug()<<"pointList"<<m_lineFList.size();

update();

}

}

其中繪畫函式如下

voidVDCSketchpadWidget::paintEvent(QPaintEvent*event)
{

QPainterpainter(this);

if(m_bStart)

{

drawBackGround(painter);

m_bStart=false;

}

else

drawUserDraw(painter);

}

3.右鍵擦除所有繪畫

將realseMouseEvent函式修改為如下程式碼即可

voidVDCSketchpadWidget::mouseReleaseEvent(QMouseEvent*event)

{

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

{

m_bStart=true;

update();

}

}

m_bStart =true paintEvent繪製背景圖

三步完成後

這樣一個簡易的畫板就製作完成了。

效果如圖

如需檢視程式碼詳情，請參見原始碼地址：https://download.csdn.net/download/u013211185/10462975

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