前言

Qt通過鼠標(biāo)或者觸屏，實時繪制平滑曲線，通常有兩種方式實現(xiàn)：矢量繪圖和非矢量繪圖，這兩種畫線方式從實現(xiàn)上有些不同，其原理也不太一樣，稍后會做詳細(xì)介紹。而鼠標(biāo)或者觸屏畫線也不大一樣，通常如果只實現(xiàn)鼠標(biāo)畫線的話，那么只需要重新實現(xiàn)鼠標(biāo)事件即可（mousePressEvent、mouseMoveEvent、mouseReleaseEvent)，而要在觸控屏上畫線，如果需要支持多點畫線的話，就必須處理QTouchEvent事件才行，但是如果觸屏上只支持單點畫線，那也可以直接實現(xiàn)鼠標(biāo)事件，因為第一個觸點的事件會同時進(jìn)入到QTouchEvent和Mouse事件中。QTouchEvent中可以區(qū)分出多點時每個觸點的id，通過id進(jìn)行區(qū)分每個點的數(shù)據(jù)。

通常情況下，為了提升繪圖效率，要實現(xiàn)這種繪圖的功能，都是用QGraphics體系來完成，因為QGraphics刷新機(jī)制和QWidget不太一樣，它可以做區(qū)域刷新，這樣能保證效率更高，特別是針對一些分辨率較高的設(shè)備，就很明顯了。具體這兩個體系間的區(qū)別就不在這里進(jìn)行描述。

所以，接下來為了演示矢量和非矢量畫圖方式，我們在QGraphics體系中實現(xiàn)一個簡單的畫板程序。注重畫線效率，保證線條平滑無折線，無鋸齒，支持多點畫線。

效果圖

先開看看非矢量繪圖的效果：

再看矢量繪圖效果：

二者區(qū)別

通過上面的兩個圖對比，相信大家已經(jīng)看出了一些區(qū)別。我們再詳細(xì)介紹一下這兩者的區(qū)別。

非矢量繪圖

• 優(yōu)點：速度快。非矢量繪圖原理是直接在一張圖片上進(jìn)行繪制，其渲染速度很快，即便是畫了很多線條， 也不會有卡頓的效果，擦除時同樣很快。
• 缺點：縮放失真。由于非矢量繪圖是在圖片上渲染，當(dāng)縮放圖片時，會導(dǎo)致線條模糊不清晰，如果只是小范圍的縮放還能接受，無限縮放的話就會很明顯了。

矢量繪圖

• 優(yōu)點：無限縮放，不失真。矢量繪圖是將點數(shù)據(jù)繪制生成一個單獨的對象，當(dāng)進(jìn)行縮放的時候，會重新進(jìn)行渲染，所以矢量繪圖的方式不會導(dǎo)致圖像失真。
• 缺點：線條多時會卡頓，擦除尤其明顯。由于矢量繪圖是生成一個單獨的對象，所以當(dāng)畫線多的情況下，會觸發(fā)所有有交集的對象進(jìn)行刷新，擦除的時候，會去計算線條之間的交集并做刪減，這個過程會很慢，并且會將整個對象item進(jìn)行刷新，所以卡頓明顯（上述效果圖就可以看出來了）。

通過以上兩者的優(yōu)缺點對比，根據(jù)實際需要進(jìn)行選擇實際的畫線模式。

解決實時繪圖折線問題

折線效果：

可以看到上述畫線有很明顯的折線，線條不平滑。

通常繪制這種線條，第一反應(yīng)想到的是講兩個點直接連接起來行成一條直線，但是，由于兩點之間距離比較大，特別是觸控屏，點與點之間并不是很密集，因為上層應(yīng)用在主線程渲染的時候，系統(tǒng)會自動丟棄一些數(shù)據(jù)點，即便是底層上報的點很多，上層應(yīng)用接收到的點也會減少，所以不能直接用連接兩點的方式來實現(xiàn)。

那么，該怎么解決呢？
繪制貝塞爾曲線。

在move的過程中實時生成貝塞爾曲線path，這樣就能保證線條無折線。QPainterPath支持貝塞爾曲線繪制，參加以下函數(shù)：

void QPainterPath::quadTo(const QPointF &c, const QPointF &endPoint)

Adds a quadratic Bezier curve between the current position and the given endPoint with the control point specified by c.
After the curve is added, the current point is updated to be at the end point of the curve.

注意該函數(shù)，第一個參數(shù)是控制點，該點就是上一個觸控點，而第二個參數(shù)是前一個點和當(dāng)前點的中點，也就是兩個點坐標(biāo)加起來除以2.

非矢量繪圖實現(xiàn)方式

所謂的非矢量繪圖，就是在一張圖片上進(jìn)行繪制，然后將圖片渲染到QGraphicsItem的背景上面，前面我們已經(jīng)提到，該方式渲染速度非常快，無論畫多少線條都不會影響速度，而擦除功能只需要按照同樣的方式繪制背景色即可。

但是該方式在縮放過后圖片會有些模糊，如果只是小范圍的縮放還好，無限縮放就需要用到矢量繪圖的方式了。

矢量繪圖實現(xiàn)方式

相比之下，矢量繪圖就會稍微麻煩一點，所謂矢量繪圖，就是將path曲線直接生成一個獨立的對象，將該對象添加到scene中，這種模式下會有一個缺陷，就是當(dāng)畫線較多的情況下，刷新會比較慢，因為會導(dǎo)致整條曲線（只要有交集）刷新，從而導(dǎo)致卡頓的效果，并且在擦除時，需要實時計算擦除的path與實際線條path的交集，然后進(jìn)行計算，減去擦除的path，這個過程是最耗時的，并且也會引發(fā)整個item刷新。前面寫過文章介紹QGraphics體系的刷新機(jī)制，在這里

由于矢量繪圖需要生成一條完整的path進(jìn)行繪制，而觸控點是在move事件中取到，如果實時生成貝塞爾曲線去繪制，那么當(dāng)一直不松手的畫一條線時，畫到后面將會越來越慢，因為動態(tài)生成path后會重新將整條path進(jìn)行渲染，隨著線條越長，那么刷新區(qū)域就會越大，這就會導(dǎo)致刷新變慢而延遲變高。那么怎么解決這個問題呢？答案就是通過雙緩沖的方式來實現(xiàn)繪制。

雙緩沖繪圖

上面介紹到，通過非矢量繪圖的方式，速度會非常快，那么雙緩沖繪圖就是要結(jié)合非矢量來進(jìn)行，其原理就是：在press事件中生成一條path，接著move中動態(tài)增加這條path，然后在臨時層上進(jìn)行非矢量繪圖，這時候繪制的速度會非?？?，最后在release事件中將完整的path繪制成矢量圖，然后將臨時層畫線清空。基本原理就是這樣。

雙緩沖繪圖方式，在繪制過程中是通過非矢量的方式在臨時層進(jìn)行，release后生成完整的矢量path，這種方式速度會非?？欤⑶抑苯永L制完整的一條path不會有鋸齒。所以這是最佳選擇。

代碼太多，就不附代碼了。

到此這篇關(guān)于Qt 鼠標(biāo)/觸屏繪制平滑曲線(支持矢量/非矢量方式)的文章就介紹到這了,更多相關(guān)Qt 繪制平滑曲線內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論