ヘッダー
C# サンプル集
 

Visual Basic 中学校 > C# サンプル集 > C# サンプル集目次 > Windowsフォーム >

三角形を描画する

2020/12/6

→ Visual Basic のサンプルに切り替える

目次

 

このページで紹介するサンプルは Windowsフォームアプリケーションを前提にしています。

サンプルの pictureBox1_Paint は PictureBox の Paint イベントの発生時に呼び出される前提です。そうなるようにするにはたとえば、プロパティーウィンドウでPaintイベントをダブルクリックします。

描画するタイミングについては下記にサンプルを参照してください。

ボタンをクリックしたら図形を描画する

マウス操作で図形を描画する

 

 

PictureBoxに赤い三角形を描画する

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    //三角形の頂点の座標
    Point p1 = new Point(100, 0);
    Point p2 = new Point(200, 173);
    Point p3 = new Point(0, 173);

    //頂点を結んでできるパス(≒図形)を定義
    var triangle = new System.Drawing.Drawing2D.GraphicsPath();
    triangle.AddPolygon(new Point[] {p1, p2, p3});

    //パスを描画
    e.Graphics.DrawPath(Pens.Red, triangle);
}

実行結果

三角形

 

 

Formに青い三角形を描画する

private void Form1_Paint(object sender, PaintEventArgs e)
{
    //三角形の頂点の座標
    Point p1 = new Point(100, 0);
    Point p2 = new Point(200, 173);
    Point p3 = new Point(0, 173);

    //頂点を結んでできるパス(≒図形)を定義
    var triangle = new System.Drawing.Drawing2D.GraphicsPath();
    triangle.AddPolygon(new Point[] {p1, p2, p3});

    //パスを描画
    e.Graphics.DrawPath(Pens.Blue, triangle);
}

 

 

黒い枠線に黄色く塗りつぶした三角形

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    //三角形の頂点の座標
    Point p1 = new Point(100, 0);
    Point p2 = new Point(200, 173);
    Point p3 = new Point(0, 173);

    //頂点を結んでできるパス(≒図形)を定義
    var triangle = new System.Drawing.Drawing2D.GraphicsPath();
    triangle.AddPolygon(new Point[] {p1, p2, p3});

    //パスを描画
    e.Graphics.FillPath(Brushes.Yellow, triangle);
    e.Graphics.DrawPath(Pens.Black, triangle);
}

実行結果

黒枠に黄色の三角形

 

 

太い黒い枠線に黄色く塗りつぶした三角形

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    //三角形の頂点の座標
    Point p1 = new Point(110, 10);
    Point p2 = new Point(210, 183);
    Point p3 = new Point(10, 183);

    //頂点を結んでできるパス(≒図形)を定義
    var triangle = new System.Drawing.Drawing2D.GraphicsPath();
    triangle.AddPolygon(new Point[] {p1, p2, p3});

    //パスを描画
    var pen = new Pen(Color.Black, 8); //太さ8の黒いペン
    e.Graphics.FillPath(Brushes.Yellow, triangle);
    e.Graphics.DrawPath(pen, triangle);
}

実行結果

太い枠線の三角形

 

 

カスタムな色の枠線と塗りつぶし

赤・ 緑・ 青を合成した色で三角形を描画します。赤・緑・青の各色は0～255の範囲で指定できます。

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    //三角形の頂点の座標
    Point p1 = new Point(110, 10);
    Point p2 = new Point(210, 183);
    Point p3 = new Point(10, 183);

    //頂点を結んでできるパス(≒図形)を定義
    var triangle = new System.Drawing.Drawing2D.GraphicsPath();
    triangle.AddPolygon(new Point[] {p1, p2, p3});

    //▼塗りつぶし
    var fillColor = Color.FromArgb(42, 210, 240); //赤42,緑210,青240 の合成色
    var brush = new SolidBrush(fillColor); //カスタムな色の単色ブラシ
    e.Graphics.FillPath(brush, triangle);

    //▼枠線
    var borderColor = Color.FromArgb(200, 210, 20); //赤200,緑210,青20 の合成色
    var pen = new Pen(borderColor, 8); //太さ8のカスタムな色のペン
    e.Graphics.DrawPath(pen, triangle);
}

