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

■コンテンツ

■ブックマーク

■Translate

■その他

■広告

DOBON.NET > プログラミング道 > .NET Tips > 画像、印刷

曲線を描く

補足：画像の表示方法が分からない、描画した絵が消えて困るなどという方は、まず「画像ファイルを表示する」をご覧ください。また、Penオブジェクトについては、「線を描く」をご覧ください。

補足：円や楕円、または円弧を描画する方法はこちらをご覧ください。

カーディナルスプラインの描画

まずはGraphics.DrawCurveメソッドを使ってカーディナルスプラインを描画しましょう。指定した点を通る滑らかな曲線を描画することが出来ます。｢滑らかさ｣はテンションとして指定でき、通常0～1の値で指定します。デフォルトは0.5です。下記の例でDrawCurveメソッドの引数の使い方を確かめてください。

[VB.NET]
'Imports System.Drawing
'Imports System.Drawing.Drawing2D
'がソースファイルの一番上に書かれているものとする

'Graphicsオブジェクトの作成
Dim g As Graphics = PictureBox1.CreateGraphics()

'曲線が通過する点
'4つ以上の点が必要
Dim point1 As New Point(30, 20)
Dim point2 As New Point(60, 150)
Dim point3 As New Point(120, 30)
Dim point4 As New Point(200, 140)
Dim point5 As New Point(220, 100)
Dim point6 As New Point(190, 60)
Dim curvePoints As Point() = _
    {point1, point2, point3, point4, point5, point6}

'Penオブジェクトの作成(幅3の青色)
Dim bluePen As New Pen(Color.Blue, 3)
'カーディナルスプラインを描画
'テンションを0.5とする（指定しないと、0.5）
g.DrawCurve(bluePen, curvePoints, 0.5F)

'Penオブジェクトの作成(幅3の赤色)
Dim redPen As New Pen(Color.Red, 3)
'カーディナルスプラインを描画
g.DrawCurve(redPen, curvePoints, 1)

'Penオブジェクトの作成(幅3の緑色)
Dim greenPen As New Pen(Color.Green, 3)
'カーディナルスプラインを描画
'テンションを0とする（直線となる）
g.DrawCurve(greenPen, curvePoints, 0)

'Penオブジェクトの作成(幅1の黄色)
Dim yellowPen As New Pen(Color.Yellow, 1)
'カーディナルスプラインを描画
'1番目の点から5番目の点までを通過するようにする
g.DrawCurve(yellowPen, curvePoints, 1, 3, 0.5F)

'Penオブジェクトの作成(幅1の黒色)
Dim blackPen As New Pen(Color.Black, 1)
'閉じたカーディナルスプラインを描画
g.DrawClosedCurve(blackPen, curvePoints, 1, FillMode.Alternate)

'リソースを開放する
bluePen.Dispose()
redPen.Dispose()
greenPen.Dispose()
yellowPen.Dispose()
blackPen.Dispose()
g.Dispose()

