原文： http://zetcode.com/gui/vbgtk/painting/

在 Visual Basic GTK# 教程的这一部分中，我们将使用 Cairo 库进行一些绘图。

Cairo 是用于创建 2D 矢量图形的库。 我们可以使用它来绘制自己的小部件，图表或各种效果或动画。

色彩

在第一个示例中，我们将使用颜色。 颜色是代表红色，绿色和蓝色（RGB）强度值的组合的对象。 Cario 有效 RGB 值在 0 到 1 的范围内。

  1. ' ZetCode Mono Visual Basic GTK# tutorial
  2. '
  3. ' This program draws three rectangles.
  4. ' The interiors are filled with
  5. ' different colors.
  6. '
  7. ' author jan bodnar
  8. ' last modified May 2009
  9. ' website www.zetcode.com
  11. Imports Gtk
  13. Public Class GtkVBApp
  14.     Inherits Window
  16.     Public Sub New
  18.         MyBase.New("Colors")
  20.         Me.InitUI
  22.         Me.SetDefaultSize(360, 100)
  23.         Me.SetPosition(WindowPosition.Center)
  24.         AddHandler Me.DeleteEvent, AddressOf Me.OnDelete
  26.         Me.ShowAll 
  28.     End Sub
  30.     Private Sub InitUI
  32.         Dim darea As New DrawingArea
  33.         AddHandler darea.ExposeEvent, AddressOf Me.OnExpose
  34.         Me.Add(darea)
  36.     End Sub
  38.     Private Sub OnExpose(ByVal sender As Object, ByVal args As ExposeEventArgs)
  40.         Dim cc As Cairo.Context = Gdk.CairoHelper.Create(sender.GdkWindow)
  42.         Me.DrawColors(cc)
  44.         Dim disposeTarget As IDisposable = CType(cc.Target, IDisposable)
  45.         disposeTarget.Dispose
  47.         Dim disposeContext As IDisposable = CType(cc, IDisposable)
  48.         disposeContext.Dispose
  50.     End Sub
  52.     Private Sub DrawColors(ByVal cc As Cairo.Context)
  54.         cc.SetSourceRGB(0.2, 0.23, 0.9)
  55.         cc.Rectangle(10, 15, 90, 60)
  56.         cc.Fill
  58.         cc.SetSourceRGB(0.9, 0.1, 0.1)
  59.         cc.Rectangle(130, 15, 90, 60)
  60.         cc.Fill
  62.         cc.SetSourceRGB(0.4, 0.9, 0.4)
  63.         cc.Rectangle(250, 15, 90, 60)
  64.         cc.Fill    
  66.     End Sub
  68.     Private Sub OnDelete(ByVal sender As Object, _
  69.             ByVal args As DeleteEventArgs)
  70.         Application.Quit
  71.     End Sub
  73.     Public Shared Sub Main
  75.         Application.Init
  76.         Dim app As New GtkVBApp
  77.         Application.Run
  79.     End Sub
  81. End Class

在我们的示例中，我们将绘制三个矩形，并用三种不同的颜色填充它们。

  1. vbnc -r:/usr/lib/mono/gtk-sharp-2.0/gtk-sharp.dll 
  2.  -r:/usr/lib/mono/gtk-sharp-2.0/gdk-sharp.dll
  3.  -r:/usr/lib/mono/2.0/Mono.Cairo.dll colors.vb

这是我们编译示例的方式。

  1. Dim darea As New DrawingArea

我们将在DrawingArea小部件上进行绘制操作。

  1. AddHandler darea.ExposeEvent, AddressOf Me.OnExpose

所有绘图都是通过我们插入ExposeEvent的方法完成的。

  1. Dim cc As Cairo.Context = Gdk.CairoHelper.Create(sender.GdkWindow)

我们从绘图区域的GdkWindow创建Cairo.Context对象。 上下文是我们绘制所有图纸的对象。

  1. Me.DrawColors(cc)

实际图形委托给DrawColors方法。

  1. Dim disposeTarget As IDisposable = CType(cc.Target, IDisposable)
  2. disposeTarget.Dispose
  4. Dim disposeContext As IDisposable = CType(cc, IDisposable)
  5. disposeContext.Dispose

在这里，我们处理在绘制过程中使用的资源。

  1. cc.SetSourceRGB(0.2, 0.23, 0.9)

SetSourceRGB方法为 Cario 上下文设置颜色。 该方法的三个参数是颜色强度值。

  1. cc.Rectangle(10, 15, 90, 60)