実行結果

カスタムな色の三角形

 

 

線形のグラデーションで塗りつぶされた三角形

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    //三角形の頂点の座標
    Point p1 = new Point(110, 10);
    Point p2 = new Point(210, 183);
    Point p3 = new Point(10, 183);

    //頂点を結んでできるパス(≒図形)を定義
    var triangle = new System.Drawing.Drawing2D.GraphicsPath();
    triangle.AddPolygon(new Point[] {p1, p2, p3});

    //頂点1(p1)を青、頂点2(p2)を赤として、徐々に変化する色で塗りつぶすブラシを作成
    var gradientBrush = new System.Drawing.Drawing2D.LinearGradientBrush(p1,
                                                           p2,
                                                           Color.Blue, Color.Red);

    //塗りつぶした三角形を描画
    e.Graphics.FillPath(gradientBrush, triangle);
}

実行結果

 

 

放射状(円形)のグラデーションで塗りつぶされた三角形

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    //●１．三角形の定義

    //▼１－１．三角形の頂点の座標
    Point p1 = new Point(110, 10);
    Point p2 = new Point(210, 183);
    Point p3 = new Point(10, 183);

    //▼１－２．頂点を結んでできるパス(≒図形)を定義
    var triangle = new System.Drawing.Drawing2D.GraphicsPath();
    triangle.AddPolygon(new Point[] {p1, p2, p3});

    //●２．グラデーションの定義

    //外接円の範囲に放射状のグラデーションを定義します。
    //そのためには外接円の中心の座標と半径を求める必要があります。

    //▼２－１．外接円の中心の座標
    Point center = new Point(
          (int)((p1.X + p2.X + p3.X) / 3),
          (int)((p1.Y + p2.Y + p3.Y) / 3));

    //▼２－２．外接円の半径

    //まず、三角形の各辺の長さを求めます。(ピタゴラスの定理を使用します。)
    double L12 = Math.Sqrt(Math.Pow(p1.X - p2.X, 2) + Math.Pow(p1.Y - p2.Y, 2));
    double L23 = Math.Sqrt(Math.Pow(p2.X - p3.X, 2) + Math.Pow(p2.Y - p3.Y, 2));
    double L31 = Math.Sqrt(Math.Pow(p3.X - p1.X, 2) + Math.Pow(p3.Y - p1.Y, 2));

    //次に三角形の面積を求めます。(ヘロンの公式を使用します。)
    double heronNumber = (L12 + L23 + L31) / 2;
    double s = Math.Sqrt(heronNumber * (heronNumber - L12) * (heronNumber - L23) * (heronNumber - L31));

    //最後に外接円の半径を求めます。
    double r = (L12 * L23 * L31) / (4 * s);

    //▼２－３．ブラシの定義
    var path = new System.Drawing.Drawing2D.GraphicsPath();
    path.AddEllipse(new Rectangle(center.X - (int)r, center.Y - (int)r, (int)(r * 2), (int)(r * 2)));

    //中央を青、周辺を赤として、徐々に変化する色で塗りつぶすブラシを作成
    var gradientBrush = new System.Drawing.Drawing2D.PathGradientBrush(path);
    gradientBrush.CenterColor = Color.Blue;
    gradientBrush.SurroundColors = new Color[] {Color.Red};

    //●３．塗りつぶした三角形を描画
    e.Graphics.FillPath(gradientBrush, triangle);

}

メモ：どうもグラデーションの中心と三角形の中心が一致しないようです。原因はわかりません。ごめんなさい。

実行結果

放射状のグラデーション

 

 