[C#]
//using System.Drawing;
//using System.Drawing.Drawing2D;
//がソースファイルの一番上に書かれているものとする

//Graphicsオブジェクトの作成
Graphics g = PictureBox1.CreateGraphics();

//曲線が通過する点
//4つ以上の点が必要
Point point1 = new Point(30, 20);
Point point2 = new Point(60, 150);
Point point3 = new Point(120, 30);
Point point4 = new Point(200, 140);
Point point5 = new Point(220, 100);
Point point6 = new Point(190, 60);
Point[] curvePoints = {point1, point2, point3, point4, point5, point6};

//Penオブジェクトの作成(幅3の青色)
Pen bluePen = new Pen(Color.Blue, 3);
//カーディナルスプラインを描画
//テンションを0.5とする（指定しないと、0.5）
g.DrawCurve(bluePen, curvePoints, 0.5F);

//Penオブジェクトの作成(幅3の赤色)
Pen redPen   = new Pen(Color.Red, 3);
//カーディナルスプラインを描画
g.DrawCurve(redPen, curvePoints, 1);

//Penオブジェクトの作成(幅3の緑色)
Pen greenPen = new Pen(Color.Green, 3);
//カーディナルスプラインを描画
//テンションを0とする（直線となる）
g.DrawCurve(greenPen, curvePoints, 0);

//Penオブジェクトの作成(幅1の黄色)
Pen yellowPen = new Pen(Color.Yellow, 1);
//カーディナルスプラインを描画
//1番目の点から5番目の点までを通過するようにする
g.DrawCurve(yellowPen, curvePoints, 1, 3, 0.5F);

//Penオブジェクトの作成(幅1の黒色)
Pen blackPen   = new Pen(Color.Black, 1);
//閉じたカーディナルスプラインを描画
g.DrawClosedCurve(blackPen, curvePoints, 1, FillMode.Alternate);

//リソースを開放する
bluePen.Dispose();
redPen.Dispose();
greenPen.Dispose();
yellowPen.Dispose();
blackPen.Dispose();
g.Dispose();

ベジエ曲線の描画

ベジエ曲線（ベジエスプライン）を描くには、DrawBezierメソッドを使います。DrawBezierメソッドでは4つの点を指定しますが、これら4つの点はベジエスプラインの形を決める2本の線と方向を示します。次の例によりご確認ください。

[VB.NET]
'Imports System.Drawing
'Imports System.Drawing.Drawing2D
'がソースファイルの一番上に書かれているものとする

'Graphicsオブジェクトの作成
Dim g As Graphics = PictureBox1.CreateGraphics()

'ベジエ曲線の形状を決定する4つの点
Dim point1 As New Point(30, 20)
Dim point2 As New Point(120, 40)
Dim point3 As New Point(60, 120)
Dim point4 As New Point(150, 100)

'Penオブジェクトの作成(幅1の黒色)
Dim blackPen As New Pen(Color.Black, 1)
'ベジエ曲線に接する二本の直線を引く
g.DrawLine(blackPen, point1, point2)
g.DrawLine(blackPen, point3, point4)

'Penオブジェクトの作成(幅1の青色)
Dim bluePen As New Pen(Color.Blue, 1)
'ベジエスプラインを描画
g.DrawBezier(bluePen, point1, point2, point3, point4)

'リソースを開放する
bluePen.Dispose()
blackPen.Dispose()
g.Dispose()

[C#]
//using System.Drawing;
//using System.Drawing.Drawing2D;
//がソースファイルの一番上に書かれているものとする

//Graphicsオブジェクトの作成
Graphics g = PictureBox1.CreateGraphics();

//ベジエ曲線の形状を決定する4つの点
Point point1 = new Point(30, 20);
Point point2 = new Point(120, 40);
Point point3 = new Point(60, 120);
Point point4 = new Point(150, 100);

//Penオブジェクトの作成(幅1の黒色)
Pen blackPen   = new Pen(Color.Black, 1);
//ベジエ曲線に接する二本の直線を引く
g.DrawLine(blackPen, point1, point2);
g.DrawLine(blackPen, point3, point4);

//Penオブジェクトの作成(幅1の青色)
Pen bluePen = new Pen(Color.Blue, 1);
//ベジエスプラインを描画
g.DrawBezier(bluePen, point1, point2, point3, point4);

//リソースを開放する
bluePen.Dispose();
blackPen.Dispose();
g.Dispose();

複数のベジエ曲線の描画

連続した複数のベジエ曲線を描画する方法として、DrawBeziersメソッドがあります。次のその例を示します。

[VB.NET]
'Imports System.Drawing
'Imports System.Drawing.Drawing2D
'がソースファイルの一番上に書かれているものとする

'Graphicsオブジェクトの作成
Dim g As Graphics = PictureBox1.CreateGraphics()

'ベジエ曲線の形状を決定する点
Dim start As New Point(10, 70)
Dim control1 As New Point(50, 10)
Dim control2 As New Point(80, 30)
Dim end1 As New Point(130, 60)
Dim control3 As New Point(190, 70)
Dim control4 As New Point(200, 120)
Dim end2 As New Point(170, 160)
Dim bezierPoints As Point() = _
    {start, control1, control2, end1, control3, control4, end2}

'Penオブジェクトの作成(幅1の黒色)
Dim blackPen As New Pen(Color.Black, 1)
'矢印をつける
blackPen.EndCap = LineCap.ArrowAnchor
g.DrawLine(blackPen, start, control1)
g.DrawLine(blackPen, control2, end1)
g.DrawLine(blackPen, end1, control3)
g.DrawLine(blackPen, control4, end2)

' Draw arc to screen.
Dim bluePen As New Pen(Color.Blue, 1)
g.DrawBeziers(bluePen, bezierPoints)

'リソースを開放する
blackPen.Dispose()
bluePen.Dispose()
g.Dispose()

[C#]
//using System.Drawing;
//using System.Drawing.Drawing2D;
//がソースファイルの一番上に書かれているものとする

//Graphicsオブジェクトの作成
Graphics g = PictureBox1.CreateGraphics();

//ベジエ曲線の形状を決定する点
Point start = new Point(10, 70);
Point control1 = new Point(50, 10);
Point control2 = new Point(80, 30);
Point end1 = new Point(130, 60);
Point control3 = new Point(190, 70);
Point control4 = new Point(200, 120);
Point end2 = new Point(170, 160);
Point[] bezierPoints = {
    start, control1, control2, end1,
    control3, control4, end2};

//Penオブジェクトの作成(幅1の黒色)
Pen blackPen = new Pen(Color.Black, 1);
//矢印をつける
blackPen.EndCap = LineCap.ArrowAnchor;
g.DrawLine(blackPen, start, control1);
g.DrawLine(blackPen, control2, end1);
g.DrawLine(blackPen, end1, control3);
g.DrawLine(blackPen, control4, end2);

// Draw arc to screen.
Pen bluePen   = new Pen(Color.Blue, 1);
g.DrawBeziers(bluePen, bezierPoints);

//リソースを開放する
blackPen.Dispose();
bluePen.Dispose();
g.Dispose();

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

このサイトで紹介されているコードの多くは、例外処理が省略されています。例外処理については、こちらをご覧ください。
コードの先頭に記述されている「Imports ??? がソースファイルの一番上に書かれているものとする」（C#では、「using ???; がソースファイルの一番上に書かれているものとする」）の意味が分からないという方は、こちらをご覧ください。

この記事への評価

この記事の評価はこちらでご覧いただけます。各Tipsの評価一覧はこちらです。

この記事へのコメント

この記事へのコメントの一覧はこちらでご覧いただけます。

この記事に関するコメントを投稿するには、下のボタンをクリックしてください。投稿フォームが表示されます。通常のご質問、ご意見等は掲示板へご投稿ください。

この記事へのトラックバック

この記事へのトラックバックの一覧はこちらでご覧いただけます。

この記事のトラックバック Ping URL (注意事項) :
http://dobon.net/cgi-bin/pc/tb.php/graphics/drawcurve.html