# GTK# 中的 Cario 繪圖 > 原文： [http://zetcode.com/gui/gtksharp/drawing/](http://zetcode.com/gui/gtksharp/drawing/) 在 GTK# 編程教程的這一部分中，我們將使用 Cairo 庫進行一些繪制。 Cairo 是用于創建 2D 矢量圖形的庫。 我們可以使用它來繪制自己的小部件，圖表或各種效果或動畫。 ## 簡單繪圖 描邊操作繪制形狀的輪廓，填充操作填充形狀的內部。 接下來，我們將演示這兩個操作。 `simpledrawing.cs` ```cs using Gtk; using Cairo; using System; class SharpApp : Window { public SharpApp() : base("Simple drawing") { SetDefaultSize(230, 150); 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 = 9; cr.SetSourceRGB(0.7, 0.2, 0.0); int width, height; width = Allocation.Width; height = Allocation.Height; cr.Translate(width/2, height/2); cr.Arc(0, 0, (width < height ? width : height) / 2 - 10, 0, 2*Math.PI); cr.StrokePreserve(); cr.SetSourceRGB(0.3, 0.4, 0.6); cr.Fill(); ((IDisposable) cr.Target).Dispose(); ((IDisposable) cr).Dispose(); } public static void Main() { Application.Init(); new SharpApp(); Application.Run(); } } ``` 在我們的示例中，我們將繪制一個圓并將其用純色繪制。 ```cs gmcs -pkg:gtk-sharp-2.0 -r:/usr/lib/mono/2.0/Mono.Cairo.dll simple.cs ``` 這是我們編譯示例的方式。 ```cs DrawingArea darea = new DrawingArea(); ``` 我們將在`DrawingArea`小部件上進行繪制操作。 ```cs darea.ExposeEvent += OnExpose; ``` 所有繪圖都是通過我們插入`ExposeEvent`的方法完成的。 ```cs DrawingArea area = (DrawingArea) sender; Cairo.Context cr = Gdk.CairoHelper.Create(area.GdkWindow); ``` 我們從繪圖區域的`GdkWindow`創建`Cairo.Context`對象。 上下文是用于在所有`Drawable`對象上繪制的對象。 ```cs cr.LineWidth = 9; ``` 我們將線條的寬度設置為 9 像素。 ```cs cr.SetSourceRGB(0.7, 0.2, 0.0); ``` 我們將顏色設置為深紅色。 ```cs int width, height; width = Allocation.Width; height = Allocation.Height; cr.Translate(width/2, height/2); ``` 我們得到繪圖區域的寬度和高度。 我們將原點移動到窗口的中間。 ```cs cr.Arc(0, 0, (width < height ? width : height) / 2 - 10, 0, 2*Math.PI); cr.StrokePreserve(); ``` 我們繪制一個圓形的外部形狀。 `StrokePreserve()`根據當前的線寬，線連接，線帽和筆劃線設置描邊當前路徑。 與`Stroke()`不同，它在 cairo 上下文中保留路徑。 ```cs cr.SetSourceRGB(0.3, 0.4, 0.6); cr.Fill(); ``` 這會用一些藍色填充圓圈的內部。  圖：簡單 drawing ## 基本形狀 下一個示例將一些基本形狀繪制到窗口上。 `basicshapes.cs` ```cs using Gtk; using Cairo; using System; class SharpApp : Window { public SharpApp() : base("Basic shapes") { SetDefaultSize(390, 240); 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 cc = Gdk.CairoHelper.Create(area.GdkWindow); cc.SetSourceRGB(0.2, 0.23, 0.9); cc.LineWidth = 1; cc.Rectangle(20, 20, 120, 80); cc.Rectangle(180, 20, 80, 80); cc.StrokePreserve(); cc.SetSourceRGB(1, 1, 1); cc.Fill(); cc.SetSourceRGB(0.2, 0.23, 0.9); cc.Arc(330, 60, 40, 0, 2*Math.PI); cc.StrokePreserve(); cc.SetSourceRGB(1, 1, 1); cc.Fill(); cc.SetSourceRGB(0.2, 0.23, 0.9); cc.Arc(90, 160, 40, Math.PI/4, Math.PI); cc.ClosePath(); cc.StrokePreserve(); cc.SetSourceRGB(1, 1, 1); cc.Fill(); cc.SetSourceRGB(0.2, 0.23, 0.9); cc.Translate(220, 180); cc.Scale(1, 0.7); cc.Arc(0, 0, 50, 0, 2*Math.PI); cc.StrokePreserve(); cc.SetSourceRGB(1, 1, 1); cc.Fill(); ((IDisposable) cc.Target).Dispose (); ((IDisposable) cc).Dispose (); } public static void Main() { Application.Init(); new SharpApp(); Application.Run(); } } ``` 在此示例中，我們將創建一個矩形，一個正方形，一個圓形，一個弧形和一個橢圓形。 我們用藍色繪制輪廓，內部用白色繪制。 ```cs cc.Rectangle(20, 20, 120, 80); cc.Rectangle(180, 20, 80, 80); cc.StrokePreserve(); cc.SetSourceRGB(1, 1, 1); cc.Fill(); ``` 這些線繪制一個矩形和一個正方形。 ```cs cc.Arc(330, 60, 40, 0, 2*Math.PI); ``` 此處`Arc()`方法繪制一個完整的圓。 ```cs cc.Scale(1, 0.7); cc.Arc(0, 0, 50, 0, 2*Math.PI); ``` 如果要繪制橢圓形，請先進行一些縮放。 在這里`Scale()`方法縮小 y 軸。  圖：基本形狀 ## 色彩 顏色是代表紅色，綠色和藍色（RGB）強度值的組合的對象。 Cario 有效 RGB 值在 0 到 1 的范圍內。 `colors.cs` ```cs using Gtk; using Cairo; using System; class SharpApp : Window { public SharpApp() : base("Colors") { SetDefaultSize(360, 100); 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.SetSourceRGB(0.2, 0.23, 0.9); cr.Rectangle(10, 15, 90, 60); cr.Fill(); cr.SetSourceRGB(0.9, 0.1, 0.1); cr.Rectangle(130, 15, 90, 60); cr.Fill(); cr.SetSourceRGB(0.4, 0.9, 0.4); cr.Rectangle(250, 15, 90, 60); cr.Fill(); ((IDisposable) cr.Target).Dispose(); ((IDisposable) cr).Dispose(); } public static void Main() { Application.Init(); new SharpApp(); Application.Run(); } } ``` 我們用三種不同的顏色繪制三個矩形。 ```cs cr.SetSourceRGB(0.2, 0.23, 0.9); ``` `SetSourceRGB()`方法為 Cario 上下文設置顏色。 該方法的三個參數是顏色強度值。 ```cs cr.Rectangle(10, 15, 90, 60); cr.Fill(); ``` 我們創建一個矩形形狀，并用先前指定的顏色填充它。  圖：顏色 ## 透明矩形 透明性是指能夠透視材料的質量。 了解透明度的最簡單方法是想象一塊玻璃或水。 從技術上講，光線可以穿過玻璃，這樣我們就可以看到玻璃后面的物體。 在計算機圖形學中，我們可以使用 alpha 合成來實現透明效果。 Alpha 合成是將圖像與背景組合以創建部分透明外觀的過程。 合成過程使用 Alpha 通道。 （wikipedia.org，answers.com） `transparentrectangles.cs` ```cs using Gtk; using Cairo; using System; class SharpApp : Window { public SharpApp() : base("Transparent rectangles") { SetDefaultSize(590, 90); 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); for ( int i = 1; i <= 10; i++) { cr.SetSourceRGBA(0, 0, 1, i*0.1); cr.Rectangle(50*i, 20, 40, 40); cr.Fill(); } ((IDisposable) cr.Target).Dispose(); ((IDisposable) cr).Dispose(); } public static void Main() { Application.Init(); new SharpApp(); Application.Run(); } } ``` 在示例中，我們將繪制十個具有不同透明度級別的矩形。 ```cs cr.SetSourceRGBA(0, 0, 1, i*0.1); ``` `SetSourceRGBA()`方法的最后一個參數是 alpha 透明度。  圖：透明矩形 ## 靈魂伴侶 在下一個示例中，我們在窗口上繪制一些文本。 `soulmate.cs` ```cs using Gtk; using Cairo; using System; class SharpApp : Window { public SharpApp() : base("Soulmate") { SetDefaultSize(420, 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.SetSourceRGB(0.1, 0.1, 0.1); cr.SelectFontFace("Purisa", FontSlant.Normal, FontWeight.Bold); cr.SetFontSize(13); cr.MoveTo(20, 30); cr.ShowText("Most relationships seem so transitory"); cr.MoveTo(20, 60); cr.ShowText("They're all good but not the permanent one"); cr.MoveTo(20, 120); cr.ShowText("Who doesn't long for someone to hold"); cr.MoveTo(20, 150); cr.ShowText("Who knows how to love without being told"); cr.MoveTo(20, 180); cr.ShowText("Somebody tell me why I'm on my own"); cr.MoveTo(20, 210); cr.ShowText("If there's a soulmate for everyone"); ((IDisposable) cr.Target).Dispose(); ((IDisposable) cr).Dispose(); } public static void Main() { Application.Init(); new SharpApp(); Application.Run(); } } ``` 我們顯示 Natasha Bedingfields Soulmate 歌曲的部分歌詞。 ```cs cr.SelectFontFace("Purisa", FontSlant.Normal, FontWeight.Bold); ``` 在這里，我們指定使用的字體-粗體的 Purisa。 ```cs cr.SetFontSize(13); ``` 我們指定字體的大小。 ```cs cr.MoveTo(20, 30); ``` 我們移動到要繪制文本的位置。 ```cs cr.ShowText("Most relationships seem so transitory"); ``` `ShowText()`方法將文本繪制到窗口上。  圖：靈魂伴侶 在 GTK# 編程庫的這一章中，我們使用 Cario 庫進行繪制。