繪圖 · ZetCode 中文系列教程

# 繪圖 > 原文： [http://zetcode.com/gui/vbwinforms/painting/](http://zetcode.com/gui/vbwinforms/painting/) 在 Visual Basic Winforms 教程的這一部分中，我們將進行繪圖。當我們想要更改或增強現有控件時，將使用繪圖。或者，如果我們要從頭開始創建自定義控件。要進行繪圖，我們使用 Winforms 庫提供的繪圖 API。繪圖是在一種方法中完成的，我們將其插入`Paint`事件。 `System.Drawing`名稱空間提供對`GDI+`基本圖形功能的訪問。 `System.Drawing.Drawing2D`，`System.Drawing.Imaging`和`System.Drawing.Text`命名空間中提供了更高級的功能。 `Graphics`類提供了在表單上繪圖的方法。 ## `HatchBrush` `HatchBrush`對象用于填充形狀的內部。我們可以使用幾種內置模式。 ```vb ' ZetCode Mono Visual Basic Winforms tutorial ' ' This program draws nine rectangles. ' The interiors are filled with ' different built-in patterns. ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports System.Windows.Forms Imports System.Drawing Imports System.Drawing.Drawing2D Public Class WinVBApp Inherits Form Public Sub New Me.Text = "Hatches" Me.Size = New Size(360, 300) AddHandler Me.Paint AddressOf Me.OnPaint Me.CenterToScreen End Sub Private Sub OnPaint(ByVal sender As Object, ByVal e As PaintEventArgs) Dim g As Graphics = e.Graphics Dim hb As HatchBrush = New HatchBrush(HatchStyle.Cross, Color.Black, Me.BackColor) g.FillRectangle(hb, 10, 15, 90, 60) hb = New HatchBrush(HatchStyle.Percent05, Color.Black, Me.BackColor) g.FillRectangle(hb, 130, 15, 90, 60) hb = New HatchBrush(HatchStyle.SolidDiamond, Color.Black, Me.BackColor) g.FillRectangle(hb, 250, 15, 90, 60) hb = New HatchBrush(HatchStyle.DiagonalBrick, Color.Black, Me.BackColor) g.FillRectangle(hb, 10, 105, 90, 60) hb = New HatchBrush(HatchStyle.Divot, Color.Black, Me.BackColor) g.FillRectangle(hb, 130, 105, 90, 60) hb = New HatchBrush(HatchStyle.Wave, Color.Black, Me.BackColor) g.FillRectangle(hb, 250, 105, 90, 60) hb = New HatchBrush(HatchStyle.ZigZag, Color.Black, Me.BackColor) g.FillRectangle(hb, 10, 195, 90, 60) hb = New HatchBrush(HatchStyle.Sphere, Color.Black, Me.BackColor) g.FillRectangle(hb, 130, 195, 90, 60) hb = New HatchBrush(HatchStyle.Shingle, Color.Black, Me.BackColor) g.FillRectangle(hb, 250, 195, 90, 60) g.Dispose hb.Dispose End Sub Public Shared Sub Main Application.Run(New WinVBApp) End Sub End Class ``` 這次，我們用九種不同的圖案（稱為剖面線）填充了九個矩形。 ```vb Dim hb As HatchBrush = New HatchBrush(HatchStyle.Cross, Color.Black, Me.BackColor) ``` 在這里，我們創建一個`HatchBrush`對象。參數是圖案填充樣式以及前景色和背景色。背景顏色設置為表單的顏色，因此看起來就像我們在表單上繪制的一樣。 ```vb g.FillRectangle(hb, 10, 15, 90, 60) ``` 我們使用指定的陰影刷填充矩形。 ![Hatches](https://img.kancloud.cn/57/c3/57c3c49c6220a49e9c0a3f0d10ce3736_360x301.jpg) 圖：通口 ## 基本形狀下面的示例在窗體控件上繪制一些基本形狀。 ```vb ' ZetCode Mono Visual Basic Winforms tutorial ' ' This program draws basic shapes available ' in Winforms ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports System.Windows.Forms Imports System.Drawing Imports System.Drawing.Drawing2D Imports System.Collections.Generic Public Class WinVBApp Inherits Form Public Sub New Me.Text = "Basic Shapes" Me.Size = New Size(420, 280) AddHandler Me.Paint AddressOf Me.OnPaint Me.CenterToScreen End Sub Private Sub OnPaint(ByVal sender As Object, ByVal e As PaintEventArgs) Dim g As Graphics = e.Graphics g.SmoothingMode = SmoothingMode.AntiAlias g.FillRectangle(Brushes.Gray, 20, 20, 120, 80) g.FillRectangle(Brushes.Gray, 180, 20, 80, 80) g.FillEllipse(Brushes.Gray, 30, 120, 100, 100) g.FillEllipse(Brushes.Gray, 160, 130, 100, 70) Dim points(5) As Point points(0) = New Point(300, 40) points(1) = New Point(340, 15) points(2) = New Point(380, 40) points(3) = New Point(380, 80) points(4) = New Point(340, 105) points(5) = New Point(300, 80) g.FillPolygon(Brushes.Gray, points) g.FillPie(Brushes.Gray, New Rectangle(290, 130, 90, 90), 0, 315) g.Dispose End Sub Public Shared Sub Main Application.Run(New WinVBApp) End Sub End Class ``` 該代碼示例在表單上繪制六個形狀。矩形，正方形，圓形，橢圓形，多邊形和扇形。 ```vb g.SmoothingMode = SmoothingMode.AntiAlias ``` 這使繪圖更平滑。 ```vb g.FillRectangle(Brushes.Gray, 20, 20, 120, 80) ``` 這條線用灰色填充矩形。參數是畫筆顏色，矩形左上角的 x，y 坐標以及矩形的寬度和高度。 ```vb Dim points(5) As Point points(0) = New Point(300, 40) points(1) = New Point(340, 15) ... ``` 我們創建五個點的數組。 ```vb g.FillPolygon(Brushes.Gray, points) ``` 這條線繪制了一個包含六個單點的多邊形。 ```vb g.FillPie(Brushes.Gray, New Rectangle(290, 130, 90, 90), 0, 315) ``` 這條線畫了一個餡餅。最后兩個參數是起始角度和后掠角度。以度為單位。 ![Basic shapes](https://img.kancloud.cn/f7/c3/f7c34295698ee4867bc21f0452b3d248_420x281.jpg) 圖：基本形狀 ## 透明矩形透明性是指能夠透視材料的質量。了解透明度的最簡單方法是想象一塊玻璃或水。從技術上講，光線可以穿過玻璃，這樣我們就可以看到玻璃后面的物體。在計算機圖形學中，我們可以使用 alpha 合成來實現透明效果。 Alpha 合成是將圖像與背景組合以創建部分透明外觀的過程。合成過程使用 Alpha 通道。（wikipedia.org，answers.com） ```vb ' ZetCode Mono Visual Basic Winforms tutorial ' ' This program draws ten ' rectangles with different ' levels of transparency ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports System.Windows.Forms Imports System.Drawing Imports System.Drawing.Drawing2D Imports System.Collections.Generic Public Class WinVBApp Inherits Form Public Sub New Me.Text = "Transparent rectangles" Me.Size = New Size(590, 110) AddHandler Me.Paint AddressOf Me.OnPaint Me.CenterToScreen End Sub Private Sub OnPaint(ByVal sender As Object, ByVal e As PaintEventArgs) Dim g As Graphics = e.Graphics For i As Integer = 1 to 10 Dim color As Color = Color.FromArgb(i*25, 0, 0, 255) Dim brush As Brush = New SolidBrush(color) g.FillRectangle(brush, 50*i, 20, 40, 40) Next g.Dispose End Sub Public Shared Sub Main Application.Run(New WinVBApp) End Sub End Class ``` 在示例中，我們將繪制十個具有不同透明度級別的矩形。 ```vb Dim color As Color = Color.FromArgb(i*25, 0, 0, 255) ``` 該行創建一個顏色對象。第一個值是 Alpha 透明度。 ```vb Dim brush As Brush = New SolidBrush(color) ``` 我們用顏色創建畫筆。 ```vb g.FillRectangle(brush, 50*i, 20, 40, 40) ``` 我們用顏色填充矩形。 ![Transparent rectangles](https://img.kancloud.cn/2d/2b/2d2ba8bf05c9c7ad7369fe0ad55124f4_590x111.jpg) 圖：透明矩形 ## 灰度圖像下面的示例創建一個灰度圖像。 ```vb ' ZetCode Mono Visual Basic Winforms tutorial ' ' This program draws creates a grayscale ' clone of a bitmap image ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports System.Windows.Forms Imports System.Drawing Imports System.Drawing.Drawing2D Public Class WinVBApp Inherits Form Private rotunda As Bitmap Private gs As Bitmap Public Sub New Me.Text = "Grayscale" Me.Size = New Size(290, 150) rotunda = Me.LoadImage gs = GrayScale(rotunda.Clone) AddHandler Me.Paint AddressOf Me.OnPaint Me.CenterToScreen End Sub Private Function LoadImage As Bitmap Try rotunda = New Bitmap("rotunda.jpg") Return rotunda Catch Console.WriteLine("Image not found") Environment.Exit(1) End Try End Function Private Function GrayScale(ByVal image As Bitmap) As Bitmap Dim w As Integer = image.Width Dim h As Integer = image.Height For i as Integer = 0 To w-1 For j As Integer = 0 To h-1 Dim c As Color = image.GetPixel(i, j) Dim lum As Double = 0.299*c.R + 0.587*c.G + 0.114*c.B image.SetPixel(i, j, Color.FromArgb(lum, lum, lum)) Next Next Return image End Function Private Sub OnPaint(ByVal sender As Object, ByVal e As PaintEventArgs) Dim g As Graphics = e.Graphics Dim r1 As New Rectangle(15, 15, rotunda.Width, rotunda.Height) g.DrawImage(rotunda, r1) Dim r2 As New Rectangle(150, 15, gs.Width, gs.Height) g.DrawImage(gs, r2) g.Dispose End Sub Public Shared Sub Main Application.Run(New WinVBApp) End Sub End Class ``` 我們的示例中有兩個圖像。一種顏色和一種灰度。 ```vb rotunda = Me.LoadImage ``` `LoadImage`方法從磁盤的當前工作目錄加載位圖。 ```vb gs = GrayScale(rotunda.Clone) ``` `GrayScale`方法從彩色圖像制作灰度圖像。我們將圓形大廳圖像的副本作為此方法的參數。 ```vb Dim c As Color = image.GetPixel(i, j) ``` 我們得到一個像素的顏色。 ```vb Dim lum As Double = 0.299*c.R + 0.587*c.G + 0.114*c.B ``` 該方程式計算灰度圖像的亮度。如果我們使用這些因素來縮放顏色的紅色，綠色和藍色部分，則人眼會將圖像視為灰色。 ```vb image.SetPixel(i, j, Color.FromArgb(lum, lum, lum)) ``` 我們修改像素。 ![Grayscale image](https://img.kancloud.cn/06/ec/06ec9a5ce63e5f69e46fcf1dbb22214b_290x151.jpg) 圖：灰度圖像 ## 繪制文字要在 Winforms `Form`上繪制文本，我們使用`DrawString`方法。 ```vb ' ZetCode Mono Visual Basic Winforms tutorial ' ' This program draws lyrics of ' a song ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports System.Windows.Forms Imports System.Drawing Imports System.Drawing.Drawing2D Imports System.Collections.Generic Public Class WinVBApp Inherits Form Public Sub New Me.Text = "You know I'm no Good" Me.Size = New Size(380, 450) AddHandler Me.Paint AddressOf Me.OnPaint Me.CenterToScreen End Sub Private Sub OnPaint(ByVal sender As Object, ByVal e As PaintEventArgs) Dim g As Graphics = e.Graphics Dim ft As New Font("Purisa", 10) Dim br As New SolidBrush(Color.Black) Dim pt As PointF = New PointF(20.0f, 20.0f) g.DrawString("Meet you downstairs in the bar and heard", ft, br, pt) pt = New PointF(20.0f, 50.0f) g.DrawString("Your rolled up sleeves and your skull t-shirt", ft, br, pt) pt = New PointF(20.0f, 80.0f) g.DrawString("You say why did you do it with him today?", ft, br, pt) pt = New PointF(20.0f, 110.0f) g.DrawString("And sniffed me out like I was tanqueray", ft, br, pt) pt = New PointF(20.0f, 160.0f) g.DrawString("Cause you’re my fella, my guy", ft, br, pt) pt = New PointF(20.0f, 190.0f) g.DrawString("Hand me your stella and fly", ft, br, pt) pt = New PointF(20.0f, 220.0f) g.DrawString("By the time I’m out the door", ft, br, pt) pt = New PointF(20.0f, 250.0f) g.DrawString("You tear me down like roger moore", ft, br, pt) pt = New PointF(20.0f, 300.0f) g.DrawString("I cheated myself", ft, br, pt) pt = New PointF(20.0f, 330.0f) g.DrawString("Like I knew I would", ft, br, pt) pt = New PointF(20.0f, 360.0f) g.DrawString("I told ya, I was trouble", ft, br, pt) pt = New PointF(20.0f, 390.0f) g.DrawString("You know that I’m no good", ft, br, pt) ft.Dispose br.Dispose g.Dispose End Sub Public Shared Sub Main Application.Run(New WinVBApp) End Sub End Class ``` 在我們的示例中，我們在 Winforms 窗體上繪制歌曲的歌詞。 ```vb Dim ft As New Font("Purisa", 10) ``` 我們使用 10 磅高的 Purisa 字體。 ```vb Dim pt As PointF = New PointF(20.0f, 20.0f) ``` 要在表單上繪制字符串，我們必須使用浮點值。 ```vb g.DrawString("Meet you downstairs in the bar and heard", ft, br, pt) ``` `DrawString`方法采用以下參數：要繪制的文本，字體，筆刷和`PointF`對象。 ![Lyrics](https://img.kancloud.cn/4f/c4/4fc4d997f5aab85c5eeaa51b5b125031_380x451.jpg) 圖：歌詞 ## 等待在此示例中，我們使用透明效果創建一個等待演示。我們將繪制 8 條線，這些線將逐漸消失，從而產生一種錯覺，即一條線在移動。這種效果通常用于通知用戶，一項艱巨的任務正在幕后進行。一個示例是通過互聯網流式傳輸視頻。 ```vb ' ZetCode Mono Visual Basic Winforms tutorial ' ' This program creates a waiting ' demo ' ' author jan bodnar ' last modified May 2009 ' website www.zetcode.com Imports System.Windows.Forms Imports System.Drawing Imports System.Drawing.Drawing2D Imports System.Collections.Generic Public Class WinVBApp Inherits Form Dim trs(,) As Integer = New Integer(,) { _ { 0, 35, 70, 100, 150, 180, 210, 250 }, _ { 250, 0, 35, 70, 100, 150, 180, 210 }, _ { 210, 250, 0, 35, 70, 100, 150, 180 }, _ { 180, 210, 250, 0, 35, 70, 100, 150 }, _ { 150, 180, 210, 250, 0, 35, 70, 100 }, _ { 100, 150, 180, 210, 250, 0, 35, 70 }, _ { 70, 100, 150, 180, 210, 250, 0, 35 }, _ { 35, 70, 100, 150, 180, 210, 250, 0 } _ } Dim count As Integer = 0 Dim timer As Timer Public Sub New Me.Text = "Waiting" Me.Size = New Size(250, 150) timer = New Timer timer.Enabled = True timer.Interval = 80 AddHandler timer.Tick, AddressOf Me.OnTick AddHandler Me.Paint, AddressOf Me.OnPaint Me.CenterToScreen End Sub Private Sub OnTick(ByVal sender As Object, ByVal e As EventArgs) count = count + 1 Me.Refresh End Sub Private Sub OnPaint(ByVal sender As Object, ByVal e As PaintEventArgs) Dim g As Graphics = e.Graphics g.SmoothingMode = SmoothingMode.AntiAlias Dim si As Size = Me.ClientSize g.TranslateTransform(si.Width/2, si.Height/2) For i As Integer = 0 To 7 Dim color As Color = Color.FromArgb(trs(count Mod 8, i), 30, 30, 30) Dim pen As New Pen(color, 3) pen.StartCap = LineCap.Round pen.EndCap = LineCap.Round g.DrawLine(pen, 0, -10, 0, -40) g.RotateTransform(45) pen.Dispose Next g.Dispose End Sub Public Shared Sub Main Application.Run(New WinVBApp) End Sub End Class ``` 我們用八個不同的 alpha 值繪制八條線。 ```vb timer = New Timer timer.Enabled = True timer.Interval = 80 AddHandler timer.Tick, AddressOf Me.OnTick ``` 我們使用`Timer`制作動畫。 ```vb Dim trs(,) As Integer = New Integer(,) { _ { 0, 35, 70, 100, 150, 180, 210, 250 }, _ ... } ``` 這是此演示中使用的透明度值的二維集合。有 8 行，每行一種狀態。 8 行中的每行將連續使用這些值。 ```vb Dim pen As New Pen(color, 3) pen.StartCap = LineCap.Round pen.EndCap = LineCap.Round ``` 我們使線條更粗一些，以便更好地顯示它們。我們用帶帽的線畫線。 ```vb Dim color As Color = Color.FromArgb(trs(count Mod 8, i), 30, 30, 30) ``` 在這里，我們定義了一條線的透明度值。 ```vb g.DrawLine(pen, 0, -10, 0, -40) g.RotateTransform(45) ``` 我們畫了 8 條線。它們是順時針旋轉的。 ![Waiting](https://img.kancloud.cn/c9/50/c9509a87338102dde0294f449ec1d56c_250x151.jpg) 圖：等待在本章中，我們使用 Visual Basic 在 Winforms 中進行了一些繪圖。