模様で塗りつぶされた三角形

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    //三角形の頂点の座標
    Point p1 = new Point(110, 10);
    Point p2 = new Point(210, 183);
    Point p3 = new Point(10, 183);

    //頂点を結んでできるパス(≒図形)を定義
    var triangle = new System.Drawing.Drawing2D.GraphicsPath();
    triangle.AddPolygon(new Point[] {p1, p2, p3});

    //紙ふぶきのような模様のブラシを作成
    var hatchBrush = new System.Drawing.Drawing2D.HatchBrush(System.Drawing.Drawing2D.HatchStyle.LargeConfetti, Color.Yellow);

    //塗りつぶした三角形を描画
    e.Graphics.FillPath(hatchBrush, triangle);
}

メモ：模様は50種類程度用意されています。LargeConfettiの部分を他の値に変えることで模様を変えられます。

メモ：HatchBrushのBackgroundColorプロパティで背景色も指定できます。この例では省略しており省略すると黒です。

実行結果

紙ふぶき模様の塗りつぶし

 

 

画像のテクスチャーで塗りつぶされた三角形

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    //三角形の頂点の座標
    Point p1 = new Point(110, 10);
    Point p2 = new Point(210, 183);
    Point p3 = new Point(10, 183);

    //頂点を結んでできるパス(≒図形)を定義
    var triangle = new System.Drawing.Drawing2D.GraphicsPath();
    triangle.AddPolygon(new Point[] {p1, p2, p3});

    //テクスチャーブラシ作成
    var textureBrush = new TextureBrush(Image.FromFile(@"C:\temp\renga.png"));

    //renga.pngを敷き詰めた三角形を描画
    e.Graphics.FillPath(textureBrush, triangle);
}

実行結果

テクスチャーでの塗りつぶし

実行結果は元となる画像によって異なります。この例では使っている renga.png は下記画像です。

テクスチャーの元にした画像

 

 

二重線の三角形

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    //三角形の頂点の座標
    Point p1 = new Point(110, 10);
    Point p2 = new Point(210, 183);
    Point p3 = new Point(10, 183);

    //頂点を結んでできるパス(≒図形)を定義
    var triangle = new System.Drawing.Drawing2D.GraphicsPath();
    triangle.AddPolygon(new Point[] {p1, p2, p3});

    //パスを描画
    var pen = new Pen(Color.Red, 8); //太さ8の赤いペン

    //線の区切りを定義する。各区間は順に描画区間、空白区間、描画区間、空白区間･･･となる。
    //この例では第１区間(描画)は0～33%, 第２区間(空白)は33～66%、第３区間(描画)は66%～100%となる。
    //結果として中央に空白のある二重線となる。
    pen.CompoundArray = new float[] {0f, 0.33f, 0.67f, 1.0f};

    e.Graphics.DrawPath(pen, triangle);
}

実行結果

二重線の三角形

 

 

三重線の三角形

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    //三角形の頂点の座標
    Point p1 = new Point(110, 10);
    Point p2 = new Point(210, 183);
    Point p3 = new Point(10, 183);

    //頂点を結んでできるパス(≒図形)を定義
    var triangle = new System.Drawing.Drawing2D.GraphicsPath();
    triangle.AddPolygon(new Point[] {p1, p2, p3});

    //パスを描画
    var pen = new Pen(Color.Red, 8); //太さ8の赤いペン

    //線の区切りを定義する。各区間は順に描画区間、空白区間、描画区間、空白区間･･･となる。
    //この例では第１区間(描画)は0～20%, 第２区間(空白)は20～40%、第３区間(描画)は40%～60%･･･となる。
    //結果として描画区間が３つある三重線になる。
    pen.CompoundArray = new float[] {0f, 0.2f, 0.4f, 0.6f, 0.8f, 1f};

    e.Graphics.DrawPath(pen, triangle);
}

実行結果

三重線の三角形