ヘッダー
Visual Basic サンプル集
VB2005対応 VB2008対応 VB2010対応 VB2012対応 VB2013対応 VB2015対応 VB2017対応 VB2019対応

円を描画する

2020/12/6

→ C# のサンプルに切り替える

 

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

 

PictureBoxに赤い円を描画する

VB.NET2002対応 VB.NET2003対応 VB2005対応 VB2008対応 VB2010対応 VB2012対応 VB2013対応 VB2015対応 VB2017対応 VB2019対応

Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint

    e.Graphics.DrawEllipse(Pens.Red, 10, 20, 200, 150)

End Sub

実行結果

円

 

 

Formに青い円を描画する

VB.NET2002対応 VB.NET2003対応 VB2005対応 VB2008対応 VB2010対応 VB2012対応 VB2013対応 VB2015対応 VB2017対応 VB2019対応

Private Sub Form1_Paint(sender As Object, e As PaintEventArgs) Handles MyBase.Paint

    e.Graphics.DrawEllipse(Pens.Blue, 10, 20, 200, 150)

End Sub

 

 

黒い枠線に黄色く塗りつぶした円

VB.NET2002対応 VB.NET2003対応 VB2005対応 VB2008対応 VB2010対応 VB2012対応 VB2013対応 VB2015対応 VB2017対応 VB2019対応

Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint

    e.Graphics.FillEllipse(Brushes.Yellow, 10, 20, 200, 150)
    e.Graphics.DrawEllipse(Pens.Black, 10, 20, 200, 150)

End Sub

実行結果

黒枠に黄色の円

 

 

太い黒い枠線に黄色く塗りつぶした円

VB.NET2002対応 VB.NET2003対応 VB2005対応 VB2008対応 VB2010対応 VB2012対応 VB2013対応 VB2015対応 VB2017対応 VB2019対応

Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint

    Dim pen As New Pen(Color.Black, 8) '太さ8の黒いペン
    e.Graphics.FillEllipse(Brushes.Yellow, 10, 20, 200, 150)
    e.Graphics.DrawEllipse(pen, 10, 20, 200, 150)

End Sub

実行結果

太い枠線の円

 

 

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

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

VB.NET2002対応 VB.NET2003対応 VB2005対応 VB2008対応 VB2010対応 VB2012対応 VB2013対応 VB2015対応 VB2017対応 VB2019対応

Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint
    '▼塗りつぶし
    Dim fillColor As Color = Color.FromArgb(42, 210, 240) '赤42,緑210,青240 の合成色
    Dim brush As New SolidBrush(fillColor) 'カスタムな色の単色ブラシ
    e.Graphics.FillEllipse(brush, 10, 20, 200, 150)

    '▼枠線
    Dim borderColor As Color = Color.FromArgb(200, 210, 20) '赤200,緑210,青20 の合成色
    Dim pen As New Pen(borderColor, 8) '太さ8のカスタムな色のペン
    e.Graphics.DrawEllipse(pen, 10, 20, 200, 150)
End Sub

実行結果

カスタムな色の円

 

 

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

VB2010対応 VB2012対応 VB2013対応 VB2015対応 VB2017対応 VB2019対応

Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint

    Dim rectLeft As Integer = 20
    Dim rectTop As Integer = 10
    Dim rectWidth As Integer = 200
    Dim rectHeight As Integer = 150

    '点(20, 10)を青、点(220, 160)を赤として、徐々に変化する色で塗りつぶすブラシを作成
    Dim gradientBrush As New Drawing2D.LinearGradientBrush(New Point(rectLeft, rectTop),
                                                           New Point(rectLeft + rectWidth, rectTop + rectHeight),
                                                           Color.Blue, Color.Red)

    '塗りつぶした円を描画(第3引数・第4引数は幅と高さである点に注意)
    e.Graphics.FillEllipse(gradientBrush, rectLeft, rectTop, rectWidth, rectHeight)

End Sub

メモ:Dim gradientBrush As ... の行を改行せずに1行で書くか、改行記号(半角スペースと_)で改行すればVB2008以前でもこの例が使用できます。

実行結果

線形グラデーション

 

 

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

VB.NET2002対応 VB.NET2003対応 VB2005対応 VB2008対応 VB2010対応 VB2012対応 VB2013対応 VB2015対応 VB2017対応 VB2019対応

Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint

    '▼外接四角形の位置とサイズ
    Dim rectLeft As Integer = 20
    Dim rectTop As Integer = 10
    Dim rectWidth As Integer = 200
    Dim rectHeight As Integer = 150

    '▼ブラシ作成
    'グラデーションの範囲を定義
    Dim path As New Drawing2D.GraphicsPath()
    path.AddEllipse(New Rectangle(rectLeft, rectTop, rectWidth, rectHeight))

    '中央を青、周辺を赤として、徐々に変化する色で塗りつぶすブラシを作成
    Dim gradientBrush As New Drawing2D.PathGradientBrush(path)
    gradientBrush.CenterColor = Color.Blue
    gradientBrush.SurroundColors = {Color.Red}

    '▼描画実行
    '塗りつぶした円を描画
    e.Graphics.FillEllipse(gradientBrush, rectLeft, rectTop, rectWidth, rectHeight)

