# Qyoto 中的繪圖 II > 原文： [http://zetcode.com/gui/csharpqyoto/paintingII/](http://zetcode.com/gui/csharpqyoto/paintingII/) 在 Qyoto C# 編程教程的這一部分中，我們將繼續繪圖。 我們將提供一些更復雜的示例。 ## 甜甜圈形狀 第一個示例通過旋轉一堆橢圓來創建復雜的形狀。 ```cs using System; using QtCore; using QtGui; /** * ZetCode Qyoto C# tutorial * * This program draws a donut * shape. * * @author Jan Bodnar * website zetcode.com * last modified November 2012 */ public class QyotoApp : QMainWindow { public QyotoApp() { WindowTitle = "Donut"; PaintEvent += OnPaintEvent; Resize(350, 280); Move(300, 300); Show(); } private void OnPaintEvent(object sender, QEventArgs<QPaintEvent> e) { QPainter ptr = new QPainter(this); DrawDonut(ptr); ptr.End(); } void DrawDonut(QPainter ptr) { QColor col = new QColor(); col.SetNamedColor("#333333"); ptr.Pen = new QPen(col, 0.5); ptr.SetRenderHint(QPainter.RenderHint.Antialiasing); int h = Height; int w = Width; ptr.Translate(new QPoint(w/2, h/2)); for (double rot=0; rot < 360.0; rot+=5.0 ) { ptr.DrawEllipse(-125, -40, 250, 80); ptr.Rotate(5.0); } } [STAThread] public static int Main(String[] args) { new QApplication(args); new QyotoApp(); return QApplication.Exec(); } } ``` 在此示例中，我們創建一個甜甜圈。 形狀類似于曲奇，因此得名“甜甜圈”。 ```cs QColor color = new QColor(); color.SetNamedColor("#333333"); ``` 我們可以使用十六進制表示法來創建顏色對象。 ```cs int h = Height; int w = Width; ``` 在這里，我們確定窗口的寬度和高度。 ```cs ptr.Translate(new QPoint(w/2, h/2)); ``` 我們將坐標系移到窗口的中間。 這樣，我們使繪圖在數學上更容易。 ```cs for (double rot=0; rot < 360.0; rot+=5.0 ) { ptr.DrawEllipse(-125, -40, 250, 80); ptr.Rotate(5.0); } ``` 我們繪制一個橢圓對象 72 次。 每次，我們將橢圓旋轉 5 度。 這將創建我們的甜甜圈形狀。  圖：多納圈 ## 灰度圖像 在下面的示例中，我們將創建一個灰度圖像。 ```cs using System; using QtGui; using QtCore; /** * ZetCode Qyoto C# tutorial * * In this example, we create a * grayscale image. * * @author Jan Bodnar * website zetcode.com * last modified November 2012 */ public class QyotoApp : QMainWindow { QImage sid; int w, h = 0; public QyotoApp() { WindowTitle = "Gray scale"; PaintEvent += OnPaintEvent; LoadImage(); Resize(320, 150); Move(300, 300); Show(); } private void OnPaintEvent(object sender, QEventArgs<QPaintEvent> e) { QPainter ptr = new QPainter(this); DrawImages(ptr); ptr.End(); } void DrawImages(QPainter ptr) { ptr.DrawImage(5, 15, sid); ptr.DrawImage(w + 10, 15, GrayScale(sid.Copy())); } void LoadImage() { sid = new QImage("smallsid.jpg"); w = sid.Width(); h = sid.Height(); } QImage GrayScale(QImage img) { for (int i=0; i < w; i++) { for (int j=0; j < h; j++) { uint c = img.Pixel(i, j); int gray = Global.qGray(c); int alpha = Global.qAlpha(c); img.SetPixel(i, j, Global.qRgba(gray, gray, gray, alpha)); } } return img; } public static int Main(String[] args) { new QApplication(args); new QyotoApp(); return QApplication.Exec(); } } ``` 我們有一個彩色 JPG 圖像。 我們把它畫在窗口上。 我們創建圖像的副本，將其轉換為灰度并在原始圖像旁邊的窗口上繪制。 ```cs void LoadImage() { sid = new QImage("smallsid.jpg"); w = sid.Width(); h = sid.Height(); } ``` 在`LoadImage()`方法中，我們加載圖像并獲取其寬度和高度。 ```cs QImage GrayScale(QImage img) { for (int i=0; i < w; i++) { for (int j=0; j < h; j++) { uint c = img.Pixel(i, j); int gray = Global.qGray(c); int alpha = Global.qAlpha(c); img.SetPixel(i, j, Global.qRgba(gray, gray, gray, alpha)); } } return img; } ``` `GrayScale()`方法將圖像轉換為灰度并返回。 我們遍歷圖像的所有像素。 `Pixel()`方法返回有問題的像素。 我們使用`Global.qGray()`方法來獲取特定像素的灰度值。 同樣，我們獲得 alpha 值。 最后，我們使用`SetPixel()`方法修改像素。 我們將灰色值用于顏色的紅色，綠色和藍色部分。  圖：灰度圖像 ## 反射 在下一個示例中，我們顯示反射圖像。 該效果使人產生幻覺，好像圖像在水中被反射一樣。 ```cs using System; using QtGui; using QtCore; /** * ZetCode Qyoto C# tutorial * * In this example we create a reflected image. * * @author Jan Bodnar * website zetcode.com * last modified November 2012 */ public class QyotoApp : QMainWindow { QImage img; QImage reflected_img; int iw, ih = 0; double initial_opacity = 0.7; double opacity = 0.7; double step = 0; const int GAP = 30; public QyotoApp() { WindowTitle = "Reflection"; PaintEvent += OnPaintEvent; InitExample(); Resize(300, 400); Move(150, 150); Show(); } private void OnPaintEvent(object sender, QEventArgs<QPaintEvent> e) { QPainter ptr = new QPainter(this); DrawImages(ptr); ptr.End(); } void InitExample() { img = new QImage("slanec.png"); if (img.IsNull()) { Console.WriteLine("Error loading image"); } iw = img.Width(); ih = img.Height(); step = opacity / ih; reflected_img = new QImage(iw, ih, QImage.Format.Format_RGB32); CreateReflectedImage(); } void CreateReflectedImage() { QPainter fptr = new QPainter(reflected_img); int i = 0; double opacity = 0.7; while (i < ih) { i++; opacity = opacity - step; fptr.Opacity = initial_opacity-opacity; fptr.DrawImage(0, i, img, 0, i, -1, 1); } fptr.End(); } void DrawImages(QPainter ptr) { int w = Width; int h = Height; ptr.FillRect(0, 0, w, h, Qt.GlobalColor.black); ptr.SetRenderHint(QPainter.RenderHint.Antialiasing); QRect r = new QRect(25, 15, iw, ih); ptr.DrawImage(r, img); ptr.Translate(0, 2 * ih + GAP); ptr.Scale(1, -1); ptr.DrawImage(25, 0, reflected_img); } public static int Main(String[] args) { new QApplication(args); new QyotoApp(); return QApplication.Exec(); } } ``` 我們從當前工作目錄加載圖像。 我們創建另一個相同大小的空圖像。 我們將原始圖像逐行復制到新的空白圖像，并逐漸增加透明度。 ```cs img = new QImage("slanec.png"); if (img.IsNull()) { Console.WriteLine("Error loading image"); } ``` 我們加載一個 PNG 圖片，并進行一些錯誤檢查。 ```cs iw = img.Width(); ih = img.Height(); step = opacity / ih; ``` 我們得到圖像的寬度和高度。 步進變量控制第二張圖像淡出的強度。 ```cs reflected_img = new QImage(iw, ih, QImage.Format.Format_RGB32); ``` 創建一個新的空圖像。 它具有原始圖像的大小。 ```cs void CreateReflectedImage() { QPainter fptr = new QPainter(reflected_img); ... ``` 在`CreateReflectedImage()`方法中，我們繪制空白圖像。 ```cs while (i < ih) { i++; opacity = opacity - step; fptr.Opacity = initial_opacity-opacity; fptr.DrawImage(0, i, img, 0, i, -1, 1); } ``` 我們將原始圖像復制到新圖像。 逐行。 不透明度在每個循環中逐步降低。 ```cs QRect r = new QRect(25, 15, iw, ih); ptr.DrawImage(r, img); ``` 第一個圖像繪制在窗口上。 ```cs ptr.Translate(0, 2 * ih + GAP); ptr.Scale(1, -1); ptr.DrawImage(25, 0, reflected_img); ``` 在這里，我們將第二個圖像向下移動，比原始圖像低一些。 `Scale()`方法將圖像上下翻轉。 請注意，平移是圖像高度的兩倍。 這是必要的，因為縮放操作不僅會翻轉圖像，還會使圖像向上移動。 要了解這一點，只需拍攝一張照片，將其放在桌子上并翻轉即可。  圖：反射圖像 ## 等待效果 在此示例中，我們使用透明效果創建一個等待演示。 我們將繪制 8 條線，這些線將逐漸消失，從而產生一條線在移動的錯覺。 此類效果通常用于通知用戶幕后正在進行繁重的任務。 一個示例是通過互聯網流式傳輸視頻。 ```cs using System; using QtGui; using QtCore; /** * ZetCode Qyoto C# tutorial * * This program draws basic shapes * available in Qyoto. * * @author Jan Bodnar * website zetcode.com * last modified November 2012 */ public class QyotoApp : QMainWindow { int count = 0; double[,] trs = { { 0.0, 0.15, 0.30, 0.5, 0.65, 0.80, 0.9, 1.0 }, { 1.0, 0.0, 0.15, 0.30, 0.5, 0.65, 0.8, 0.9 }, { 0.9, 1.0, 0.0, 0.15, 0.3, 0.5, 0.65, 0.8 }, { 0.8, 0.9, 1.0, 0.0, 0.15, 0.3, 0.5, 0.65 }, { 0.65, 0.8, 0.9, 1.0, 0.0, 0.15, 0.3, 0.5 }, { 0.5, 0.65, 0.8, 0.9, 1.0, 0.0, 0.15, 0.3 }, { 0.3, 0.5, 0.65, 0.8, 0.9, 1.0, 0.0, 0.15 }, { 0.15, 0.3, 0.5, 0.65, 0.8, 0.9, 1.0, 0.0 } }; public QyotoApp() { WindowTitle = "Waiting"; PaintEvent += OnPaintEvent; InitExample(); Resize(300, 200); Move(300, 300); Show(); } private void OnPaintEvent(object sender, QEventArgs<QPaintEvent> e) { QPainter ptr = new QPainter(this); DrawLines(ptr); ptr.End(); } void InitExample() { count = 0; StartTimer(105); } void DrawLines(QPainter ptr) { QPen pen = new QPen(); pen.Width = 3; pen.CapStyle = PenCapStyle.RoundCap; int w = Width; int h = Height; ptr.Translate(w/2, h/2); ptr.Pen = pen; int len = trs.GetLength(0); for (int i=0; i < len; i++) { ptr.Opacity = trs[count%8, i]; ptr.DrawLine(0, -10, 0, -40); ptr.Rotate(45); } } protected override void OnTimerEvent(QTimerEvent e) { count++; Repaint(); } public static int Main(String[] args) { new QApplication(args); new QyotoApp(); return QApplication.Exec(); } } ``` 我們用八個不同的 alpha 值繪制八條線。 ```cs double[,] trs = { { 0.0, 0.15, 0.30, 0.5, 0.65, 0.80, 0.9, 1.0 }, { 1.0, 0.0, 0.15, 0.30, 0.5, 0.65, 0.8, 0.9 }, ... ``` 這是透明度值的數組。 有 8 行，每行一個位置。 8 行中的每行將連續使用這些值。 ```cs count = 0; StartTimer(105); ``` 在這里，我們啟動計數值并啟動一個計時器。 ```cs QPen pen = new QPen(); pen.Width = 3; pen.CapStyle = PenCapStyle.RoundCap; ``` 我們使線條更粗一些，以使它們更加可見。 我們用圓帽畫線。 帶圓帽的線條看起來更好。 ```cs for (int i=0; i < len; i++) { ptr.Opacity = trs[count%8, i]; ptr.DrawLine(0, -10, 0, -40); ptr.Rotate(45); } ``` 在此循環中，我們設置不透明度值。 我們畫線并旋轉它。 這產生了移動和漸隱線的錯覺。 ```cs protected override void OnTimerEvent(QTimerEvent e) { count++; Repaint(); } ``` 每次調用計時器事件時，我們都會增加計數值并重新繪制窗口區域。  圖：等待 effect 在 Qyoto C# 編程教程的這一部分中，我們結束了有關在 Qyoto 中繪圖的討論。