在了解繪圖之前,我們先講幾個預備知識
一、坐標系
坐標系是圖形設計的基礎。GDI+使用三個坐標空間:世界、頁面和設備,其中,世界坐標是用於建立特殊圖形世界模型的坐標系,也是在.NET Framework中傳遞給方法的坐標系。而頁面坐標系是指繪圖圖畫(如窗體、控件)使用的坐標系。設備坐標系是在其上繪制的物理設別(如屏幕和紙張)所使用的坐標系。
坐標系總是以左上角為原點(0,0),除了原點之外,坐標系還包括橫坐標(X軸)和縱坐標(Y軸)
二、像素
像素全稱為圖像元素,它是構成圖像的基本單位。通常以像素每英寸PPI(pixels per inch)為單位來表示圖像分辨率的大小。例如:1024*768分辨率表示水平方向上每英寸長度上的像素數是1024,垂直方向是768
三、繪圖
3.1 畫筆
畫筆使用Pen類表示,主要用於繪制線條,或者線條組合成的其他幾何形狀,它的構造函數為:
public Pen(Color color, float width)
參數說明:color 設置Pen的顏色
width 設置Pen的寬度
例如創建一個Pen對象,使其顏色為藍色,寬度為2
Pen MyPen = new Pen(Color.Blue, 2);
以上內容參照自MSDN,詳細參考 MSDN Pen Class
3.2 畫刷
畫刷使用Brush類表示,主要用於填充幾何圖形,如將正方形和圓形填充其他顏色等。它是一個抽象基類,不能實例化。如果要創建一個畫刷對象,需要使用從Brush類派生出的類。
Brush類常用的派生類及說明:
派生類 | 說明 |
SolidBrush | 定義單色畫刷 |
HatchBrush | 提供一種特定樣式的圖形,用來制作填滿整個封閉區間的繪圖效果 |
LinerGradientBrush | 提供一種漸變色彩的特效,填充圖形的內部區域 |
TextureBrush | 使用圖像來填充圖形的內部 |
Brush MyBrush = new SolidBrush(Color.BlueViolet); HatchBrush hb = new HatchBrush(HatchStyle.DiagonalBrick, Color.Yellow); LinearGradientBrush linGrBrush = new LinearGradientBrush( new Point(0, 10), new Point(200, 10), Color.FromArgb(255, 255, 0, 0), Color.FromArgb(255, 0, 0, 255));
上面代碼創建了不同類型的畫刷對象,創建后面兩個畫刷對象是需要引入System.Drawing.Drawing2D命名空間
以上內容來自MSDN,詳情參看MSDN Brush Class
3.3 繪制直線
調用Graphics類中的DrawLine方法,結合Pen對象可以繪制直線(如果對Graphics類不了解,可以參考我之前寫的博客 C#之Graphics類)
DrawLine方法有兩種構造函數:
public void DrawLine(Pen pen, Point pt1, Point pt2);
參數說明: pt1 Point結構或PointF結構,表示要連接的第一個點 pt2 表示要連接的第二個點
Point和PointF使用方法完全相同,只是Point的X和Y的類型為int,而PointF的X和Y為float,因此PointF通常用於表示坐標不是整數的情況
public void DrawLine(Pen pen, int x1, int y1, int x2, int y2); public void DrawLine(Pen pen, float x1, float y1, float x2, float y2); // x1,y1,x2,y2 分別表示第一個點的橫縱坐標和第二個點的橫縱坐標
3.4 繪制矩形
通過Graphics類中的DrawRectangle或者FillRectangle方法可以繪制矩形
public void DrawRectangle(Pen pen, float x, float y, float width, float height); public void DrawRectangle(Pen pen, int x, int y, int width, int height); //x,y表示要繪制矩形左上角的x坐標和y坐標 //width表示要繪制矩形的寬度,height表示高度
public void FillRectangle(Brush brush, float x, float y, float width, float height); public void FillRectangle(Brush brush, int x, int y, int width, int height);
DrawRectangle和FillRectangle的區別是DrawRectangle只是繪制圖形,FillRectangle是對圖形進行填充
下面示例制作一個柱形圖,當點擊繪制按鈕的時候就會開始繪制,使用到了窗體方面的知識
using System; using System.Drawing; using System.Threading; using System.Windows.Forms; using System.Drawing.Drawing2D; namespace GDI_繪圖 { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { Graphics g = CreateGraphics(); Pen MyPen = new Pen(Color.Blue, 2); int x = 100; for (int i = 0; i <= 10; i++) //繪制縱向線條 { g.DrawLine(MyPen, x, 400, x, 100); x += 40; } Thread.Sleep(200); //線程休眠200毫秒,便於觀察繪制情況 int y = 400; for (int i = 0; i < +10; i++) //繪制橫向線條 { g.DrawLine(MyPen, 100, y, 550, y); y -= 30; } Thread.Sleep(200); x = 110; y = 400; Brush MyBrush = new SolidBrush(Color.BlueViolet); int[] saleNum = { 120, 178, 263, 215, 99, 111, 265, 171, 136, 100, 129 }; for(int i = 0; i<saleNum.Length; i++) { g.FillRectangle(MyBrush, x, y-saleNum[i], 20, saleNum[i]); //繪制填充矩形 x += 40; } } } }
效果如圖:
3.5 繪制橢圓
可以使用Graphics類中的DrawEllipse方法或者FillEllipse方法來繪制橢圓,它的語法為:
public void DrawEllipse(Pen pen, RectangleF rect) public void DrawEllipse(Pen pen, float x, float y, float width, float height) public void DrawEllipse(Pen pen, Rectangle rect) public void DrawEllipse(Pen pen, int x, int y, int width, int height)
它與繪制矩形類似,參數中 rect 是Rectangle結構或RectangleF結構,用來定義橢圓的邊界
public void FillEllipse(Brush brush, RectangleF rect); public void FillEllipse(Brush brush, float x, float y, float width, float height); public void FillEllipse(Brush brush, Rectangle rect); public void FillEllipse(Brush brush, int x, int y, int width, int height);
3.6 繪制圓弧
通過DrawArc方法,可以繪制圓弧,其語法入下
public void DrawArc(Pen pen, int x, int y, int width, int height, int startAngle, int sweepAngle); public void DrawArc(Pen pen, Rectangle rect, float startAngle, float sweepAngle); public void DrawArc(Pen pen, float x, float y, float width, float height, float startAngle, float sweepAngle); public void DrawArc(Pen pen, RectangleF rect, float startAngle, float sweepAngle);
參數說明:startAngle:從X軸到弧線的起始點沿順時針方向度量的角(以度為單位)
sweepAngle: 從startAngle參數到弧線的結束點沿順時針方向度量的角(以度為單位)
其余參數在前面已經講過了,就不再贅述
如果你對startAngle和sweepAngle還不是很清楚,可以查看 剖析startAngle和sweepAngle
3.7 繪制扇形
DrawPie方法和FillPie方法可以繪制扇形,其中DrawPie可以繪制參數指定的扇形,而FillPie則是填充參數指定的扇形,其語法入下

// // 摘要: // 繪制一個扇形,該形狀由一個坐標對、寬度、高度以及兩條射線所指定的橢圓定義。 // // 參數: // pen: // System.Drawing.Pen,它確定扇形的顏色、寬度和樣式。 // // x: // 邊框的左上角的 x 坐標,該邊框定義扇形所屬的橢圓。 // // y: // 邊框的左上角的 y 坐標,該邊框定義扇形所屬的橢圓。 // // width: // 邊框的寬度,該邊框定義扇形所屬的橢圓。 // // height: // 邊框的高度,該邊框定義扇形所屬的橢圓。 // // startAngle: // 從 x 軸到扇形的第一條邊沿順時針方向度量的角(以度為單位)。 // // sweepAngle: // 從 startAngle 參數到扇形的第二條邊沿順時針方向度量的角(以度為單位)。 // // 異常: // T:System.ArgumentNullException: // pen 為 null。 public void DrawPie(Pen pen, float x, float y, float width, float height, float startAngle, float sweepAngle); // // 摘要: // 繪制由一個 System.Drawing.Rectangle 結構和兩條射線所指定的橢圓定義的扇形。 // // 參數: // pen: // System.Drawing.Pen,它確定扇形的顏色、寬度和樣式。 // // rect: // System.Drawing.Rectangle 結構,它表示定義該扇形所屬的橢圓的邊框。 // // startAngle: // 從 x 軸到扇形的第一條邊沿順時針方向度量的角(以度為單位)。 // // sweepAngle: // 從 startAngle 參數到扇形的第二條邊沿順時針方向度量的角(以度為單位)。 // // 異常: // T:System.ArgumentNullException: // pen 為 null。 public void DrawPie(Pen pen, Rectangle rect, float startAngle, float sweepAngle); // // 摘要: // 繪制一個扇形,該形狀由一個坐標對、寬度、高度以及兩條射線所指定的橢圓定義。 // // 參數: // pen: // System.Drawing.Pen,它確定扇形的顏色、寬度和樣式。 // // x: // 邊框的左上角的 x 坐標,該邊框定義扇形所屬的橢圓。 // // y: // 邊框的左上角的 y 坐標,該邊框定義扇形所屬的橢圓。 // // width: // 邊框的寬度,該邊框定義扇形所屬的橢圓。 // // height: // 邊框的高度,該邊框定義扇形所屬的橢圓。 // // startAngle: // 從 x 軸到扇形的第一條邊沿順時針方向度量的角(以度為單位)。 // // sweepAngle: // 從 startAngle 參數到扇形的第二條邊沿順時針方向度量的角(以度為單位)。 // // 異常: // T:System.ArgumentNullException: // pen 為 null。 public void DrawPie(Pen pen, int x, int y, int width, int height, int startAngle, int sweepAngle); // // 摘要: // 繪制由一個 System.Drawing.RectangleF 結構和兩條射線所指定的橢圓定義的扇形。 // // 參數: // pen: // System.Drawing.Pen,它確定扇形的顏色、寬度和樣式。 // // rect: // System.Drawing.RectangleF 結構,它表示定義該扇形所屬的橢圓的邊框。 // // startAngle: // 從 x 軸到扇形的第一條邊沿順時針方向度量的角(以度為單位)。 // // sweepAngle: // 從 startAngle 參數到扇形的第二條邊沿順時針方向度量的角(以度為單位)。 // // 異常: // T:System.ArgumentNullException: // pen 為 null。 public void DrawPie(Pen pen, RectangleF rect, float startAngle, float sweepAngle);
public void FillPie(Brush brush, int x, int y, int width, int height, int startAngle, int sweepAngle); public void FillPie(Brush brush, Rectangle rect, float startAngle, float sweepAngle); public void FillPie(Brush brush, float x, float y, float width, float height, float startAngle, float sweepAngle);
3.8 繪制多邊形
多邊形是指由三條或更多邊的閉合圖形,如三角形、四邊形、五邊形等。可以使用DrawPolygon方法或者FillPolygon方法繪制多邊形,需要使用Graphics對象,Pen對象和Point(或PointF)對象數組,其語法如下
public void DrawPolygon(Pen pen, PointF[] points); public void DrawPolygon(Pen pen, Point[] points); public void FillPolygon(Brush brush, PointF[] points); public void FillPolygon(Brush brush, Point[] points);
public void FillPolygon(Brush brush, Point[] points, FillMode fillMode);
public void FillPolygon(Brush brush, PointF[] points, FillMode fillMode);
參數中 points為Point或PointF對象數組
fillMode: 確定填充樣式的 System.Drawing.Drawing2D.FillMode 枚舉的成員。,使用時要引用System.Drawing.Drawing2D命名空間
作為枚舉類型,其定義如下
public enum FillMode { // // 摘要: // 指定備用填充模式。 Alternate = 0, // // 摘要: // 指定環繞的填充模式。 Winding = 1 }
下面舉個繪制三角形的例子
private void button2_Click(object sender, EventArgs e) { Graphics g = CreateGraphics(); Pen myPen = new Pen(Color.Green,2); Point p1 = new Point(10, 10); Point p2 = new Point(10, 90); Point p3 = new Point(90, 90); Point[] points = new Point[3]; Brush myBrush = new SolidBrush(Color.Green); points[0] = p1; points[1] = p2; points[2] = p3; g.FillPolygon(myBrush, points,FillMode.Winding); }
結果:
3.9 繪制圖像
可以使用DrawImage方法繪制圖像,該方法有多種形式,常用的語法格式為
public void DrawImage(Image image, int x, int y); public void DrawImage(Image image, int x, int y, int width, int height);
參數說明:img:要繪制的Image
x: 所要繪制圖像的左上角的X坐標
y: 所要繪制圖像的左上角的y坐標
width:要繪制圖像的寬度
height: 要繪制圖像的高度
private void button2_Click(object sender, EventArgs e) { Graphics g = CreateGraphics(); Image img = Image.FromFile("test.jpg"); g.DrawImage(img, 50, 20, 90, 20); }
四、顏色
4.1 系統定義的顏色
系統定義的顏色使用Color結構的屬性來表示,如:
Color myColor = Color.Red;
4.2 自定義顏色
可以使用Color結構的FromArgb方法,分別制定R、G、B顏色值
public static Color FromArgb(int red, int green, int blue);
參數說明:red:新的紅色分量值 System.Drawing.Color。 有效值為 0 到 255 之間。
green:新的綠色分量值 System.Drawing.Color。 有效值為 0 到 255 之間。
blue:新的藍色分量值 System.Drawing.Color。 有效值為 0 到 255 之間。
也可以制定Alpha透明度
public static Color FromArgb(int alpha, int red, int green, int blue);
alpha:Alpha 分量。 有效值為 0 到 255 之間,當其值為255時表示不透明,0表示完全透明。
五、文本輸出
5.1 字體
字體使用Font類表示,用來定義特定的文本格式,常用的構造函數有:
參數: // family: // 新 System.Drawing.Font 的 System.Drawing.FontFamily。 // // emSize: // 新字體的全身大小(以磅為單位)。 // // style: // 新字體的 System.Drawing.FontStyle。 // // 異常: // T:System.ArgumentException: // emSize 是小於或等於 0,計算結果為無窮大,或者不是有效的數字。 // // T:System.ArgumentNullException: // family 為 null。 public Font(FontFamily family, float emSize, FontStyle style);
例:
Font myFont = new Font("宋體", 18, FontStyle.Bold);
其中FontStyle使用枚舉表示,其成員有:
// // 摘要: // 指定應用於文本的樣式信息。 [Flags] public enum FontStyle { // // 摘要: // 普通文本。 Regular = 0, // // 摘要: // 顯示為粗體文本。 Bold = 1, // // 摘要: // 斜體文本。 Italic = 2, // // 摘要: // 帶下划線的文本。 Underline = 4, // // 摘要: // 有一條線穿過中部的文本。 Strikeout = 8 }
5.2 輸出文本
通過DrawString方法,可以指定位置以指定的Brush和Font對象繪制指定的文本字符村,其常用語法格式為:
// 參數: // s: // 要繪制的字符串。 // // font: // System.Drawing.Font,它定義字符串的文本格式。 // // brush: // System.Drawing.Brush,它確定所繪制文本的顏色和紋理。 // // x: // 所繪制文本的左上角的 x 坐標。 // // y: // 所繪制文本的左上角的 y 坐標。 // // 異常: // T:System.ArgumentNullException: // brush 為 null。 - 或 - s 為 null。 public void DrawString(string s, Font font, Brush brush, float x, float y);
例:
private void button2_Click(object sender, EventArgs e) { Graphics g = CreateGraphics(); Brush myBrush = new SolidBrush(Color.Green); string str = "just for fun"; Font myFont = new Font("宋體", 18, FontStyle.Bold); g.DrawString(str, myFont, myBrush, 60, 20); }
點擊button2后結果如圖