Cario 繪圖 · ZetCode 中文系列教程

# Cario 繪圖 > 原文： [http://zetcode.com/gui/vbgtk/painting/](http://zetcode.com/gui/vbgtk/painting/) 在 Visual Basic GTK# 教程的這一部分中，我們將使用 Cairo 庫進行一些繪圖。 Cairo 是用于創建 2D 矢量圖形的庫。我們可以使用它來繪制自己的小部件，圖表或各種效果或動畫。 ## 色彩在第一個示例中，我們將使用顏色。顏色是代表紅色，綠色和藍色（RGB）強度值的組合的對象。 Cario 有效 RGB 值在 0 到 1 的范圍內。 ```vb ' ZetCode Mono Visual Basic GTK# tutorial ' ' This program draws three rectangles. ' The interiors are filled with ' different colors. ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports Gtk Public Class GtkVBApp Inherits Window Public Sub New MyBase.New("Colors") Me.InitUI Me.SetDefaultSize(360, 100) Me.SetPosition(WindowPosition.Center) AddHandler Me.DeleteEvent, AddressOf Me.OnDelete Me.ShowAll End Sub Private Sub InitUI Dim darea As New DrawingArea AddHandler darea.ExposeEvent, AddressOf Me.OnExpose Me.Add(darea) End Sub Private Sub OnExpose(ByVal sender As Object, ByVal args As ExposeEventArgs) Dim cc As Cairo.Context = Gdk.CairoHelper.Create(sender.GdkWindow) Me.DrawColors(cc) Dim disposeTarget As IDisposable = CType(cc.Target, IDisposable) disposeTarget.Dispose Dim disposeContext As IDisposable = CType(cc, IDisposable) disposeContext.Dispose End Sub Private Sub DrawColors(ByVal cc As Cairo.Context) cc.SetSourceRGB(0.2, 0.23, 0.9) cc.Rectangle(10, 15, 90, 60) cc.Fill cc.SetSourceRGB(0.9, 0.1, 0.1) cc.Rectangle(130, 15, 90, 60) cc.Fill cc.SetSourceRGB(0.4, 0.9, 0.4) cc.Rectangle(250, 15, 90, 60) cc.Fill End Sub Private Sub OnDelete(ByVal sender As Object, _ ByVal args As DeleteEventArgs) Application.Quit End Sub Public Shared Sub Main Application.Init Dim app As New GtkVBApp Application.Run End Sub End Class ``` 在我們的示例中，我們將繪制三個矩形，并用三種不同的顏色填充它們。 ```vb vbnc -r:/usr/lib/mono/gtk-sharp-2.0/gtk-sharp.dll -r:/usr/lib/mono/gtk-sharp-2.0/gdk-sharp.dll -r:/usr/lib/mono/2.0/Mono.Cairo.dll colors.vb ``` 這是我們編譯示例的方式。 ```vb Dim darea As New DrawingArea ``` 我們將在`DrawingArea`小部件上進行繪制操作。 ```vb AddHandler darea.ExposeEvent, AddressOf Me.OnExpose ``` 所有繪圖都是通過我們插入`ExposeEvent`的方法完成的。 ```vb Dim cc As Cairo.Context = Gdk.CairoHelper.Create(sender.GdkWindow) ``` 我們從繪圖區域的`GdkWindow`創建`Cairo.Context`對象。上下文是我們繪制所有圖紙的對象。 ```vb Me.DrawColors(cc) ``` 實際圖形委托給`DrawColors`方法。 ```vb Dim disposeTarget As IDisposable = CType(cc.Target, IDisposable) disposeTarget.Dispose Dim disposeContext As IDisposable = CType(cc, IDisposable) disposeContext.Dispose ``` 在這里，我們處理在繪制過程中使用的資源。 ```vb cc.SetSourceRGB(0.2, 0.23, 0.9) ``` `SetSourceRGB`方法為 Cario 上下文設置顏色。該方法的三個參數是顏色強度值。 ```vb cc.Rectangle(10, 15, 90, 60) ``` 我們畫一個矩形。前兩個參數是矩形左上角的 x，y 坐標。最后兩個參數是矩形的寬度和高度。 ```vb cc.Fill ``` 我們用當前顏色填充矩形的內部。 ![Colors](https://img.kancloud.cn/0d/9d/0d9d4d946d8488415c2cabc1813881ec_368x128.jpg) 圖：顏色 ## 基本形狀下一個示例將一些基本形狀繪制到窗口上。 ```vb ' ZetCode Mono Visual Basic GTK# tutorial ' ' This program draws basic shapes ' available in Cairo ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports Gtk Public Class GtkVBApp Inherits Window Public Sub New MyBase.New("Basic Shapes") Me.InitUI Me.SetDefaultSize(400, 250) Me.SetPosition(WindowPosition.Center) AddHandler Me.DeleteEvent, AddressOf Me.OnDelete Me.ShowAll End Sub Private Sub InitUI Dim darea As New DrawingArea AddHandler darea.ExposeEvent, AddressOf Me.OnExpose Me.Add(darea) End Sub Private Sub OnExpose(ByVal sender As Object, ByVal args As ExposeEventArgs) Dim cc As Cairo.Context = Gdk.CairoHelper.Create(sender.GdkWindow) Me.DrawShapes(cc) Dim disposeTarget As IDisposable = CType(cc.Target, IDisposable) disposeTarget.Dispose Dim disposeContext As IDisposable = CType(cc, IDisposable) disposeContext.Dispose End Sub Private Sub DrawShapes(ByVal cc As Cairo.Context) cc.SetSourceRGB(0.5, 0.5, 0.5) cc.Rectangle(20, 20, 120, 80) cc.Rectangle(180, 20, 80, 80) cc.Fill cc.Arc(330, 60, 40, 0, 2*Math.PI) cc.Fill cc.Arc(90, 160, 40, Math.PI/4, Math.PI) cc.ClosePath cc.Fill cc.Translate(220, 180) cc.Scale(1, 0.7) cc.Arc(0, 0, 50, 0, 2*Math.PI) cc.Fill End Sub Private Sub OnDelete(ByVal sender As Object, _ ByVal args As DeleteEventArgs) Application.Quit End Sub Public Shared Sub Main Application.Init Dim app As New GtkVBApp Application.Run End Sub End Class ``` 在此示例中，我們將創建一個矩形，正方形，圓形，弧形和橢圓形。 ```vb cc.Rectangle(20, 20, 120, 80) cc.Rectangle(180, 20, 80, 80) cc.Fill ``` 這些線繪制一個矩形和一個正方形。 ```vb cc.Arc(330, 60, 40, 0, 2*Math.PI) cc.Fill ``` 此處`Arc`方法繪制一個完整的圓。 ```vb cc.Translate(220, 180) cc.Scale(1, 0.7) cc.Arc(0, 0, 50, 0, 2*Math.PI) cc.Fill ``` `Translate`方法將對象移動到特定點。如果要繪制橢圓形，請先進行一些縮放。在這里`Scale`方法縮小 y 軸。 ![Basic shapes](https://img.kancloud.cn/3e/18/3e189feaa0734225a129b07c44d1a3c5_408x278.jpg) 圖：基本形狀 ## 透明矩形透明性是指能夠透視材料的質量。了解透明度的最簡單方法是想象一塊玻璃或水。從技術上講，光線可以穿過玻璃，這樣我們就可以看到玻璃后面的物體。在計算機圖形學中，我們可以使用 alpha 合成來實現透明效果。 Alpha 合成是將圖像與背景組合以創建部分透明外觀的過程。合成過程使用 Alpha 通道。（wikipedia.org，answers.com） ```vb ' ZetCode Mono Visual Basic GTK# tutorial ' ' This program draws ten ' rectangles with different ' levels of transparency ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports Gtk Public Class GtkVBApp Inherits Window Public Sub New MyBase.New("Transparent rectangles") Me.InitUI Me.SetDefaultSize(590, 90) Me.SetPosition(WindowPosition.Center) AddHandler Me.DeleteEvent, AddressOf Me.OnDelete Me.ShowAll End Sub Private Sub InitUI Dim darea As New DrawingArea AddHandler darea.ExposeEvent, AddressOf Me.OnExpose Me.Add(darea) End Sub Private Sub OnExpose(ByVal sender As Object, ByVal args As ExposeEventArgs) Dim cc As Cairo.Context = Gdk.CairoHelper.Create(sender.GdkWindow) Me.DrawRectangles(cc) Dim disposeTarget As IDisposable = CType(cc.Target, IDisposable) disposeTarget.Dispose() Dim disposeContext As IDisposable = CType(cc, IDisposable) disposeContext.Dispose() End Sub Private Sub DrawRectangles(ByVal cc As Cairo.Context) For i As Integer = 1 To 10 cc.SetSourceRGBA(0, 0, 1, i*0.1) cc.Rectangle(50*i, 20, 40, 40) cc.Fill Next End Sub Private Sub OnDelete(ByVal sender As Object, _ ByVal args As DeleteEventArgs) Application.Quit End Sub Public Shared Sub Main Application.Init Dim app As New GtkVBApp Application.Run End Sub End Class ``` 在示例中，我們將繪制十個具有不同透明度級別的矩形。 ```vb cc.SetSourceRGBA(0, 0, 1, i*0.1) ``` `SetSourceRGBA`方法的最后一個參數是 alpha 透明度。 ![Transparent rectangles](https://img.kancloud.cn/bc/20/bc205ca9edb22541d97c754edbaf8df9_598x118.jpg) 圖：透明矩形 ## 甜甜圈在下面的示例中，我們通過旋轉一堆橢圓來創建 n 個復雜形狀。 ```vb ' ZetCode Mono Visual Basic GTK# tutorial ' ' This program draws basic shapes ' available in Cairo ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports Gtk Public Class GtkVBApp Inherits Window Public Sub New MyBase.New("Donut") Me.InitUI Me.SetDefaultSize(400, 250) Me.SetPosition(WindowPosition.Center) AddHandler Me.DeleteEvent, AddressOf Me.OnDelete Me.ShowAll End Sub Private Sub InitUI Dim darea As New DrawingArea AddHandler darea.ExposeEvent, AddressOf Me.OnExpose Me.Add(darea) End Sub Private Sub OnExpose(ByVal sender As Object, ByVal args As ExposeEventArgs) Dim cc As Cairo.Context = Gdk.CairoHelper.Create(sender.GdkWindow) Me.DrawDonut(cc) Dim disposeTarget As IDisposable = CType(cc.Target, IDisposable) disposeTarget.Dispose Dim disposeContext As IDisposable = CType(cc, IDisposable) disposeContext.Dispose End Sub Private Sub DrawDonut(ByVal cc As Cairo.Context) cc.LineWidth = 0.5 Dim width, height As Integer width = Allocation.Width height = Allocation.Height cc.Translate(width/2, height/2) cc.Arc(0, 0, 120, 0, 2*Math.PI) cc.Stroke cc.Save For i As Integer = 0 To 35 cc.Rotate( i*Math.PI/36) cc.Scale(0.3, 1) cc.Arc(0, 0, 120, 0, 2*Math.PI) cc.Restore cc.Stroke cc.Save Next End Sub Private Sub OnDelete(ByVal sender As Object, _ ByVal args As DeleteEventArgs) Application.Quit End Sub Public Shared Sub Main Application.Init Dim app As New GtkVBApp Application.Run End Sub End Class ``` 在此示例中，我們創建一個甜甜圈。形狀類似于曲奇，因此得名“甜甜圈”。 ```vb cc.Translate(width/2, height/2) cc.Arc(0, 0, 120, 0, 2*Math.PI) cc.Stroke ``` 剛開始時有一個橢圓。 ```vb For i As Integer = 0 To 35 cc.Rotate( i*Math.PI/36) cc.Scale(0.3, 1) cc.Arc(0, 0, 120, 0, 2*Math.PI) cc.Restore cc.Stroke cc.Save Next ``` 旋轉幾圈后，有一個甜甜圈。 ![Donut](https://img.kancloud.cn/e9/0b/e90b3e0df0b3b50b78f8e8e7641faabc_408x278.jpg) 圖：多納圈 ## 繪制文字在下一個示例中，我們在窗口上繪制一些文本。 ```vb ' ZetCode Mono Visual Basic GTK# tutorial ' ' This program draws text ' on the window ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports Gtk Public Class GtkVBApp Inherits Window Public Sub New MyBase.New("Soulmate") Me.InitUI Me.SetDefaultSize(400, 250) Me.SetPosition(WindowPosition.Center) AddHandler Me.DeleteEvent, AddressOf Me.OnDelete Me.ShowAll End Sub Private Sub InitUI Dim darea As New DrawingArea AddHandler darea.ExposeEvent, AddressOf Me.OnExpose Me.Add(darea) End Sub Private Sub OnExpose(ByVal sender As Object, ByVal args As ExposeEventArgs) Dim cc As Cairo.Context = Gdk.CairoHelper.Create(sender.GdkWindow) Me.DrawLyrics(cc) Dim disposeTarget As IDisposable = CType(cc.Target, IDisposable) disposeTarget.Dispose Dim disposeContext As IDisposable = CType(cc, IDisposable) disposeContext.Dispose End Sub Private Sub DrawLyrics(ByVal cc As Cairo.Context) cc.SetSourceRGB(0.1, 0.1, 0.1) cc.SelectFontFace("Purisa", Cairo.FontSlant.Normal, Cairo.FontWeight.Bold) cc.SetFontSize(13) cc.MoveTo(20, 30) cc.ShowText("Most relationships seem so transitory") cc.MoveTo(20, 60) cc.ShowText("They're all good but not the permanent one") cc.MoveTo(20, 120) cc.ShowText("Who doesn't long for someone to hold") cc.MoveTo(20, 150) cc.ShowText("Who knows how to love without being told") cc.MoveTo(20, 180) cc.ShowText("Somebody tell me why I'm on my own") cc.MoveTo(20, 210) cc.ShowText("If there's a soulmate for everyone") End Sub Private Sub OnDelete(ByVal sender As Object, _ ByVal args As DeleteEventArgs) Application.Quit End Sub Public Shared Sub Main Application.Init Dim app As New GtkVBApp Application.Run End Sub End Class ``` 我們顯示 Natasha Bedingfields Soulmate 歌曲的部分歌詞。 ```vb cc.SelectFontFace("Purisa", Cairo.FontSlant.Normal, Cairo.FontWeight.Bold) ``` 在這里，我們指定使用的字體。 Purisa 粗體。 ```vb cc.SetFontSize(13) ``` 我們指定字體的大小。 ```vb cc.MoveTo(20, 30) ``` 我們移動到要繪制文本的位置。 ```vb cc.ShowText("Most relationships seem so transitory") ``` `ShowText`方法將文本繪制到窗口上。 ![Soulmate](https://img.kancloud.cn/85/74/8574cf76dc0def157a70537a406c9046_408x278.jpg) 圖：靈魂伴侶在 Visual Basic GTK# 教程的這一章中，我們使用 Cario 庫進行繪圖。