我们画一个矩形。 前两个参数是矩形左上角的 x，y 坐标。 最后两个参数是矩形的宽度和高度。

  1. cc.Fill

我们用当前颜色填充矩形的内部。

Cario 绘图 - 图1

图：颜色

基本形状

下一个示例将一些基本形状绘制到窗口上。

  1. ' ZetCode Mono Visual Basic GTK# tutorial
  2. '
  3. ' This program draws basic shapes
  4. ' available in Cairo
  5. '
  6. ' author jan bodnar
  7. ' last modified May 2009
  8. ' website www.zetcode.com
  10. Imports Gtk
  12. Public Class GtkVBApp
  13.     Inherits Window
  15.     Public Sub New
  17.         MyBase.New("Basic Shapes")
  19.         Me.InitUI
  21.         Me.SetDefaultSize(400, 250)
  22.         Me.SetPosition(WindowPosition.Center)
  23.         AddHandler Me.DeleteEvent, AddressOf Me.OnDelete
  25.         Me.ShowAll
  27.     End Sub
  29.     Private Sub InitUI
  31.         Dim darea As New DrawingArea
  32.         AddHandler darea.ExposeEvent, AddressOf Me.OnExpose
  33.         Me.Add(darea)
  35.     End Sub
  37.     Private Sub OnExpose(ByVal sender As Object, ByVal args As ExposeEventArgs)
  39.         Dim cc As Cairo.Context = Gdk.CairoHelper.Create(sender.GdkWindow)
  41.         Me.DrawShapes(cc)
  43.         Dim disposeTarget As IDisposable = CType(cc.Target, IDisposable)
  44.         disposeTarget.Dispose
  46.         Dim disposeContext As IDisposable = CType(cc, IDisposable)
  47.         disposeContext.Dispose
  49.     End Sub
  51.     Private Sub DrawShapes(ByVal cc As Cairo.Context)
  53.         cc.SetSourceRGB(0.5, 0.5, 0.5)
  55.         cc.Rectangle(20, 20, 120, 80)
  56.         cc.Rectangle(180, 20, 80, 80)
  57.         cc.Fill
  59.         cc.Arc(330, 60, 40, 0, 2*Math.PI)
  60.         cc.Fill
  62.         cc.Arc(90, 160, 40, Math.PI/4, Math.PI)
  63.         cc.ClosePath
  64.         cc.Fill
  66.         cc.Translate(220, 180)
  67.         cc.Scale(1, 0.7)
  68.         cc.Arc(0, 0, 50, 0, 2*Math.PI)
  69.         cc.Fill
  71.     End Sub
  73.     Private Sub OnDelete(ByVal sender As Object, _
  74.             ByVal args As DeleteEventArgs)
  75.         Application.Quit
  76.     End Sub
  78.     Public Shared Sub Main
  80.         Application.Init
  81.         Dim app As New GtkVBApp
  82.         Application.Run
  84.     End Sub
  86. End Class

在此示例中，我们将创建一个矩形，正方形，圆形，弧形和椭圆形。

  1. cc.Rectangle(20, 20, 120, 80)
  2. cc.Rectangle(180, 20, 80, 80)
  3. cc.Fill

这些线绘制一个矩形和一个正方形。

  1. cc.Arc(330, 60, 40, 0, 2*Math.PI)
  2. cc.Fill

此处Arc方法绘制一个完整的圆。

  1. cc.Translate(220, 180)
  2. cc.Scale(1, 0.7)
  3. cc.Arc(0, 0, 50, 0, 2*Math.PI)
  4. cc.Fill

Translate方法将对象移动到特定点。 如果要绘制椭圆形，请先进行一些缩放。 在这里Scale方法缩小 y 轴。

Cario 绘图 - 图2

图：基本形状

透明矩形

透明性是指能够透视材料的质量。 了解透明度的最简单方法是想象一块玻璃或水。 从技术上讲，光线可以穿过玻璃，这样我们就可以看到玻璃后面的物体。

