DOBON.NET プログラミング道: .NET Framework, VB.NET, C#, Visual Basic, Visual Studio, インストーラ, ...

線を描く

注意:画像の表示方法が分からないという方は、まず「コントロールやフォームに画像を表示する」をご覧ください。

直線を描く

まずは直線を一本引いてみましょう。直線を描画するには、Graphics.DrawLineメソッドを用います。

早速ですが、具体例を示します。次の例ではPictureBoxコントロール(PictureBox1)の座標 (10, 20)-(100, 200) に太さ1の黒い線を描いています。

VB.NET
コードを隠すコードを選択
'Imports System.Drawing

'描画先とするImageオブジェクトを作成する
Dim canvas As New Bitmap(PictureBox1.Width, PictureBox1.Height)
'ImageオブジェクトのGraphicsオブジェクトを作成する
Dim g As Graphics = Graphics.FromImage(canvas)

'(10, 20)-(100, 200)に、幅1の黒い線を引く
g.DrawLine(Pens.Black, 10, 20, 100, 200)

'リソースを解放する
g.Dispose()
'PictureBox1に表示する
PictureBox1.Image = canvas
C#
コードを隠すコードを選択
//using System.Drawing;

//描画先とするImageオブジェクトを作成する
Bitmap canvas = new Bitmap(PictureBox1.Width, PictureBox1.Height);
//ImageオブジェクトのGraphicsオブジェクトを作成する
Graphics g = Graphics.FromImage(canvas);

//(10, 20)-(100, 200)に、幅1の黒い線を引く
g.DrawLine(Pens.Black, 10, 20, 100, 200);

//リソースを解放する
g.Dispose();
//PictureBox1に表示する
PictureBox1.Image = canvas;

Penオブジェクトを作成する

DrawLineメソッドの1番目のパラメータはPen型です。標準色で幅が1の線を引く場合は、上記の例のように、Pensクラスに用意されている静的プロパティをそのまま利用することができます。しかしそれ以外の線を引きたい時は、自前でPenオブジェクトを作成する必要があります。自前で作成したPenオブジェクトは使い終わったらDisposeメソッドで破棄する必要があります。

次の例では、幅3の黒い線を引いています。

VB.NET
コードを隠すコードを選択
'Imports System.Drawing

'描画先とするImageオブジェクトを作成する
Dim canvas As New Bitmap(PictureBox1.Width, PictureBox1.Height)
'ImageオブジェクトのGraphicsオブジェクトを作成する
Dim g As Graphics = Graphics.FromImage(canvas)

'Penオブジェクトの作成(幅3黒色)
Dim p As New Pen(Color.Black, 3)
'(10, 20)-(100, 200)に線を引く
g.DrawLine(p, 10, 20, 100, 200)

'リソースを解放する
p.Dispose()
g.Dispose()
'PictureBox1に表示する
PictureBox1.Image = canvas
C#
コードを隠すコードを選択
//using System.Drawing;

//描画先とするImageオブジェクトを作成する
Bitmap canvas = new Bitmap(PictureBox1.Width, PictureBox1.Height);
//ImageオブジェクトのGraphicsオブジェクトを作成する
Graphics g = Graphics.FromImage(canvas);

//Penオブジェクトの作成(幅3黒色)
Pen p = new Pen(Color.Black, 3);
//(10, 20)-(100, 200)に線を引く
g.DrawLine(p, 10, 20, 100, 200);

//リソースを解放する
p.Dispose();
g.Dispose();
//PictureBox1に表示する
PictureBox1.Image = canvas;

折れ線を描く

次に折れ線を引いてみましょう。上と同じようにDrawLineメソッドで一本ずつ引いても良いのですが、DrawLinesメソッドを使えばいっぺんに引くことができます。

次の例では、(0, 0)、(150, 50)、(80, 100)、(100, 150)の4点を結ぶ3本の線を引いています。

VB.NET
コードを隠すコードを選択
'Imports System.Drawing

'描画先とするImageオブジェクトを作成する
Dim canvas As New Bitmap(PictureBox1.Width, PictureBox1.Height)
'ImageオブジェクトのGraphicsオブジェクトを作成する
Dim g As Graphics = Graphics.FromImage(canvas)

'直線で接続する点の配列を作成
Dim ps As Point() = { _
    New Point(0, 0), _
    New Point(150, 50), _
    New Point(80, 100), _
    New Point(100, 150) _
}
'折れ線を引く
g.DrawLines(Pens.Black, ps)

'リソースを解放する
g.Dispose()
'PictureBox1に表示する
PictureBox1.Image = canvas
C#
コードを隠すコードを選択
//using System.Drawing;

//描画先とするImageオブジェクトを作成する
Bitmap canvas = new Bitmap(PictureBox1.Width, PictureBox1.Height);
//ImageオブジェクトのGraphicsオブジェクトを作成する
Graphics g = Graphics.FromImage(canvas);

//直線で接続する点の配列を作成
Point[] ps = {
                 new Point(0, 0),
                 new Point(150, 50),
                 new Point(80, 100),
                 new Point(100, 150)
             };
//折れ線を引く
g.DrawLines(Pens.Black, ps);

//リソースを解放する
g.Dispose();
//PictureBox1に表示する
PictureBox1.Image = canvas;

閉じた折れ線を描く

閉じた折れ線を描くには、DrawPolygonメソッドを使用します。上記の例の"DrawLines"を"DrawPolygon"に変更すれば、終点(100, 150)と始点(0, 0)が結ばれて描画されるようになります。

その他の線

ここで説明していない線の引き方は、「曲線を描く」、「破線を描く」、「矢印を描く」などで紹介しています。

  • 履歴:
  • 2012/8/3 表示する方法を、PictureBox.Imageプロパティを使った方法に変更。

注意:この記事では、基本的な事柄の説明が省略されているかもしれません。初心者の方は、特に以下の点にご注意ください。

  • このサイトで紹介されているコードの多くは、例外処理が省略されています。例外処理については、こちらをご覧ください。
  • コードの先頭に記述されている「Imports ??? がソースファイルの一番上に書かれているものとする」(C#では、「using ???; がソースファイルの一番上に書かれているものとする」)の意味が分からないという方は、こちらをご覧ください。
  • .NET Tipsをご利用いただく際は、注意事項をお守りください。