QtJambi 中的繪圖 · ZetCode 中文系列教程

# QtJambi 中的繪圖 > 原文： [http://zetcode.com/gui/qtjambi/painting/](http://zetcode.com/gui/qtjambi/painting/) 在 QtJambi 編程教程的這一部分中，我們將進行繪圖。我們什么時候需要油漆？在某些情況下，當我們需要從頭開始創建小部件時。在這種情況下，我們需要繪圖。或者我們想創建圖表，特殊裝飾，效果或小部件增強。當我們在 QtJambi 庫中進行繪圖時，`QPainter`類將發揮作用。繪圖事件通過`paintEvent()`方法接收。若要進行自定義繪圖，我們必須重新實現此方法。 ## 圖案在 QtJambi 中，我們可以使用各種圖案來填充形狀的內部。 ```java package com.zetcode; import com.trolltech.qt.core.Qt; import com.trolltech.qt.gui.QApplication; import com.trolltech.qt.gui.QPaintEvent; import com.trolltech.qt.gui.QPainter; import com.trolltech.qt.gui.QPen; import com.trolltech.qt.gui.QWidget; /** * ZetCode QtJambi tutorial * * This program draws nine rectangles. * The interiors are filled with * different built-in patterns. * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class JambiApp extends QWidget { public JambiApp() { setWindowTitle("Patterns"); resize(350, 280); move(400, 300); show(); } @Override protected void paintEvent(QPaintEvent event) { QPainter painter = new QPainter(this); drawPatterns(painter); } private void drawPatterns(QPainter painter) { painter.setPen(QPen.NoPen); painter.setBrush(Qt.BrushStyle.HorPattern); painter.drawRect(10, 15, 90, 60); painter.setBrush(Qt.BrushStyle.VerPattern); painter.drawRect(130, 15, 90, 60); painter.setBrush(Qt.BrushStyle.CrossPattern); painter.drawRect(250, 15, 90, 60); painter.setBrush(Qt.BrushStyle.Dense7Pattern); painter.drawRect(10, 105, 90, 60); painter.setBrush(Qt.BrushStyle.Dense6Pattern); painter.drawRect(130, 105, 90, 60); painter.setBrush(Qt.BrushStyle.Dense5Pattern); painter.drawRect(250, 105, 90, 60); painter.setBrush(Qt.BrushStyle.BDiagPattern); painter.drawRect(10, 195, 90, 60); painter.setBrush(Qt.BrushStyle.FDiagPattern); painter.drawRect(130, 195, 90, 60); painter.setBrush(Qt.BrushStyle.DiagCrossPattern); painter.drawRect(250, 195, 90, 60); painter.end(); } public static void main(String[] args) { QApplication.initialize(args); new JambiApp(); QApplication.exec(); } } ``` 在代碼示例中，我們將繪制九個矩形，并用不同的畫筆圖案填充它們。 ```java @Override protected void paintEvent(QPaintEvent event) { QPainter painter = new QPainter(this); drawPatterns(painter); } ``` 當需要重繪窗口區域時，將調用`paintEvent()`方法。當我們調整窗口大小，最大化或最小化窗口時，就會發生這種情況。在此方法中，我們創建了`QPainter`對象。此對象用于完成 QtJambi 中的所有繪圖。繪圖本身被委托給`drawPatterns()`方法。 ```java painter.setPen(QPen.NoPen); ``` 筆對象用于繪制形狀的輪廓。在我們的示例中，我們將不使用筆。 ```java painter.setBrush(Qt.BrushStyle.HorPattern); ``` 我們將水平圖案設置為畫筆。 ```java painter.drawRect(10, 15, 90, 60); ``` 我們使用當前的筆和畫筆繪制一個矩形。該方法的前兩個參數是 x，y 坐標。最后兩個參數是矩形的寬度和高度。 ```java painter.end(); ``` 結束繪圖。釋放繪圖時使用的所有資源。根據文檔，在 QtJambi 中不需要此調用。資源由析構器釋放。 ![Patterns](https://img.kancloud.cn/9a/a0/9aa03f30abece400abcdc7bede5e85f2_356x305.jpg) 圖：圖案 ## 形狀 QtJambi 繪圖 API 可以繪制各種形狀。以下編程代碼示例將顯示其中的一些。 ```java package com.zetcode; import com.trolltech.qt.core.QPoint; import com.trolltech.qt.core.QPointF; import com.trolltech.qt.gui.QApplication; import com.trolltech.qt.gui.QBrush; import com.trolltech.qt.gui.QColor; import com.trolltech.qt.gui.QFont; import com.trolltech.qt.gui.QPaintEvent; import com.trolltech.qt.gui.QPainter; import com.trolltech.qt.gui.QPainterPath; import com.trolltech.qt.gui.QPen; import com.trolltech.qt.gui.QPolygon; import com.trolltech.qt.gui.QWidget; import java.util.ArrayList; import java.util.List; /** * ZetCode QtJambi tutorial * * This program draws basic shapes * available in QtJambi * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class JambiApp extends QWidget { public JambiApp() { setWindowTitle("Shapes"); resize(350, 280); move(400, 300); show(); } @Override protected void paintEvent(QPaintEvent event) { QPainter painter = new QPainter(this); drawShapes(painter); } private void drawShapes(QPainter painter) { painter.setRenderHint(QPainter.RenderHint.Antialiasing); painter.setPen(new QPen(new QBrush(QColor.darkGray), 1)); painter.setBrush(QColor.darkGray); QPainterPath path1 = new QPainterPath(); 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); List<QPoint> points = new ArrayList<QPoint>(); points.add(new QPoint(130, 140)); points.add(new QPoint(180, 170)); points.add(new QPoint(180, 140)); points.add(new QPoint(220, 110)); points.add(new QPoint(140, 100)); QPolygon polygon = new QPolygon(points); painter.drawPolygon(polygon); painter.drawRect(250, 110, 60, 60); QPointF baseline = new QPointF(20, 250); QFont font = new QFont("Georgia", 55); QPainterPath path2 = new QPainterPath(); path2.addText(baseline, font, "Q"); painter.drawPath(path2); painter.drawEllipse(140, 200, 60, 60); painter.drawEllipse(240, 200, 90, 60); } public static void main(String[] args) { QApplication.initialize(args); new JambiApp(); QApplication.exec(); } } ``` 在此代碼示例中，我們在窗口上繪制了九種不同的形狀。復雜路徑，餅圖，和弦，圓角矩形，多邊形，矩形，基于字符的形狀，圓形和橢圓形。 ```java painter.setRenderHint(QPainter.RenderHint.Antialiasing); ``` 我們在示例中使用抗鋸齒。抗鋸齒形狀看起來更好，但是繪制它們需要更多時間。 ```java painter.setPen(new QPen(new QBrush(QColor.darkGray), 1)); painter.setBrush(QColor.darkGray); ``` 我們使用深灰色的筆和畫筆繪制形狀。 ```java QPainterPath path1 = new QPainterPath(); path1.moveTo(5, 5); path1.cubicTo(40, 5, 50, 50, 99, 99); path1.cubicTo(5, 99, 50, 50, 5, 5); painter.drawPath(path1); ``` 使用`QPainterPath`對象創建第一個復雜形狀。 `QPainterPath`類為繪圖操作提供了一個容器。畫家路徑是由許多圖形構造塊（例如矩形，橢圓形，直線和曲線）組成的對象。 ```java 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); ``` 這三行畫出一個餅圖，一個和弦和一個圓角矩形。 ```java List<QPoint> points = new ArrayList<QPoint>(); points.add(new QPoint(130, 140)); points.add(new QPoint(180, 170)); points.add(new QPoint(180, 140)); points.add(new QPoint(220, 110)); points.add(new QPoint(140, 100)); QPolygon polygon = new QPolygon(points); painter.drawPolygon(polygon); ``` 我們使用五個點的列表來創建多邊形。 ```java QPointF baseline = new QPointF(20, 250); QFont font = new QFont("Georgia", 55); QPainterPath path2 = new QPainterPath(); path2.addText(baseline, font, "Q"); painter.drawPath(path2); ``` 這些線創建基于字符的形狀。 ```java painter.drawEllipse(140, 200, 60, 60); painter.drawEllipse(240, 200, 90, 60); ``` 這兩條線分別創建一個圓和一個橢圓。 ![Shapes](https://img.kancloud.cn/47/8e/478eee4c52e3235b6b017ebb5a02264b_356x305.jpg) 圖：形狀 ## 透明矩形透明性是指能夠透視材料的質量。了解透明度的最簡單方法是想象一塊玻璃或水。從技術上講，光線可以穿過玻璃，這樣我們就可以看到玻璃后面的物體。在計算機圖形學中，我們可以使用 alpha 合成來實現透明效果。 Alpha 合成是將圖像與背景組合以創建部分透明外觀的過程。合成過程使用 Alpha 通道。（wikipedia.org，answers.com） ```java package com.zetcode; import com.trolltech.qt.gui.QApplication; import com.trolltech.qt.gui.QColor; import com.trolltech.qt.gui.QPaintEvent; import com.trolltech.qt.gui.QPainter; import com.trolltech.qt.gui.QPen; import com.trolltech.qt.gui.QWidget; /** * ZetCode QtJambi tutorial * * This program draws ten * rectangles with different * levels of transparency * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class JambiApp extends QWidget { public JambiApp() { setWindowTitle("Transparent rectangles"); resize(590, 90); move(400, 300); show(); } @Override protected void paintEvent(QPaintEvent event) { QPainter painter = new QPainter(this); drawRectangles(painter); } private void drawRectangles(QPainter painter) { painter.setPen(QPen.NoPen); for (int i=1; i<11; i++) { painter.setBrush(new QColor(0, 0, 255, i*25)); painter.drawRect(50*i, 20, 40, 40); } } public static void main(String[] args) { QApplication.initialize(args); new JambiApp(); QApplication.exec(); } } ``` 在示例中，我們將繪制十個具有不同透明度級別的矩形。 ```java painter.setPen(QPen.NoPen); ``` 我們不用筆。 ```java for (int i=1; i<11; i++) { painter.setBrush(new QColor(0, 0, 255, i*25)); painter.drawRect(50*i, 20, 40, 40); } ``` QColor 對象的最后一個參數是 alpha 透明度值。 ![Transparent rectangles](https://img.kancloud.cn/06/28/062818c5414b78ef1b9b1b6cda348f85_596x115.jpg) 圖：透明矩形 ## 甜甜圈形狀在下面的示例中，我們通過旋轉一堆橢圓來創建復雜的形狀。 ```java package com.zetcode; import com.trolltech.qt.core.QPoint; import com.trolltech.qt.gui.QApplication; import com.trolltech.qt.gui.QColor; import com.trolltech.qt.gui.QPaintEvent; import com.trolltech.qt.gui.QPainter; import com.trolltech.qt.gui.QPen; import com.trolltech.qt.gui.QWidget; /** * ZetCode QtJambi tutorial * * This program draws a donut * shape * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class JambiApp extends QWidget { public JambiApp() { setWindowTitle("Donut"); resize(350, 280); move(400, 300); show(); } @Override protected void paintEvent(QPaintEvent event) { QPainter painter = new QPainter(this); drawDonut(painter); } private void drawDonut(QPainter painter) { QColor color = new QColor(); color.setNamedColor("#333333"); painter.setPen(new QPen(color, 0.5)); painter.setRenderHint(QPainter.RenderHint.Antialiasing); int w = width(); int h = height(); painter.translate(new QPoint(w/2, h/2)); for (double rot=0; rot < 360.0; rot+=5.0 ) { painter.drawEllipse(-125, -40, 250, 80); painter.rotate(5.0); } } public static void main(String[] args) { QApplication.initialize(args); new JambiApp(); QApplication.exec(); } } ``` 在此示例中，我們創建一個甜甜圈。形狀類似于曲奇，因此得名“甜甜圈”。 ```java QColor color = new QColor(); color.setNamedColor("#333333"); ``` 我們可以使用十六進制表示法來創建顏色對象。 ```java int w = width(); int h = height(); ``` 在這里，我們確定窗口的寬度和高度。 ```java painter.translate(new QPoint(w/2, h/2)); ``` 我們將坐標系移到窗口的中間。這樣，我們使繪圖在數學上更容易。 ```java for (double rot=0; rot < 360.0; rot+=5.0 ) { painter.drawEllipse(-125, -40, 250, 80); painter.rotate(5.0); } ``` 我們繪制一個橢圓對象 72 次。每次，我們將橢圓旋轉 5 度。這將創建我們的甜甜圈形狀。 ![Donut](https://img.kancloud.cn/42/4e/424e9b56c7a6cc6373c5f03e71b8aa83_356x305.jpg) 圖：多納圈 ## 繪制文字在最后一個示例中，我們將在窗口上繪制文本。 ```java package com.zetcode; import com.trolltech.qt.core.QPoint; import com.trolltech.qt.gui.QApplication; import com.trolltech.qt.gui.QColor; import com.trolltech.qt.gui.QFont; import com.trolltech.qt.gui.QPaintEvent; import com.trolltech.qt.gui.QPainter; import com.trolltech.qt.gui.QWidget; /** * ZetCode QtJambi tutorial * * This program draws text * on the window * * @author jan bodnar * website zetcode.com * last modified March 2009 */ public class JambiApp extends QWidget { public JambiApp() { setWindowTitle("Soulmate"); resize(370, 240); move(400, 300); show(); } @Override protected void paintEvent(QPaintEvent event) { QPainter painter = new QPainter(this); drawLyrics(painter); } private void drawLyrics(QPainter painter) { painter.setBrush(new QColor(25, 25, 25)); painter.setFont(new QFont("Purisa", 10)); painter.drawText(new QPoint(20, 30), "Most relationships seem so transitory"); painter.drawText(new QPoint(20, 60), "They're good but not the permanent one"); painter.drawText(new QPoint(20, 120), "Who doesn't long for someone to hold"); painter.drawText(new QPoint(20, 150), "Who knows how to love without being told"); painter.drawText(new QPoint(20, 180), "Somebody tell me why I'm on my own"); painter.drawText(new QPoint(20, 210), "If there's a soulmate for everyone"); } public static void main(String[] args) { QApplication.initialize(args); new JambiApp(); QApplication.exec(); } } ``` 我們在窗口上畫一首歌歌詞。 ```java painter.setFont(new QFont("Purisa", 10)); ``` 我們為文本設置了 Purisa 字體。 ```java painter.drawText(new QPoint(20, 30), "Most relationships seem so transitory"); ``` `drawText()`方法用于繪制文本。 ![Drawing text](https://img.kancloud.cn/31/42/314270fefc07a0f0ae5b5ab148fd5a47_376x265.jpg) 圖：繪制文本在 QtJambi 編程教程的這一部分中，我們做了一些繪圖。