在计算机图形学中，我们可以使用 alpha 合成来实现透明效果。 Alpha 合成是将图像与背景组合以创建部分透明外观的过程。 合成过程使用 Alpha 通道。 （wikipedia.org，answers.com）

  1. ' ZetCode Mono Visual Basic GTK# tutorial
  2. '
  3. ' This program draws ten
  4. ' rectangles with different
  5. ' levels of transparency
  6. '
  7. ' author jan bodnar
  8. ' last modified May 2009
  9. ' website www.zetcode.com
  11. Imports Gtk
  13. Public Class GtkVBApp
  14.     Inherits Window
  16.     Public Sub New
  18.         MyBase.New("Transparent rectangles")
  20.         Me.InitUI
  22.         Me.SetDefaultSize(590, 90)
  23.         Me.SetPosition(WindowPosition.Center)
  24.         AddHandler Me.DeleteEvent, AddressOf Me.OnDelete
  26.         Me.ShowAll
  28.     End Sub
  30.     Private Sub InitUI
  32.         Dim darea As New DrawingArea
  33.         AddHandler darea.ExposeEvent, AddressOf Me.OnExpose
  34.         Me.Add(darea)
  36.     End Sub
  38.     Private Sub OnExpose(ByVal sender As Object, ByVal args As ExposeEventArgs)
  40.         Dim cc As Cairo.Context = Gdk.CairoHelper.Create(sender.GdkWindow)
  42.         Me.DrawRectangles(cc)
  44.         Dim disposeTarget As IDisposable = CType(cc.Target, IDisposable)
  45.         disposeTarget.Dispose()
  47.         Dim disposeContext As IDisposable = CType(cc, IDisposable)
  48.         disposeContext.Dispose()
  50.     End Sub
  52.     Private Sub DrawRectangles(ByVal cc As Cairo.Context)
  54.         For i As Integer = 1 To 10        
  55.             cc.SetSourceRGBA(0, 0, 1, i*0.1)
  56.             cc.Rectangle(50*i, 20, 40, 40)
  57.             cc.Fill  
  58.         Next
  60.     End Sub
  62.     Private Sub OnDelete(ByVal sender As Object, _
  63.             ByVal args As DeleteEventArgs)
  64.         Application.Quit
  65.     End Sub
  67.     Public Shared Sub Main
  69.         Application.Init
  70.         Dim app As New GtkVBApp
  71.         Application.Run
  73.     End Sub
  75. End Class

在示例中，我们将绘制十个具有不同透明度级别的矩形。

  1. cc.SetSourceRGBA(0, 0, 1, i*0.1)

SetSourceRGBA方法的最后一个参数是 alpha 透明度。

Cario 绘图 - 图3

图：透明矩形

甜甜圈

在下面的示例中，我们通过旋转一堆椭圆来创建 n 个复杂形状。

  1. ' ZetCode Mono Visual Basic GTK# tutorial
  2. '
  3. ' This program draws basic shapes
  4. ' available in Cairo
  5. '
  6. ' author jan bodnar
  7. ' last modified May 2009
  8. ' website www.zetcode.com
  10. Imports Gtk
  12. Public Class GtkVBApp
  13.     Inherits Window
  15.     Public Sub New
  17.         MyBase.New("Donut")
  19.         Me.InitUI
  21.         Me.SetDefaultSize(400, 250)
  22.         Me.SetPosition(WindowPosition.Center)
  23.         AddHandler Me.DeleteEvent, AddressOf Me.OnDelete
  25.         Me.ShowAll
  27.     End Sub
  29.     Private Sub InitUI
  31.         Dim darea As New DrawingArea
  32.         AddHandler darea.ExposeEvent, AddressOf Me.OnExpose
  33.         Me.Add(darea)
  35.     End Sub
  37.     Private Sub OnExpose(ByVal sender As Object, ByVal args As ExposeEventArgs)
  39.         Dim cc As Cairo.Context = Gdk.CairoHelper.Create(sender.GdkWindow)
  41.         Me.DrawDonut(cc)
  43.         Dim disposeTarget As IDisposable = CType(cc.Target, IDisposable)
  44.         disposeTarget.Dispose
  46.         Dim disposeContext As IDisposable = CType(cc, IDisposable)
  47.         disposeContext.Dispose
  49.     End Sub
  51.     Private Sub DrawDonut(ByVal cc As Cairo.Context)
  53.         cc.LineWidth = 0.5
  55.         Dim width, height As Integer
  56.         width = Allocation.Width
  57.         height = Allocation.Height
  59.         cc.Translate(width/2, height/2)
  60.         cc.Arc(0, 0, 120, 0, 2*Math.PI)
  61.         cc.Stroke
  63.         cc.Save
  65.         For i As Integer = 0 To 35
  66.             cc.Rotate( i*Math.PI/36)
  67.             cc.Scale(0.3, 1)
  68.             cc.Arc(0, 0, 120, 0, 2*Math.PI)
  69.             cc.Restore
  70.             cc.Stroke
  71.             cc.Save
  72.         Next
  74.     End Sub
  76.     Private Sub OnDelete(ByVal sender As Object, _
  77.             ByVal args As DeleteEventArgs)
  78.         Application.Quit
  79.     End Sub
  81.     Public Shared Sub Main
  83.         Application.Init
  84.         Dim app As New GtkVBApp
  85.         Application.Run
  87.     End Sub
  89. End Class