End Sub

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

実行結果

放射状のグラデーション

 

 

模様で塗りつぶされた円

VB.NET2002対応 VB.NET2003対応 VB2005対応 VB2008対応 VB2010対応 VB2012対応 VB2013対応 VB2015対応 VB2017対応 VB2019対応

Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint

    '▼外接四角形の位置とサイズ
    Dim rectLeft As Integer = 20
    Dim rectTop As Integer = 10
    Dim rectWidth As Integer = 200
    Dim rectHeight As Integer = 150

    '紙ふぶきのような模様のブラシを作成
    Dim hatchBrush As New Drawing2D.HatchBrush(Drawing2D.HatchStyle.LargeConfetti, Color.Yellow)

    '塗りつぶした円を描画
    e.Graphics.FillEllipse(hatchBrush, rectLeft, rectTop, rectWidth, rectHeight)

End Sub

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

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

実行結果

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

 

 

4倍に拡大された模様で塗りつぶされた円

VB.NET2002対応 VB.NET2003対応 VB2005対応 VB2008対応 VB2010対応 VB2012対応 VB2013対応 VB2015対応 VB2017対応 VB2019対応

Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint

    '▼外接四角形の位置とサイズ
    Dim rectLeft As Integer = 20
    Dim rectTop As Integer = 10
    Dim rectWidth As Integer = 200
    Dim rectHeight As Integer = 150

    Using image As New Bitmap(rectLeft + rectWidth, rectTop + rectHeight)

        '紙ふぶきのような模様のブラシを作成
        Dim hatchBrush As New Drawing2D.HatchBrush(Drawing2D.HatchStyle.LargeConfetti, Color.Yellow)

        '塗りつぶした1/4の大きさの円をimageに描画
        Using g As Graphics = Graphics.FromImage(image)
            g.FillEllipse(hatchBrush, rectLeft, rectTop, rectWidth \ 4, rectHeight \ 4)
        End Using

        'image内に描画された1/4の大きさの円を元の円の大きさに拡大して描画
        e.Graphics.InterpolationMode = Drawing2D.InterpolationMode.NearestNeighbor '拡大時に増えた部分は隣のドットと同じにする
        e.Graphics.DrawImage(image,
                             New Rectangle(rectLeft, rectTop, rectWidth, rectHeight),
                             New Rectangle(rectLeft, rectTop, rectWidth \ 4, rectHeight \ 4),
                             GraphicsUnit.Pixel)
    End Using

End Sub

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

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

実行結果

紙ふぶきを4倍に拡大して塗りつぶし

 

 

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

VB.NET2002対応 VB.NET2003対応 VB2005対応 VB2008対応 VB2010対応 VB2012対応 VB2013対応 VB2015対応 VB2017対応 VB2019対応

Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint

    'テクスチャーブラシ作成
    Dim textureBrush As New TextureBrush(Image.FromFile("C:\temp\renga.png"))

    'renga.pngを敷き詰めた円を描画
    e.Graphics.FillEllipse(textureBrush, 20, 10, 200, 150)

End Sub

実行結果

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

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

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

 

 

二重線の円

VB.NET2002対応 VB.NET2003対応 VB2005対応 VB2008対応 VB2010対応 VB2012対応 VB2013対応 VB2015対応 VB2017対応 VB2019対応

Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint

    Dim pen As New Pen(Color.Red, 8) '太さ8の赤いペン

    '線の区切りを定義する。各区間は順に描画区間、空白区間、描画区間、空白区間・・・となる。
    'この例では第1区間(描画)は0~33%, 第2区間(空白)は33~66%、第3区間(描画)は66%~100%となる。
    '結果として中央に空白のある二重線となる。
    pen.CompoundArray = {0, 0.33, 0.67, 1.0}

    e.Graphics.DrawEllipse(pen, 20, 10, 200, 150)

End Sub

実行結果

二重線の円

 

 

三重線の円

VB.NET2002対応 VB.NET2003対応 VB2005対応 VB2008対応 VB2010対応 VB2012対応 VB2013対応 VB2015対応 VB2017対応 VB2019対応

Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint

    Dim pen As New Pen(Color.Red, 8) '太さ8の赤いペン

    '線の区切りを定義する。各区間は順に描画区間、空白区間、描画区間、空白区間・・・となる。
    'この例では第1区間(描画)は0~20%, 第2区間(空白)は20~40%、第3区間(描画)は40%~60%・・・となる。
    '結果として描画区間が3つある三重線になる。
    pen.CompoundArray = {0, 0.2, 0.4, 0.6, 0.8, 1}

    e.Graphics.DrawEllipse(pen, 20, 10, 200, 150)

End Sub

実行結果

三重線の円

 


VB6対応 VB6では Circle を使用します。高度なグラフィックスはDirectXやGDIなど外部の機能を呼び出して実現します。