Qt實現(xiàn)實時鼠標(biāo)繪制圖形

第Qt實現(xiàn)實時鼠標(biāo)繪制圖形目錄功能實現(xiàn)1：記錄圖形第一個繪制點2：實時獲取鼠標(biāo)最新位置并繪圖3：釋放繪制點，繪制最終圖形總結(jié)上一章節(jié)介紹了關(guān)于QGraphicsView的基礎(chǔ)講解，以及簡單的類圖創(chuàng)建，由上一章節(jié)中最后展示的動畫效果來看，今年主要講述如何在QGraphicsView架構(gòu)下，實時拖動鼠標(biāo)繪制圖形！

今天主要以矩形為例，再來看一下展示效果吧！

功能實現(xiàn)

想要實現(xiàn)鼠標(biāo)拖拽繪圖的效果，離不開鼠標(biāo)的三大事件：按下、移動、釋放

那么具體實現(xiàn)實時繪制矩形框的核心流程是什么呢？

第一步：鼠標(biāo)左鍵點擊，記錄初始點擊位置

第二步：在窗口中移動鼠標(biāo)，實時獲取鼠標(biāo)拖動點，根據(jù)拖動點繪制指定形狀

第三步：鼠標(biāo)點擊右鍵釋放鼠標(biāo)，繪制最終圖形

描述的實現(xiàn)流程很簡單，那么，接下來就實際操作吧！

在進行鼠標(biāo)點擊繪制的時候，為了兼容多個圖形的實時繪制，這里，不只是用兩個QPoint成員變量記錄鼠標(biāo)點，而是采取了vectorQPontF容器存儲的方式。

例如：三角形圖形，需要三個點才能確定圖形；曲線圖形，是由N多個點才能確定圖形；等等。。。

所以說，這里采用了vector容器進行數(shù)據(jù)存儲，任何圖形的點都可以進行存儲。

所有的圖形枚舉類型，如下表格：

枚舉類型形狀Drawing_Normal無圖形繪制Drawing_Circular圓形Drawing_StraightLine直線Drawing_Rectangular矩形Drawing_Triangle三角形Drawing_ManyLineSegements多線段Drawing_Curve曲線

今天只講述矩形：Drawing_Rectangular

1：記錄圖形第一個繪制點

只有鼠標(biāo)點擊后才能獲取當(dāng)前點擊點的位置，所以，記錄按下點操作應(yīng)該是在鼠標(biāo)的mousePressEvent中實現(xiàn)的。

voidQCustomQGraphicsScene::mousePressEvent(QGraphicsSceneMouseEvent*e)

//TODO：鼠標(biāo)左鍵，點擊繪制圖形；鼠標(biāo)右鍵，點擊拖動圖形

QGraphicsScene::mousePressEvent(e);

if(e-button()Qt::LeftButton)

//當(dāng)圖形處于繪制狀態(tài)時

if(m_enumShape!=Drawing_Normal)

//記錄鼠標(biāo)按下的點

m_vetPoints.push_back(e-scenePos());

}

代碼解析：當(dāng)進入到鼠標(biāo)按下消息后，只有在左鍵按下狀態(tài)時，才做繪圖操作，并且當(dāng)前形狀枚舉類型有效。

2：實時獲取鼠標(biāo)最新位置并繪圖

鼠標(biāo)想要實時繪制，那一定是在鼠標(biāo)的mouseMoveEvent事件中操作的。

voidQCustomQGraphicsScene::mouseMoveEvent(QGraphicsSceneMouseEvent*e)

//TODO：鼠標(biāo)移動時，如果存在有效圖形類型，進行圖形繪制

QGraphicsScene::mouseMoveEvent(e);

if(m_enumShape!=Drawing_Normal)

m_pTempLayer-DrawShape(m_enumShape,m_vetPt,e-scenePos());

}

代碼解析：當(dāng)鼠標(biāo)進入到mouseMoveEvent事件后，并且，當(dāng)前枚舉類型處于有效狀態(tài)時，需要實時繪制圖形。

函數(shù)DrawShape的講解：

參數(shù)1：圖形的枚舉類型，根據(jù)不同枚舉，繪制不同的圖形

參數(shù)2：vectorQPointF傳入已經(jīng)記錄的鼠標(biāo)點，可以是多個，但最少是1個。就例如當(dāng)前繪制矩形來說，該容器中只是存儲了一個繪制點。

參數(shù)3：鼠標(biāo)在mouseMoveEvent中實時拖動點

DrawShape函數(shù)實現(xiàn)代碼，如下：

voidQTempCanvasLayer::DrawShape(ENUM_DrawingGraphicenumShape,std::vectorQPointFvetPt,QPointFptCurrent)

m_pTempCanvasImg-fill(Qt::transparent);

m_pTempPainter-setRenderHint(QPainter::Antialiasing,true);

m_pTempPainter-setCompositionMode(QPainter::CompositionMode_Source);

m_pTempPainter-setPen(QPen(QColor(51,51,51),1,Qt::SolidLine,Qt::SquareCap,Qt::RoundJoin));

switch(enumShape)

caseDrawing_Circular://圓形

break;

caseDrawing_StraightLine://直線

break;

caseDrawing_Rectangular://矩形

m_pTempPainter-drawRect(QRectF(vetPt[0],ptCurrent));

break;

caseDrawing_Triangle://三角形

break;

caseDrawing_ManyLineSegements://多線段

break;

caseDrawing_Curve://曲線

break;

default:

break;

update();

}

代碼講解：switch語句之前的內(nèi)容都是在設(shè)置圖形的風(fēng)格，比如：setRenderHint防止圖形走樣；最需要我們注意的是下面一句代碼：

m_pTempCanvasImg-fill(Qt::transparent);

如果你忘記設(shè)置了，當(dāng)鼠標(biāo)在拖動繪制圖形時，會導(dǎo)致拖拽線條重疊的效果，就如下面展示效果一樣，如圖所示：

3：釋放繪制點，繪制最終圖形

鼠標(biāo)事件：mouseReleaseEvent

voidQCustomQGraphicsScene::mouseReleaseEvent(QGraphicsSceneMouseEvent*e)

//TODO：鼠標(biāo)釋放之后操作

QGraphicsScene::mouseReleaseEvent(e);

if(m_enumShape==Drawing_Normal)

return;

//存在有效的圖形類型，進行最終圖形繪制

if(e-button()Qt::RightButton)

if(m_enumShape==Drawing_Rectangular)

//繪制直線，需要存儲兩個有效點

if(m_vetPt.size()==2)

this-DrawRealShape(m_vetPt);

//如果當(dāng)前正在繪制圖形，直接清除

this-ClearCurrentDrawingShape();

}

代碼解析：觸發(fā)了鼠標(biāo)釋放事件后，并且是鼠標(biāo)右鍵點擊（在這里都是以鼠標(biāo)右鍵點擊作為最終的圖形繪制完成），此時，根據(jù)不同的枚舉類型進行圖形繪制。

對于矩形圖形來說，只需要兩個有效的點就會完整對圖形的繪制，其中this-DrawRealShape中進行最終點的繪制。