# GTK# 中的 Cario 繪圖 II > 原文： [http://zetcode.com/gui/gtksharp/drawingII/](http://zetcode.com/gui/gtksharp/drawingII/) 在 GTK# 編程教程的這一部分中，我們將繼續使用 Cairo 庫進行繪制。 ## 甜甜圈 在下面的示例中，我們通過旋轉一堆橢圓來創建復雜的形狀。 `donut.cs` ```cs using Gtk; using Cairo; using System; class SharpApp : Window { public SharpApp() : base("Donut") { SetDefaultSize(350, 250); SetPosition(WindowPosition.Center); DeleteEvent += delegate { Application.Quit(); }; DrawingArea darea = new DrawingArea(); darea.ExposeEvent += OnExpose; Add(darea); ShowAll(); } void OnExpose(object sender, ExposeEventArgs args) { DrawingArea area = (DrawingArea) sender; Cairo.Context cr = Gdk.CairoHelper.Create(area.GdkWindow); cr.LineWidth = 0.5; int width, height; width = Allocation.Width; height = Allocation.Height; cr.Translate(width/2, height/2); cr.Arc(0, 0, 120, 0, 2*Math.PI); cr.Stroke(); cr.Save(); for (int i = 0; i < 36; i++) { cr.Rotate( i*Math.PI/36); cr.Scale(0.3, 1); cr.Arc(0, 0, 120, 0, 2*Math.PI); cr.Restore(); cr.Stroke(); cr.Save(); } ((IDisposable) cr.Target).Dispose(); ((IDisposable) cr).Dispose(); } public static void Main() { Application.Init(); new SharpApp(); Application.Run(); } } ``` 在此示例中，我們創建一個甜甜圈。 形狀類似于曲奇，因此稱為甜甜圈。 ```cs cr.Translate(width/2, height/2); cr.Arc(0, 0, 120, 0, 2*Math.PI); cr.Stroke(); ``` 剛開始時有一個橢圓。 ```cs for (int i = 0; i < 36; i++) { cr.Rotate( i*Math.PI/36); cr.Scale(0.3, 1); cr.Arc(0, 0, 120, 0, 2*Math.PI); cr.Restore(); cr.Stroke(); cr.Save(); } ``` 旋轉幾圈后，有一個甜甜圈。  圖：多納圈 ## 漸變 在計算機圖形學中，漸變是從淺到深或從一種顏色到另一種顏色的陰影的平滑混合。 在 2D 繪圖程序和繪圖程序中，漸變用于創建彩色背景和特殊效果以及模擬燈光和陰影。 （answers.com） `gradients.cs` ```cs using Gtk; using Cairo; using System; class SharpApp : Window { public SharpApp() : base("Gradients") { SetDefaultSize(340, 390); SetPosition(WindowPosition.Center); DeleteEvent += delegate { Application.Quit(); }; DrawingArea darea = new DrawingArea(); darea.ExposeEvent += OnExpose; Add(darea); ShowAll(); } void OnExpose(object sender, ExposeEventArgs args) { DrawingArea area = (DrawingArea) sender; Cairo.Context cr = Gdk.CairoHelper.Create(area.GdkWindow); LinearGradient lg1 = new LinearGradient(0.0, 0.0, 350.0, 350.0); int count = 1; for (double j=0.1; j<1.0; j+= 0.1) { if (Convert.ToBoolean(count % 2)) { lg1.AddColorStop(j, new Color(0, 0, 0, 1)); } else { lg1.AddColorStop(j, new Color(1, 0, 0, 1)); } count++; } cr.Rectangle(20, 20, 300, 100); cr.Pattern = lg1; cr.Fill(); LinearGradient lg2 = new LinearGradient(0.0, 0.0, 350.0, 0); count = 1; for (double i=0.05; i<0.95; i+= 0.025) { if (Convert.ToBoolean(count % 2)) { lg2.AddColorStop(i, new Color(0, 0, 0, 1)); } else { lg2.AddColorStop(i, new Color(0, 0, 1, 1)); } count++; } cr.Rectangle(20, 140, 300, 100); cr.Pattern = lg2; cr.Fill(); LinearGradient lg3 = new LinearGradient(20.0, 260.0, 20.0, 360.0); lg3.AddColorStop(0.1, new Color (0, 0, 0, 1) ); lg3.AddColorStop(0.5, new Color (1, 1, 0, 1) ); lg3.AddColorStop(0.9, new Color (0, 0, 0, 1) ); cr.Rectangle(20, 260, 300, 100); cr.Pattern = lg3; cr.Fill(); lg1.Destroy(); lg2.Destroy(); lg3.Destroy(); ((IDisposable) cr.Target).Dispose (); ((IDisposable) cr).Dispose (); } public static void Main() { Application.Init(); new SharpApp(); Application.Run(); } } ``` 在我們的示例中，我們繪制了三個具有三個不同漸變的矩形。 ```cs LinearGradient lg1 = new LinearGradient(0.0, 0.0, 350.0, 350.0); ``` 在這里，我們創建一個線性漸變圖案。 參數指定直線，沿著該直線繪制漸變。 在我們的情況下，這是一條垂直線。 ```cs LinearGradient lg3 = new LinearGradient(20.0, 260.0, 20.0, 360.0); lg3.AddColorStop(0.1, new Color (0, 0, 0, 1) ); lg3.AddColorStop(0.5, new Color (1, 1, 0, 1) ); lg3.AddColorStop(0.9, new Color (0, 0, 0, 1) ); ``` 我們定義色標以產生漸變圖案。 在這種情況下，漸變是黑色和黃色的混合。 通過添加兩個黑色和一個黃色色標，我們創建了一個水平漸變圖案。 這些停止實際上是什么意思？ 在我們的情況下，我們從黑色開始，該顏色將以大小的 1/10 停止。 然后，我們開始逐漸涂成黃色，最終達到形狀的中心。 黃色停在大小的 9/10，我們再次開始用黑色繪圖，直到結束。  圖：漸變 ## 泡泡 在以下示例中，我們創建一個粉撲效果。 該示例將顯示一個不斷增長的居中文本，該文本將從某個點逐漸淡出。 這是一個非常常見的效果，您經常可以在 Flash 動畫中看到它。 `puff.cs` ```cs using Gtk; using Cairo; using System; class SharpApp : Window { private bool timer = true; private double alpha = 1.0; private double size = 1.0; private DrawingArea darea; public SharpApp() : base("Puff") { SetDefaultSize(350, 200); SetPosition(WindowPosition.Center); DeleteEvent += delegate { Application.Quit(); }; GLib.Timeout.Add(14, new GLib.TimeoutHandler(OnTimer)); darea = new DrawingArea(); darea.ExposeEvent += OnExpose; Add(darea); ShowAll(); } bool OnTimer() { if (!timer) return false; darea.QueueDraw(); return true; } void OnExpose(object sender, ExposeEventArgs args) { DrawingArea area = (DrawingArea) sender; Cairo.Context cr = Gdk.CairoHelper.Create(area.GdkWindow); int x = Allocation.Width / 2; int y = Allocation.Height / 2; cr.SetSourceRGB(0.5, 0, 0); cr.Paint(); cr.SelectFontFace("Courier", FontSlant.Normal, FontWeight.Bold); size += 0.8; if (size > 20) { alpha -= 0.01; } cr.SetFontSize(size); cr.SetSourceRGB(1, 1, 1); TextExtents extents = cr.TextExtents("ZetCode"); cr.MoveTo(x - extents.Width/2, y); cr.TextPath("ZetCode"); cr.Clip(); cr.Stroke(); cr.PaintWithAlpha(alpha); if (alpha <= 0) { timer = false; } ((IDisposable) cr.Target).Dispose(); ((IDisposable) cr).Dispose(); } public static void Main() { Application.Init(); new SharpApp(); Application.Run(); } } ``` 該示例在窗口上創建一個逐漸增長和褪色的文本。 ```cs GLib.Timeout.Add(14, new GLib.TimeoutHandler(OnTimer)); ``` 每隔 14 毫秒調用一次`OnTimer()`方法。 ```cs bool OnTimer() { if (!timer) return false; darea.QueueDraw(); return true; } ``` 在`OnTimer()`方法中，我們在繪圖區域上調用`QueueDraw()`方法，該方法會觸發`ExposeEvent`。 ```cs int x = Allocation.Width / 2; int y = Allocation.Height / 2; ``` 中間點的坐標。 ```cs cr.SetSourceRGB(0.5, 0, 0); cr.Paint(); ``` 我們將背景色設置為深紅色。 ```cs size += 0.8; ``` 每個周期，字體大小將增加 0.8 個單位。 ```cs if (size > 20) { alpha -= 0.01; } ``` 字體大小大于 20 后開始淡出。 ```cs TextExtents extents = cr.TextExtents("ZetCode"); ``` 我們得到了文本指標。 ```cs cr.MoveTo(x - extents.Width/2, y); ``` 我們使用文本指標將文本放在窗口的中心。 ```cs cr.TextPath("ZetCode"); cr.Clip(); ``` 我們獲取文本的路徑，并為其設置當前的片段區域。 ```cs cr.Stroke(); cr.PaintWithAlpha(alpha); ``` 我們繪制當前路徑并考慮 alpha 值。  圖：粉撲 ## 反射 在下一個示例中，我們顯示反射圖像。 這種美麗的效果使人產生幻覺，好像圖像在水中被反射一樣。 `reflection.cs` ```cs using Gtk; using Cairo; using System; class SharpApp : Window { private ImageSurface surface; private int imageWidth; private int imageHeight; private int gap; private int border; public SharpApp() : base("Reflection") { try { surface = new ImageSurface("slanec.png"); } catch { Console.WriteLine("File not found"); Environment.Exit(1); } imageWidth = surface.Width; imageHeight = surface.Height; gap = 40; border = 20; SetDefaultSize(300, 350); SetPosition(WindowPosition.Center); DeleteEvent += delegate { Application.Quit(); }; DrawingArea darea = new DrawingArea(); darea.ExposeEvent += OnExpose; Add(darea); ShowAll(); } void OnExpose(object sender, ExposeEventArgs args) { DrawingArea area = (DrawingArea) sender; Cairo.Context cr = Gdk.CairoHelper.Create(area.GdkWindow); int width = Allocation.Width; int height = Allocation.Height; LinearGradient lg = new LinearGradient(width/2, 0, width/2, height*3); lg.AddColorStop(0, new Color(0, 0, 0, 1)); lg.AddColorStop(height, new Color(0.2, 0.2, 0.2, 1)); cr.Pattern = lg; cr.Paint(); cr.SetSourceSurface(surface, border, border); cr.Paint(); double alpha = 0.7; double step = 1.0 / imageHeight; cr.Translate(0, 2 * imageHeight + gap); cr.Scale(1, -1); int i = 0; while(i < imageHeight) { cr.Rectangle(new Rectangle(border, imageHeight-i, imageWidth, 1)); i++; cr.Clip(); cr.SetSource(surface, border, border); cr.PaintWithAlpha(alpha-=step); cr.ResetClip(); } ((IDisposable) cr.Target).Dispose(); ((IDisposable) cr).Dispose(); } public static void Main() { Application.Init(); new SharpApp(); Application.Run(); } } ``` 該示例顯示了一個反射的城堡。 ```cs LinearGradient lg = new LinearGradient(width/2, 0, width/2, height*3); lg.AddColorStop(0, new Color(0, 0, 0, 1)); lg.AddColorStop(height, new Color(0.2, 0.2, 0.2, 1)); cr.Pattern = lg; cr.Paint(); ``` 背景充滿了漸變的油漆。 涂料是從黑色到深灰色的平滑混合。 ```cs cr.Translate(0, 2 * imageHeight + gap); cr.Scale(1, -1); ``` 此代碼翻轉圖像并將其轉換為原始圖像下方。 平移操作是必需的，因為縮放操作會使圖像上下顛倒并向上平移圖像。 要了解發生了什么，只需拍攝一張照片并將其放在桌子上即可。 現在翻轉它。 ```cs cr.Rectangle(new Rectangle(border, imageHeight-i, imageWidth, 1)); i++; cr.Clip(); cr.SetSource(surface, border, border); cr.PaintWithAlpha(alpha-=step); cr.ResetClip(); ``` 代碼的關鍵部分。 我們使第二個圖像透明。 但是透明度不是恒定的。 圖像逐漸淡出。 這是通過`GradientPaint`實現的。  圖：反射 ## 等待 在此示例中，我們使用透明效果創建一個等待演示。 我們將繪制 8 條線，這些線將逐漸消失，從而產生一條線在移動的錯覺。 這種效果通常用于通知用戶，一項艱巨的任務正在幕后進行。 一個示例是通過互聯網流式傳輸視頻。 `waiting.cs` ```cs using Gtk; using Cairo; using System; class SharpApp : Window { private double [,] trs = new double[,] { { 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, } }; private short count = 0; private DrawingArea darea; public SharpApp() : base("Waiting") { SetDefaultSize(250, 150); SetPosition(WindowPosition.Center); DeleteEvent += delegate { Application.Quit(); }; GLib.Timeout.Add(100, new GLib.TimeoutHandler(OnTimer)); darea = new DrawingArea(); darea.ExposeEvent += OnExpose; Add(darea); ShowAll(); } bool OnTimer() { count += 1; darea.QueueDraw(); return true; } void OnExpose(object sender, ExposeEventArgs args) { DrawingArea area = (DrawingArea) sender; Cairo.Context cr = Gdk.CairoHelper.Create(area.GdkWindow); cr.LineWidth = 3; cr.LineCap = LineCap.Round; int width, height; width = Allocation.Width; height = Allocation.Height; cr.Translate(width/2, height/2); for (int i = 0; i < 8; i++) { cr.SetSourceRGBA(0, 0, 0, trs[count%8, i]); cr.MoveTo(0.0, -10.0); cr.LineTo(0.0, -40.0); cr.Rotate(Math.PI/4); cr.Stroke(); } ((IDisposable) cr.Target).Dispose(); ((IDisposable) cr).Dispose(); } public static void Main() { Application.Init(); new SharpApp(); Application.Run(); } } ``` 我們用八個不同的 alpha 值繪制八條線。 ```cs GLib.Timeout.Add(100, new GLib.TimeoutHandler(OnTimer)); ``` 我們使用計時器函數來創建動畫。 ```cs private double [,] trs = new double[,] { { 0.0, 0.15, 0.30, 0.5, 0.65, 0.80, 0.9, 1.0 }, ... }; ``` 這是此演示中使用的透明度值的二維數組。 有 8 行，每行一種狀態。 8 行中的每行將連續使用這些值。 ```cs cr.LineWidth = 3; cr.LineCap = LineCap.Round; ``` 我們使線條更粗一些，以便更好地顯示它們。 我們用帶帽的線畫線。 ```cs cr.SetSourceRGBA(0, 0, 0, trs[count%8, i]); ``` 在這里，我們定義了一條線的透明度值。 ```cs cr.MoveTo(0.0, -10.0); cr.LineTo(0.0, -40.0); cr.Rotate(Math.PI/4); cr.Stroke(); ``` 這些代碼行將繪制八行中的每行。  圖：等待 在 GTK# 編程庫的這一章中，我們使用 Cairo 庫進行了一些更高級的繪制。