快捷導(dǎo)航

Qt 實(shí)現(xiàn)鋼筆畫線效果示例及詳細(xì)原理

更新時(shí)間：2020年04月08日 09:36:55 作者：luoyayun361

這篇文章主要介紹了Qt 實(shí)現(xiàn)鋼筆畫線效果示例及詳細(xì)原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

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

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

實(shí)現(xiàn)原理

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

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

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

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

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

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

計(jì)算曲線的寬度，我寫了一個(gè)簡單的計(jì)算方法：

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是一個(gè)宏定義，曲線最大寬度；

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

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

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

看一下示意圖：

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

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

這段話有點(diǎn)拗口，拆解一下：

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

再看一種情況：

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

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

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

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ǔ)充點(diǎn)后的效果：