閱讀942 返回首頁    go 阿裏雲 go 技術社區[雲棲]

[Qt教程] 第14篇 2D繪圖（四）繪製路徑

[Qt教程] 第14篇 2D繪圖（四）繪製路徑

樓主
 發表於 2013-4-27 12:40:52 | 查看: 611| 回複: 0
繪製路徑

版權聲明
該文章原創於Qter開源社區（www.qter.org），作者yafeilinux，轉載請注明出處！



導語
如果要繪製一個複雜的圖形，尤其是要重複繪製這樣的圖形，那麼可以使用QPainterPath類，然後使用QPainter::drawPath()來進行繪製。QPainterPath類為繪製操作提供了一個容器，可以用來創建圖形並且重複使用。一個繪圖路徑就是由多個矩形、橢圓、線條或者曲線等組成的對象，一個路徑可以是封閉的，例如矩形和橢圓；也可以是非封閉的，例如線條和曲線。



環境：Windows Xp + Qt 4.8.4+QtCreator 2.6.2



目錄
一、簡單的使用路徑
二、複製圖形
三、繪製圖形時的當前位置




正文

一、簡單的使用路徑

       依然在前麵的項目中進行講解。更改paintEvent()函數如下：
void MainWindow::paintEvent(QPaintEvent *)
{
    QPainterPath path;
    path.addEllipse(100, 100, 50, 50);
    path.lineTo(200, 200);
    QPainter painter(this);
    painter.setPen(Qt::blue);
    painter.setBrush(Qt::red);
    painter.drawPath(path);
}

       當創建一個QPainterPath對象後，可以使用lineTo()、arcTo()、cubicTo()和quadTo()等函數將直線或者曲線添加到路徑中。運行程序，效果如下圖所示。
14-1.jpg



二、複製圖形

       如果隻是簡單的將幾個圖形拚接在一起，其實完全沒有必要用路徑，之所以要引入路徑，就是因為它的一個非常有用的功能：複製圖形路徑。我們在painEvent()函數中繼續添加下麵幾行代碼：
QPainterPath path2;
path2.addPath(path);
path2.translate(100,0);
painter.drawPath(path2);
    現在運行程序，效果如下圖所示。
14-2.jpg


       可以看到，對於已經繪製好的路徑，可以非常簡單的進行重複繪製。



三、繪製圖形時的當前位置

1.我們先來看個例子，將paintEvent()函數更改如下：

void MainWindow::paintEvent(QPaintEvent *)
{
    QPainterPath path;
    path.lineTo(100,100);
    path.lineTo(200,100);
    QPainter painter(this);
    painter.drawPath(path);
}
       程序運行效果如下圖所示。
14-3.jpg

       可以看到，創建路徑後，默認是從(0, 0)點開始繪製的，當繪製完第一條直線後當前位置是(100, 100)點，從這裏開始繪製第二條直線。繪製完第二條直線後，當前位置是(200,100)。


2.再來看一個例子。將paintEvent()函數的內容更改如下：
void MainWindow::paintEvent(QPaintEvent *)
{
    QPainterPath path;
    path.addRect(50, 50, 40, 40);
    path.lineTo(200, 200);
    QPainter painter(this);
    painter.drawPath(path);
}
       運行程序，效果如下圖所示。
14-4.jpg

       可以發現，當繪製完矩形後，當前位置在矩形的左上角頂點，然後從這裏開始繪製後麵的直線。


4.我們也可以使用moveTo()函數來改變當前點的位置。例如將上麵的代碼更改為：

void MainWindow::paintEvent(QPaintEvent *)
{
    QPainterPath path;
    path.addRect(50, 50, 40, 40);
    //移動到(100, 100)點
    path.moveTo(100, 100);
    path.lineTo(200, 200);
    QPainter painter(this);
    painter.drawPath(path);
}

       這樣當繪製完矩形以後，就會移動到(100, 100)點進行後麵的繪製。程序運行效果如下圖所示。
14-5.jpg



結語
       這裏隻講解了QPainterPath最基本的應用，使用好這個類可以繪製出很多特效圖形。如果繪製的兩個圖形有交集，那麼還要涉及到相交部分的填充規則問題，這部分內容可以參考《Qt Creator快速入門》第10章的相關內容。





涉及到的源碼下載：  painter_1.zip (2.11 KB, 下載次數: 5) 

最後更新：2017-04-03 14:54:15

  上一篇：go [Qt教程] 第33篇 網絡（三）FTP（一）
  下一篇：go [Qt教程] 第17篇 2D繪圖（七）塗鴉板