前言

上一篇文章：Qt 實現(xiàn)畫線筆鋒效果詳細(xì)原理，根據(jù)這篇介紹的實現(xiàn)筆鋒效果的原理，我們很容易實現(xiàn)另外一種筆效：鋼筆。

所謂的鋼筆筆效，就是真實還原鋼筆書寫出來的線條效果，其特征就是：根據(jù)筆的繪制速度而線條的寬度會逐漸變化，寫得越快，線條越細(xì)，并且在收筆時帶有筆鋒效果。

那么，在上一篇文章的基礎(chǔ)上，稍微修改一下，就可以實現(xiàn)這個效果，看下效果圖：

實現(xiàn)原理

從上一篇文章我們知道，繪制的曲線是通過每兩個點形成一條貝塞爾曲線，所以在不松手的情況下連續(xù)畫線，整條線段是包含很多條path組合而成的。而要實現(xiàn)鋼筆效果的關(guān)鍵，是要讓線條的粗細(xì)跟隨繪制的速度來變化。

之前看過很多Android上實現(xiàn)鋼筆或者毛筆的算法，都是需要計算去畫線速度，根據(jù)速度來動態(tài)改變線條的粗細(xì)。但是我這里沒有計算速度，而是直接通過每一段path的長度來計算一個合理的寬度值出來。

眾所周知，長度（也就是距離）= 速度*時間，在單位時間內(nèi)，速度和距離是成正比的，所以我們通過兩點間的距離來做判斷也是一樣的，沒多大區(qū)別，并且還不用單獨去計算速度了，簡單省事兒。

那么，我們要實現(xiàn)的效果是，畫線速度越快線條會越細(xì)，而畫線速度越快，所采集到的兩點間的距離就會越大，而我們是通過兩點間距離來做參考依據(jù)，也就是說，兩點間距和線條粗細(xì)是成反比的，兩點間距越長，對應(yīng)的這條path就越細(xì)，距離越短，path就越粗，二者是線性關(guān)系。當(dāng)然，這里path的寬度會有一個最大值和最小值，需要在實際的場景中進(jìn)行調(diào)試。

OK，根據(jù)以上分析，我們可以得到以下的示意圖：

每條path都是通過兩個坐標(biāo)點實時生成的貝塞爾曲線。
在繪制這條曲線的時候，先獲取到曲線的長度，然后線性計算出一個寬度值。
如何獲取path的長度呢？
這個好辦，QPainterPath有自帶的接口length()：

計算曲線的寬度，我寫了一個簡單的計算方法：

qreal WbCanvasItem::calPathWidth(QPainterPath path)
{
  qreal length = path.length();
  qreal width = PENWIDTH;

  qreal t = length/10. - 1;
  width = PENWIDTH - t;
  if(width < 3){ //最小寬度
    width = 3;
  }
  return width;
} 

PENWIDTH是一個宏定義，曲線最大寬度；

根據(jù)以上步驟，我們來看一下效果：

為了方便看效果，每條path用了不同的顏色來區(qū)分。我們可以很明顯的看到，path的寬度是不一樣的，并且每條path的連接處的寬度變化非常明顯，那么要怎么使其連接處變得平滑呢？

這時候就要用到上一篇介紹的方法進(jìn)行補(bǔ)點了。這里的補(bǔ)點比上一篇文章中說的稍微麻煩點，需要將中間那根線條的兩頭都要補(bǔ)充點，其原理是一樣的。

看一下示意圖：

以上紅色圈圈部分，就是補(bǔ)充的點。
從以上圖可以看到，path2是倒數(shù)第二條path，path3是最后一條path。

需要注意的是，圖中補(bǔ)充的兩個地方，并不是同一時間補(bǔ)充的，當(dāng)有新的path到來，只需要判斷最新的path和上一個path的寬度，從而決定是補(bǔ)充到上一個path還是當(dāng)前最新的path上。

這段話有點拗口，拆解一下：

假如這里path2是最后的一條path，而path1是倒數(shù)第二條，判斷出來path2寬度筆path1小，那么就在path2的路徑上補(bǔ)充點；

再看一種情況：

同樣，這里path2是最后的一條path，而path1是倒數(shù)第二條，判斷出來path2寬度筆path1大，那么就在path1的路徑上補(bǔ)充點；

這樣描述就很容易理解了。

OK，我們看一下補(bǔ)充點的代碼：

void WbCanvasItem::drawPatchPoint2(QPainter *painter, QPainterPath lastPath,
                  QPainterPath curPath,
                  qreal lastWidth, qreal curWidth)
{
  qreal tPatchLength = 100.;
  if(lastWidth < curWidth){
    tPatchLength = calPatchLength(curPath.length());

    qreal temp = (curWidth-lastWidth)/tPatchLength;
    int k = 0;

    for (qreal i = 1;i > (100-tPatchLength)/100.; i-=0.01) {
      k++;
      painter->setPen(QPen(Qt::black,curWidth-temp*k, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin));
      painter->drawPoint(lastPath.pointAtPercent(i));
    }
  }
  else if(lastWidth > curWidth){

    tPatchLength = calPatchLength(curPath.length());

    qreal temp = (lastWidth-curWidth)/tPatchLength;
    int k = 0;

    for (qreal i = 0;i < tPatchLength/100.; i+=0.01) {
      k++;
      painter->setPen(QPen(Qt::black,lastWidth-temp*k, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin));
      painter->drawPoint(curPath.pointAtPercent(i));
    }
  }
}

看一下補(bǔ)充點后的效果：

這里的黑色部分就是動態(tài)補(bǔ)充上去的點。

好了， 整理原理分析完成，其實和前面一篇文章原理差不多，只是多了一步判斷距離然后計算線寬的過程。

到此這篇關(guān)于Qt 實現(xiàn)鋼筆畫線效果示例及詳細(xì)原理的文章就介紹到這了,更多相關(guān)Qt 鋼筆畫線內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論