How to draw a linear gradient circle in .NET?

Question

Haw can I draw a circle like this in VB.NET or in C#?

It would be awesome if you could share a [mcve] of your progress so far. — mjwills, Jan 17 '20 at 12:14
The simplest solution is likely to screenshot the image, save it to a bitmap and then add that bitmap to your form. — mjwills, Jan 17 '20 at 12:14
Where do you want to "draw" this? On a form? Into a bitmap? In OpenGL? By sending position and colors to a network of drones to draw it in the sky? — Longoon12000, Jan 17 '20 at 12:15
decide for one of the languages, make a loop from zero to 2π, compute x coordinate as radius * cos(angle) and y coordinate as radius * sin(angle). create a suitably thick solidcolor brush and assign the color using some Color.FromArgb(...) where the arguments are a function of the angle. — Cee McSharpface, Jan 17 '20 at 12:52
@CeeMcSharpface I don't think you get there with RGB colors, have to use the Hue from the HSV color space. HSV-to-RGB-translation is not trivial, but is of course also googleable. — KekuSemau, Jan 17 '20 at 13:04
yeah [whatever floats your boat](https://stackoverflow.com/a/6930407/1132334) — Cee McSharpface, Jan 17 '20 at 13:05
Try filling a GraphicsPath with a [PathGradientBrush](https://learn.microsoft.com/en-us/dotnet/api/system.drawing.drawing2d.pathgradientbrush?view=netframework-4.8) - [Example](https://stackoverflow.com/questions/33415696/n-point-gradient-brush-polygon-fill/33424456#33424456) — TaW, Jan 17 '20 at 14:56

Andrew Morton · Answer 1 · 2020-01-19T19:23:07.540

You can approximate the ring with lots of trapezoids, and use a different fill colour for each rectangle.

Imports System.Drawing.Drawing2D

Public Class Form1

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

        Dim centre = New PointF(160, 140)
        Dim r1 = 100
        Dim r2 = 105

        Dim colourStart = 90 * Math.PI / 180

        Dim col1 As Color
        col1 = Color.FromArgb(0, 0, 0)

        e.Graphics.SmoothingMode = SmoothingMode.AntiAlias

        Using br As New SolidBrush(col1)

            Dim nSteps = 180
            Dim aInc = 2 * Math.PI / nSteps

            For i = 0 To nSteps - 1
                Dim a = i * aInc

                Dim t1 = a
                Dim t2 = a + aInc

                Dim p1 = New PointF(CSng(r2 * Math.Cos(t1)) + centre.X, CSng(r2 * Math.Sin(t1)) + centre.Y)
                Dim p2 = New PointF(CSng(r1 * Math.Cos(t1)) + centre.X, CSng(r1 * Math.Sin(t1)) + centre.Y)
                Dim p3 = New PointF(CSng(r1 * Math.Cos(t2)) + centre.X, CSng(r1 * Math.Sin(t2)) + centre.Y)
                Dim p4 = New PointF(CSng(r2 * Math.Cos(t2)) + centre.X, CSng(r2 * Math.Sin(t2)) + centre.Y)

                Dim pts = {p1, p2, p3, p4}

                col1 = HSL2RGB(a + colourStart, 1, 0.5)
                br.Color = col1

                e.Graphics.FillPolygon(br, pts)

            Next

        End Using

    End Sub

    ' HSL2RGB from https://dotnetfiddle.net/aORkec (with translation and bugfix).
    ''' <summary>
    ''' Convert HSL to RGB.
    ''' </summary>
    ''' <param name="h">Hue 0..2pi</param>
    ''' <param name="s">Saturation 0..1</param>
    ''' <param name="l">Lightness 0..1</param>
    ''' <returns>RGB color.</returns>
    <DebuggerHidden>
    Function HSL2RGB(h As Double, s As Double, l As Double) As Color
        If h > 2 * Math.PI Then h -= 2 * Math.PI
        If h < 0 Then h += 2 * Math.PI

        h = h / (2 * Math.PI)
        Dim v As Double

        Dim r, g, b As Double
        r = l
        g = l
        b = l
        v = If(l <= 0.5, l * (1.0 + s), l + s - l * s)

        If (v > 0) Then
            Dim m As Double
            Dim sv As Double
            Dim sextant As Integer
            Dim fract, vsf, mid1, mid2 As Double
            m = l + l - v
            sv = (v - m) / v
            h *= 6.0
            sextant = CInt(Math.Floor(h))
            fract = h - sextant
            vsf = v * sv * fract
            mid1 = m + vsf
            mid2 = v - vsf
            Select Case sextant
                Case 0, 6
                    r = v
                    g = mid1
                    b = m
                Case 1
                    r = mid2
                    g = v
                    b = m
                Case 2
                    r = m
                    g = v
                    b = mid1
                Case 3
                    r = m
                    g = mid2
                    b = v
                Case 4
                    r = mid1
                    g = m
                    b = v
                Case 5
                    r = v
                    g = m
                    b = mid2
            End Select
        End If

        Return Color.FromArgb(Convert.ToByte(r * 255.0F), Convert.ToByte(g * 255.0F), Convert.ToByte(b * 255.0F))

    End Function

End Class

Result:

Better results could probably be achieved by using a Brush which allows a colour gradient in the correct direction for each rectangle.

It is also possible to make the circle from annular sectors, which gives accurate bounds instead of the straight edges of trapezoids:

    Function Rad2Deg(x As Double) As Single
        Return Convert.ToSingle(x * 180 / Math.PI)
    End Function

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

        Dim centreF = New PointF(160, 140)
        Dim centre = New Point(CInt(centreF.X), CInt(centreF.Y))
        Dim r1 = 100
        Dim r2 = 105

        Dim boundingRectInner = New Rectangle(-r1, -r1, r1 * 2, r1 * 2)
        boundingRectInner.Offset(centre)

        Dim boundingrectOuter = New Rectangle(-r2, -r2, r2 * 2, r2 * 2)
        boundingrectOuter.Offset(centre)

        Dim colourStart = 90 * Math.PI / 180

        Dim col1 As Color
        col1 = Color.FromArgb(0, 0, 0)

        e.Graphics.SmoothingMode = SmoothingMode.AntiAlias

        Using br As New SolidBrush(col1)

            Dim nSteps = 12
            Dim aInc = 2 * Math.PI / nSteps
            Dim sweepAngle = Rad2Deg(aInc)

            For i = 0 To nSteps - 1
                Dim a = i * aInc

                Dim t1 = a
                Dim t2 = a + aInc

                Dim p3 = New PointF(CSng(r1 * Math.Cos(t2)) + centreF.X, CSng(r1 * Math.Sin(t2)) + centreF.Y)
                Dim p4 = New PointF(CSng(r2 * Math.Cos(t2)) + centreF.X, CSng(r2 * Math.Sin(t2)) + centreF.Y)

                Using gp As New GraphicsPath()
                    gp.AddArc(boundingRectInner, Rad2Deg(a), sweepAngle)
                    gp.AddLine(p3, p4)
                    gp.AddArc(boundingrectOuter, Rad2Deg(a + aInc), -sweepAngle)
                    gp.CloseFigure()

                    col1 = HSL2RGB(a + colourStart, 1, 0.5)
                    br.Color = col1

                    e.Graphics.FillPath(br, gp)
                End Using

            Next

        End Using

    End Sub

Note the smaller number of steps, so the colours are fewer, yet the edges are still those of a circle:

How to draw a linear gradient circle in .NET?

1 Answers1