# 用 Ruby Qt 繪圖 > 原文： [http://zetcode.com/gui/rubyqt/painting/](http://zetcode.com/gui/rubyqt/painting/) 在 Ruby Qt 編程教程的這一部分中，我們將進行繪圖。 我們什么時候需要油漆？ 在某些情況下，當我們需要從頭開始創建小部件時。 在這種情況下，我們需要繪圖。 或者我們想創建圖表，特殊裝飾，效果或小部件增強。 當我們在 Qt 庫中進行繪圖時，`Painter`類將發揮作用。 繪圖事件通過`paintEvent`方法接收。 若要進行自定義繪圖，我們必須重新實現此方法。 ## 圖案 在 Qt 中，我們可以使用各種圖案來填充形狀的內部。 ```rb #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # # This program draws nine rectangles. # The interiors are filled with # different built-in patterns. # # author: jan bodnar # website: www.zetcode.com # last modified: June 2009 require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "Patterns" resize 350, 280 move 300, 300 show end def paintEvent event painter = Qt::Painter.new self drawPatterns painter painter.end end def drawPatterns painter painter.setPen Qt::NoPen painter.setBrush Qt::HorPattern painter.drawRect 10, 15, 90, 60 painter.setBrush Qt::VerPattern painter.drawRect 130, 15, 90, 60 painter.setBrush Qt::CrossPattern painter.drawRect 250, 15, 90, 60 painter.setBrush Qt::Dense7Pattern painter.drawRect 10, 105, 90, 60 painter.setBrush Qt::Dense6Pattern painter.drawRect 130, 105, 90, 60 painter.setBrush Qt::Dense5Pattern painter.drawRect 250, 105, 90, 60 painter.setBrush Qt::BDiagPattern painter.drawRect 10, 195, 90, 60 painter.setBrush Qt::FDiagPattern painter.drawRect 130, 195, 90, 60 painter.setBrush Qt::DiagCrossPattern painter.drawRect 250, 195, 90, 60 end end app = Qt::Application.new ARGV QtApp.new app.exec ``` 在代碼示例中，我們將繪制九個矩形，并用不同的畫筆圖案填充它們。 ```rb def paintEvent event painter = Qt::Painter.new self drawPatterns painter painter.end end ``` 當需要重繪窗口區域時，將調用`paintEvent`方法。 當我們調整窗口大小，最大化或最小化窗口時，就會發生這種情況。在此方法中，我們創建了`Painter`對象。 該對象用于在 Qt 中進行所有繪制。 繪圖本身被委托給`drawPatterns`方法。 ```rb painter.setPen Qt::NoPen ``` 筆對象用于繪制形狀的輪廓。 在我們的示例中，我們將不使用筆。 ```rb painter.setBrush Qt::HorPattern ``` 我們將水平圖案設置為畫筆。 ```rb painter.drawRect 10, 15, 90, 60 ``` 我們用當前的筆和畫筆繪制一個矩形。 該方法的前兩個參數是 x，y 坐標。 最后兩個參數是矩形的寬度和高度。 ```rb painter.end ``` `end`方法完成繪制。 釋放繪圖時使用的所有資源。  圖：圖案 ## 形狀 Qt 繪圖 API 可以繪制各種形狀。 以下編程代碼示例將顯示其中的一些。 ```rb #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # # This program draws basic shapes # # author: jan bodnar # website: www.zetcode.com # last modified: June 2009 require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "Basic shapes" resize 350, 280 move 300, 300 show end def paintEvent event painter = Qt::Painter.new self drawShapes painter painter.end end def drawShapes painter painter.setRenderHint Qt::Painter::Antialiasing painter.setPen Qt::Color.new 150, 150, 150 painter.setBrush Qt::Brush.new Qt::Color.new 150, 150, 150 path1 = Qt::PainterPath.new path1.moveTo 5, 5 path1.cubicTo 40, 5, 50, 50, 99, 99 path1.cubicTo 5, 99, 50, 50, 5, 5 painter.drawPath path1 painter.drawPie 130, 20, 90, 60, 30*16, 120*16 painter.drawChord 240, 30, 90, 60, 0, 16*180 painter.drawRoundRect 20, 120, 80, 50 points = [] points.push Qt::Point.new 130, 140 points.push Qt::Point.new 180, 170 points.push Qt::Point.new 180, 140 points.push Qt::Point.new 220, 110 points.push Qt::Point.new 140, 100 polygon = Qt::Polygon.new points painter.drawPolygon polygon painter.drawRect 250, 110, 60, 60 baseline = Qt::PointF.new 20, 250 font = Qt::Font.new "Georgia", 55 path2 = Qt::PainterPath.new path2.addText baseline, font, "Q" painter.drawPath path2 painter.drawEllipse 140, 200, 60, 60 painter.drawEllipse 240, 200, 90, 60 end end app = Qt::Application.new ARGV QtApp.new app.exec ``` 在此代碼示例中，我們在窗口上繪制了九種不同的形狀。 復雜路徑，餅圖，和弦，圓角矩形，多邊形，矩形，基于字符的形狀，圓形和橢圓形。 ```rb painter.setRenderHint Qt::Painter::Antialiasing ``` 我們在示例中使用抗鋸齒。 抗鋸齒形狀看起來更好，但是繪制它們需要更多時間。 ```rb painter.setPen Qt::Color.new 150, 150, 150 painter.setBrush Qt::Brush.new Qt::Color.new 150, 150, 150 ``` 我們使用深灰色的筆和畫筆繪制形狀。 ```rb path1 = Qt::PainterPath.new path1.moveTo 5, 5 path1.cubicTo 40, 5, 50, 50, 99, 99 path1.cubicTo 5, 99, 50, 50, 5, 5 painter.drawPath path1 ``` 使用`PainterPath`對象創建第一個復雜形狀。 `PainterPath`類為繪圖操作提供了一個容器。 畫家路徑是由許多圖形構造塊（例如矩形，橢圓形，直線和曲線）組成的對象。 ```rb painter.drawPie 130, 20, 90, 60, 30*16, 120*16 painter.drawChord 240, 30, 90, 60, 0, 16*180 painter.drawRoundRect 20, 120, 80, 50 ``` 這三條線繪制了一個餅圖，一個和弦和一個圓角矩形。 ```rb points = [] points.push Qt::Point.new 130, 140 points.push Qt::Point.new 180, 170 points.push Qt::Point.new 180, 140 points.push Qt::Point.new 220, 110 points.push Qt::Point.new 140, 100 polygon = Qt::Polygon.new points painter.drawPolygon polygon ``` 我們使用五個點的數組來創建多邊形。 ```rb baseline = Qt::PointF.new 20, 250 font = Qt::Font.new "Georgia", 55 path2 = Qt::PainterPath.new path2.addText baseline, font, "Q" painter.drawPath path2 ``` 這些線創建基于字符的形狀。 ```rb painter.drawEllipse 140, 200, 60, 60 painter.drawEllipse 240, 200, 90, 60 ``` 這兩條線分別創建一個圓和一個橢圓。  圖：形狀 ## 透明矩形 透明度是能夠透視材料的質量。 了解透明度的最簡單方法是想象一塊玻璃或水。 從技術上講，光線可以穿過玻璃，這樣我們就可以看到玻璃后面的物體。 在計算機圖形學中，我們可以使用 alpha 合成實現透明效果。 Alpha 合成是將圖像與背景組合以創建部分透明外觀的過程。 合成過程使用 Alpha 通道。 （wikipedia.org，answers.com） ```rb #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # # This program draws ten # rectangles with different # levels of transparency. # # author: jan bodnar # website: www.zetcode.com # last modified: June 2009 require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "Transparent rectangles" resize 590, 90 move 300, 300 show end def paintEvent event painter = Qt::Painter.new self drawRectangles painter painter.end end def drawRectangles painter painter.setPen Qt::NoPen for i in 1..10 painter.setBrush Qt::Brush.new Qt::Color.new 0, 0, 255, i*25 painter.drawRect 50*i, 20, 40, 40 end end end app = Qt::Application.new ARGV QtApp.new app.exec ``` 在示例中，我們將繪制十個具有不同透明度級別的矩形。 ```rb painter.setPen Qt::NoPen ``` 我們不用筆。 ```rb for i in 1..10 painter.setBrush Qt::Brush.new Qt::Color.new 0, 0, 255, i*25 painter.drawRect 50*i, 20, 40, 40 end ``` `Color`對象的最后一個參數是 alpha 透明度值。  圖：透明矩形 ## 甜甜圈形狀 在下面的示例中，我們通過旋轉一堆橢圓來創建復雜的形狀。 ```rb #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # # This program draws a donut # shape # # author: jan bodnar # website: www.zetcode.com # last modified: June 2009 require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "Donut" resize 350, 280 move 300, 300 show end def paintEvent event painter = Qt::Painter.new self drawDonut painter painter.end end def drawDonut painter painter.setRenderHint Qt::Painter::Antialiasing color = Qt::Color.new color.setNamedColor "#333333" pen = Qt::Pen.new color pen.setWidth 1 painter.setPen pen w = width h = height painter.translate Qt::Point.new w/2, h/2 72.times do painter.drawEllipse -125, -40, 250, 80 painter.rotate 5.0 end end end app = Qt::Application.new ARGV QtApp.new app.exec ``` 在此示例中，我們創建一個甜甜圈。 形狀類似于曲奇，因此得名“甜甜圈”。 ```rb color = Qt::Color.new color.setNamedColor "#333333" ``` 我們可以使用十六進制表示法來創建顏色對象。 ```rb w = width h = height ``` 在這里，我們確定窗口的寬度和高度。 ```rb painter.translate Qt::Point.new w/2, h/2 ``` 我們將坐標系移到窗口的中間。 這樣，我們使繪圖在數學上更容易。 ```rb 72.times do painter.drawEllipse -125, -40, 250, 80 painter.rotate 5.0 end ``` 我們繪制一個橢圓對象 72 次。 每次，我們將橢圓旋轉 5 度。 這將創建我們的甜甜圈形狀。  圖：多納圈 ## 繪制文字 在最后一個示例中，我們將在窗口上繪制文本。 ```rb #!/usr/bin/ruby # ZetCode Ruby Qt tutorial # # This program draws text # on the window # # author: jan bodnar # website: www.zetcode.com # last modified: June 2009 require 'Qt' class QtApp < Qt::Widget def initialize super setWindowTitle "Soulmate" resize 370, 240 move 300, 300 show end def paintEvent event painter = Qt::Painter.new self drawText painter painter.end end def drawText painter painter.setBrush Qt::Brush.new Qt::Color.new 25, 25, 25 painter.setFont Qt::Font.new "Purisa", 10 painter.drawText Qt::Point.new(20, 30), "Most relationships seem so transitory" painter.drawText Qt::Point.new(20, 60), "They're good but not the permanent one" painter.drawText Qt::Point.new(20, 120), "Who doesn't long for someone to hold" painter.drawText Qt::Point.new(20, 150), "Who knows how to love without being told" painter.drawText Qt::Point.new(20, 180), "Somebody tell me why I'm on my own" painter.drawText Qt::Point.new(20, 210), "If there's a soulmate for everyone" end end app = Qt::Application.new ARGV QtApp.new app.exec ``` 我們在窗口上畫一首歌歌詞。 ```rb painter.setFont Qt::Font.new "Purisa", 10 ``` 我們為文本設置了 Purisa 字體。 ```rb painter.drawText Qt::Point.new(20, 30), "Most relationships seem so transitory" ``` `drawText`方法用于繪制文本。  圖：繪制文本 在 Ruby Qt 編程教程的這一部分中，我們做了一些繪圖。