Search code examples
.netvb.netgraphicsdrawing

Drawing a Gradient Circle into a PictureBox with VB.NET

I have an application that puts images into a PictureBox and draws a circle in it.

The application consists of 2 steps:

  1. An image is loaded into the PictureBox
  2. A circle is drawn directly into the PictureBox with a given specification of the Radius/Diameter (In Pixels) and the position of the circle's center with the X, Y of the picture inside the PictureBox. (For example if the given coordinates are 44,44 then the center of the circle will be at 44,44.

My goal is to use the most efficient method to draw an orange, gradient circle (see image under) into an image already in a PictureBox, overlaying it. Preferably, I would like a method that does not save the image to the computer as the image inside the box is uploaded every second.

Also, I was thinking of using System.Drawing to use draw a circle directly into a picture that exists in a picturebox but it doesn't look the best (the circle is grainy and pixelated) and there isn't a working gradient option for me.

An example of the circle I want to draw is displayed in the image below. I've attached a picture below of what a drawn circle onto the PictureBox should look like: Comparason

My idea is directly drawing this circle into the PictureBox without having to save the picture to the PC, as this image in the PictureBox gets updated every second and that won't be efficient.

How can I do this? Is there a function in System.Drawing that can do this or a NuGet Package I can use? (Drawing a Orange Circular Gradiant Circle onto an image already present in a PictureBox?

Solution

  • Here is an example that draws an orange ellipse that goes from transparent at the centre to opaque at the edge inside a PictureBox:

    Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint
    Dim bounds = PictureBox1.Bounds

    Using path As New GraphicsPath
        path.AddEllipse(bounds)

        Using brush As New PathGradientBrush(path)
            brush.CenterPoint = New PointF(bounds.Width / 2.0F, bounds.Height / 2.0F)
            brush.CenterColor = Color.FromArgb(0, Color.Orange)
            brush.SurroundColors = {Color.Orange}
            brush.FocusScales = PointF.Empty

            e.Graphics.FillRectangle(brush, bounds)
        End Using
    End Using
End Sub

    You can just change way you set the bounds variable to make it a circle of the correct size and location and change the colors if you need to.

    EDIT: Credit where it's due, I got the basis for that from one of the answers to this question.