在此示例中，我们创建一个甜甜圈。 形状类似于曲奇，因此得名“甜甜圈”。

  1. cc.Translate(width/2, height/2)
  2. cc.Arc(0, 0, 120, 0, 2*Math.PI)
  3. cc.Stroke

刚开始时有一个椭圆。

  1. For i As Integer = 0 To 35
  2.     cc.Rotate( i*Math.PI/36)
  3.     cc.Scale(0.3, 1)
  4.     cc.Arc(0, 0, 120, 0, 2*Math.PI)
  5.     cc.Restore
  6.     cc.Stroke
  7.     cc.Save
  8. Next

旋转几圈后，有一个甜甜圈。

Cario 绘图 - 图4

图：多纳圈

绘制文字

在下一个示例中，我们在窗口上绘制一些文本。

  1. ' ZetCode Mono Visual Basic GTK# tutorial
  2. '
  3. ' This program draws text
  4. ' on the window
  5. '
  6. ' author jan bodnar
  7. ' last modified May 2009
  8. ' website www.zetcode.com
  10. Imports Gtk
  12. Public Class GtkVBApp
  13.     Inherits Window
  15.     Public Sub New
  17.         MyBase.New("Soulmate")
  19.         Me.InitUI
  21.         Me.SetDefaultSize(400, 250)
  22.         Me.SetPosition(WindowPosition.Center)
  23.         AddHandler Me.DeleteEvent, AddressOf Me.OnDelete
  25.         Me.ShowAll    
  27.     End Sub
  29.     Private Sub InitUI
  31.         Dim darea As New DrawingArea
  32.         AddHandler darea.ExposeEvent, AddressOf Me.OnExpose
  33.         Me.Add(darea)
  35.     End Sub
  37.     Private Sub OnExpose(ByVal sender As Object, ByVal args As ExposeEventArgs)
  39.         Dim cc As Cairo.Context = Gdk.CairoHelper.Create(sender.GdkWindow)
  41.         Me.DrawLyrics(cc)
  43.         Dim disposeTarget As IDisposable = CType(cc.Target, IDisposable)
  44.         disposeTarget.Dispose
  46.         Dim disposeContext As IDisposable = CType(cc, IDisposable)
  47.         disposeContext.Dispose
  49.     End Sub
  51.     Private Sub DrawLyrics(ByVal cc As Cairo.Context)
  53.         cc.SetSourceRGB(0.1, 0.1, 0.1)
  55.         cc.SelectFontFace("Purisa", Cairo.FontSlant.Normal, Cairo.FontWeight.Bold)
  56.         cc.SetFontSize(13)
  58.         cc.MoveTo(20, 30)
  59.         cc.ShowText("Most relationships seem so transitory")
  60.         cc.MoveTo(20, 60)
  61.         cc.ShowText("They're all good but not the permanent one")
  62.         cc.MoveTo(20, 120)
  63.         cc.ShowText("Who doesn't long for someone to hold")
  64.         cc.MoveTo(20, 150)
  65.         cc.ShowText("Who knows how to love without being told")
  66.         cc.MoveTo(20, 180)
  67.         cc.ShowText("Somebody tell me why I'm on my own")
  68.         cc.MoveTo(20, 210)
  69.         cc.ShowText("If there's a soulmate for everyone")
  71.     End Sub
  73.     Private Sub OnDelete(ByVal sender As Object, _
  74.             ByVal args As DeleteEventArgs)
  75.         Application.Quit
  76.     End Sub
  78.     Public Shared Sub Main
  80.         Application.Init
  81.         Dim app As New GtkVBApp
  82.         Application.Run
  84.     End Sub
  86. End Class

我们显示 Natasha Bedingfields Soulmate 歌曲的部分歌词。

  1. cc.SelectFontFace("Purisa", Cairo.FontSlant.Normal, Cairo.FontWeight.Bold)

在这里，我们指定使用的字体。 Purisa 粗体。

  1. cc.SetFontSize(13)

我们指定字体的大小。

  1. cc.MoveTo(20, 30)

我们移动到要绘制文本的位置。

  1. cc.ShowText("Most relationships seem so transitory")

ShowText方法将文本绘制到窗口上。

Cario 绘图 - 图5

图：灵魂伴侣

在 Visual Basic GTK# 教程的这一章中，我们使用 Cario 库进行绘图。