Drawing Round-Edged Rectangle Using VB.NET

Download demo project - 8 Kb

Sample Image - ImageRoundEdgeRectangle.gif

Introduction

This is a Article explains about drawing a Round-edge Rectangle using VB.Net. It will help beginners to learn 'How to make use of GDI+ in VB.NET

The input parameters are Xaxis, Yaxis, Width, Height and Diameter. Based on the diameter, the calculations are made. For an example I have put the color of the rectangle as Black.
If user want to change they can chage the color.

Hope it will be helpful.

Public Sub DrawRoundedRectangle(ByVal objGraphics As Graphics, _
                                ByVal m_intxAxis As Integer, _
                                ByVal m_intyAxis As Integer, _
                                ByVal m_intWidth As Integer, _
                                ByVal m_intHeight As Integer, _
                                ByVal m_diameter As Integer)

 
   
   'Dim g As Graphics
    Dim BaseRect As New RectangleF(m_intxAxis, m_intyAxis, m_intWidth, 
                                  m_intHeight)
    Dim ArcRect As New RectangleF(BaseRect.Location,
                              New SizeF(m_diameter, m_diameter))
    'top left Arc
    objGraphics.DrawArc(Pens.Black, ArcRect, 180, 90)
    objGraphics.DrawLine(Pens.Black, m_intxAxis + CInt(m_diameter / 2), 
                         m_intyAxis, 
                         m_intxAxis + m_intWidth - CInt(m_diameter / 2), 
                         m_intyAxis)

    ' top right arc
    ArcRect.X = BaseRect.Right - m_diameter
    objGraphics.DrawArc(Pens.Black, ArcRect, 270, 90)
    objGraphics.DrawLine(Pens.Black, m_intxAxis + m_intWidth, 
                         m_intyAxis + CInt(m_diameter / 2), 
                         m_intxAxis + m_intWidth, 
                         m_intyAxis + m_intHeight - CInt(m_diameter / 2))

    ' bottom right arc
    ArcRect.Y = BaseRect.Bottom - m_diameter
    objGraphics.DrawArc(Pens.Black, ArcRect, 0, 90)
    objGraphics.DrawLine(Pens.Black, m_intxAxis + CInt(m_diameter / 2), 
                         m_intyAxis + m_intHeight, 
                         m_intxAxis + m_intWidth - CInt(m_diameter / 2), 
                         m_intyAxis + m_intHeight)

    ' bottom left arc
    ArcRect.X = BaseRect.Left
    objGraphics.DrawArc(Pens.Black, ArcRect, 90, 90)
    objGraphics.DrawLine(Pens.Black, 
                         m_intxAxis, m_intyAxis + CInt(m_diameter / 2), 
                         m_intxAxis, 
                         m_intyAxis + m_intHeight - CInt(m_diameter / 2))

End Sub

You can call this method from anywhere by just giving the required values to the input parameters.You can chnage the input parameters like

Private Sub DrawRoundedRectangle(ByVal rectf as RectangleF, _<BR>                                 ByVal m_diameter As Integer)

and from RectangleF object You can get the values of xAxis, yAxis, width and Height of the rectangles.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Karthikeyan Muthurajan

Web Developer

India

Member

Working as a S/W Engineer with 3+ years of experience
Having MCAD in .NET
Selected as Microsoft India Community Star

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

My vote of 5

sarthakganguly

21:50 21 Jul '11

Bad approach but changing the apporach to Drawpath I acheived my Goal
Sign In·View Thread·Permalink

[Message Deleted]

Triston J. Taylor

8:30 21 Nov '08


Sign In·View Thread·Permalink	2.00/5 (1 vote)

I Modified this code better [modified]

Triston J. Taylor

9:03 21 Nov '08

When you use this function it returns a graphics path.
You can do all sorts of things with a path like:

GraphicsObjYouSent.FillPath(Pen,Path)
GraphicsObjYouSent.DrawPath(Pen,Path)

And you can also before or after your graphics processing use:
Dim MyRegion As New Region(path)

Basicly the best way to do rounded rectangles is to do the math, make it a path, and then do any drawing/filling/clipping or blending with the path data.

Public Function RoundedRectangle(ByVal GraphicsObj As Graphics, ByVal Rect As Rectangle, ByVal CornerSize As Integer) As GraphicsPath

Dim _GraphicsPath As New GraphicsPath()

Dim ArcRect As New RectangleF(Rect.Location, New SizeF(CornerSize, CornerSize))

'top left Arc

_GraphicsPath.AddArc(ArcRect, 180, 90)

_GraphicsPath.AddLine(Rect.X + CInt(CornerSize / 2), Rect.Y, Rect.X + Rect.Width - CInt(CornerSize / 2), Rect.Y)

' top right arc
ArcRect.X = Rect.Right - CornerSize

_GraphicsPath.AddArc(ArcRect, 270, 90)

_GraphicsPath.AddLine(Rect.X + Rect.Width, Rect.Y + CInt(CornerSize / 2), Rect.X + Rect.Width, Rect.Y + Rect.Height - CInt(CornerSize / 2))

' bottom right arc
ArcRect.Y = Rect.Bottom - CornerSize

_GraphicsPath.AddArc(ArcRect, 270, 90)

_GraphicsPath.AddLine(Rect.X + CInt(CornerSize / 2), Rect.Y + Rect.Height, Rect.X + Rect.Width - CInt(CornerSize / 2), Rect.Y + Rect.Height)

' bottom left arc
ArcRect.X = Rect.Left

_GraphicsPath.AddArc(ArcRect, 90, 90)

_GraphicsPath.AddLine(Rect.X, Rect.Y + CInt(CornerSize / 2), Rect.X, Rect.Y + Rect.Height - CInt(CornerSize / 2))

Return _GraphicsPath

End Function

modified on Friday, November 21, 2008 10:12 PM

Re: I Modified this code better

Triston J. Taylor

9:10 21 Nov '08

Special thanks to: Karthikeyan Muthurajan. Without him and the article he wrote, RoundedRectangle(...) as GraphicsPath would never have been written by me. This could still be improved by making it a Class!
Sign In·View Thread·Permalink

Re: I Modified this code better

Karthikeyan Muthurajan

17:36 23 Nov '08

Hi Triston, Can you please send me the workable code in latest version of .NET? Thanks for your comments and encouragement Regards Karthikeyan Muthurajan
Sign In·View Thread·Permalink

Re: I Modified this code better Uh Oh!

Triston J. Taylor

9:59 21 Nov '08

Triston J. Taylor wrote:
' bottom right arc
ArcRect.Y = Rect.Bottom - CornerSize

_GraphicsPath.AddArc(ArcRect, 270, 90)

It should be:

Triston J. Taylor wrote:
' bottom right arc
ArcRect.Y = Rect.Bottom - CornerSize

_GraphicsPath.AddArc(ArcRect, 0, 90)

Also while finding and fixing this error, I noticed that if you remove the adding of all but the last line, obj.DrawPath(..) will still complete the lines!

Dunno if this slows down GDI operations. Experiment.

Thanks, Sort of

Steve Clarke

15:54 31 Jul '04

I agree with the decision to put this in purgatory, but it did come in handy since I needed to draw a rounded rectangle. Don't work harder or work smarter; get someone else to do the work for you.
Sign In·View Thread·Permalink

What use is this?

mav.northwind

3:17 30 Apr '04

I'm sorry, but I can't see much use in this "article".
There is
a) no article, just a piece of code
b) no special idea or trick behind the code
c) a leak as you should call g.Dispose() in the end
d) no flexibility because of hard-coded colors (and I don't want PINK rectangles!)
e) not even one argument validated in any way
OMG | :OMG:

So if you have to modify the code you supplied to make it usable anyway and the code itself is very trivial, what's the use of this article?

Sheez, kids these days...

Re: What use is this?

Uwe Keim

8:00 30 Apr '04

f) Why a function when not returning anything g) What is `Me.CreateGraphics` h) etc. So really useful for nothing. -- - Free Windows-based CMS: www.zeta-software.de/enu/producer/freeware/download.html - See me: www.magerquark.de - MSN Messenger: uwe_keim@hotmail.com
Sign In·View Thread·Permalink	5.00/5 (1 vote)

Re: What use is this?

Karthikeyan Muthurajan

18:57 2 May '04

Hi Mav,

The article is self-explanatory and I thought there is no need to explain further..

When I want to draw rounded edge rectangle there is no idea, i have at that time and being a intermediate level of programmer,
I struggle to write it..
To avoid such a condition to others and to reduce the development time for others only I put the Article..

Hope u are expert in .NET and it may not need for u much..

Thanks for ur suggestions and give me some time to change the required things in my Article..

Re: What use is this?

Love.net

19:49 3 May '04

Hi Karthi.. It will be useful for me as beginner in VB.NET.. I doen't have idea to use GDI+.. Thanks
Sign In·View Thread·Permalink

Re: What use is this?

DDnDD

11:14 3 Feb '05

Usefull to me!!!! but i need to draw a solid rounded-corner rectangle, can you help? =~=~=~= PeAcE DrDave ~=~=~=~
Sign In·View Thread·Permalink

Re: What use is this?

DDnDD

12:01 3 Feb '05

figgered it out, using the graphics path, THanks again!!!

Private Sub DrawSolidRoundedRectangle(ByVal objGraphics As Graphics, _
ByVal m_intxAxis As Integer, _
ByVal m_intyAxis As Integer, _
ByVal m_intWidth As Integer, _
ByVal m_intHeight As Integer, _
ByVal m_diameter As Integer, _
ByVal m_Brush As Brush)
Dim path As New GraphicsPath
'Dim g As Graphics
Dim BaseRect As New RectangleF(m_intxAxis, m_intyAxis, m_intWidth, m_intHeight)
Dim ArcRect As New RectangleF(BaseRect.Location, New SizeF(m_diameter, m_diameter))
'top left Arc
path.AddArc(ArcRect, 180, 90)
path.AddLine(m_intxAxis + CInt(m_diameter / 2), m_intyAxis, m_intxAxis + m_intWidth - CInt(m_diameter / 2), m_intyAxis)
' top right arc
ArcRect.X = BaseRect.Right - m_diameter
path.AddArc(ArcRect, 270, 90)
path.AddLine(m_intxAxis + m_intWidth, m_intyAxis + CInt(m_diameter / 2), m_intxAxis + m_intWidth, m_intyAxis + m_intHeight - CInt(m_diameter / 2))
' bottom right arc
ArcRect.Y = BaseRect.Bottom - m_diameter
path.AddArc(ArcRect, 0, 90)
path.AddLine(m_intxAxis + CInt(m_diameter / 2), m_intyAxis + m_intHeight, m_intxAxis + m_intWidth - CInt(m_diameter / 2), m_intyAxis + m_intHeight)
' bottom left arc
ArcRect.X = BaseRect.Left
path.AddArc(ArcRect, 90, 90)
path.AddLine(m_intxAxis, m_intyAxis + CInt(m_diameter / 2), m_intxAxis, m_intyAxis + m_intHeight - CInt(m_diameter / 2))

objGraphics.FillPath(m_Brush, path)
End Sub

=~=~=~=
PeAcE
DrDave
~=~=~=~

Re: What use is this?

Graemeg33

0:54 18 Jan '07

For those who are interested, there's a quicker way of doing this...

Private Sub FillRoundRect(ByVal gr As Graphics, ByVal Rect As Rectangle, ByVal FillColor As Color, ByVal ArcSize As Integer)
      ' Build Rounded Rectangle Path
      Using Path As New GraphicsPath
            ' Set Path for rounded rectangle
            RoundRect(Path, Rect, ArcSize)
            ' Fill background
            Using brush As New SolidBrush(FillColor)
                  gr.FillPath(brush, Path)
            End Using
      End Using
End Sub

Private Sub RoundRect(ByVal Path As GraphicsPath, ByVal Rect As Rectangle, ByVal ArcSize As Integer)
      ' Build the object path
      With Path
            .StartFigure()
            .AddArc(New Rectangle(Rect.X, Rect.Y, ArcSize, ArcSize), _
                        180, 90)
            .AddArc(New Rectangle(Rect.X + Rect.Width - ArcSize - _BorderWidth, _
                                             Rect.Y, _
                                             ArcSize, _
                                             ArcSize), _
                        270, 90)
            .AddArc(New Rectangle(Rect.X + Rect.Width - ArcSize - _BorderWidth, _
                                             Rect.Y + Rect.Height - ArcSize - _BorderWidth, _
                                             ArcSize, _
                                             ArcSize), _
                        0, 90)
            .AddArc(New Rectangle(Rect.X, _
                                             Rect.Y + Rect.Height - ArcSize - _BorderWidth, _
                                             ArcSize, _
                                             ArcSize), _
                        90, 90)
            .CloseFigure()
      End With
End Sub

Because we're using a Path object, each point is connected automatically unless told otherwise. Therefore there is no need to draw the lines manually between each arc - GDI+ manages this for us and simplies the code required.

I've added a bonus couple of routines that show the flexibility of the path object when used correctly.

Firstly, using a different brush ...

Private Sub GradientFillRoundRect(ByVal gr As Graphics, ByVal Rect As Rectangle, ByVal Color1 As Color, ByVal Color2 As Color, ByVal ArcSize As Integer)
      ' Build Rounded Rectangle Path
      Using Path As New GraphicsPath
            'Set Path for rounded rectangle
            RoundRect(Path, Rect, ArcSize)
            ' Fill background
            Using brush As New PathGradientBrush(Path)
                  brush.CenterColor = Color1
                  brush.CenterPoint = New PointF(Rect.X + Rect.Width / 2, Rect.Y + Rect.Height / 2)
                  ' Define an array of colors, one for each vertex.
                  Dim colors2() As Color = {Color2, Color2, Color2, Color2}
                  brush.SurroundColors = colors2
                  gr.FillPath(brush, Path)
            End Using
      End Using
End Sub

Secondly, as a border...

Private Sub RoundRectBorder(ByVal gr As Graphics, ByVal Rect As Rectangle, ByVal Color As Color, ByVal ArcSize As Integer, Optional ByVal PenWidth As Single = 3.0F)
      ' Build Rounded Rectangle Path
      Using Path As New GraphicsPath
            ' Set Path for rounded rectangle
            RoundRect(Path, Rect, ArcSize)
            ' Fill background
            Using pen As New Pen(Color, PenWidth)
                  gr.DrawPath(pen, Path)
            End Using
      End Using
End Sub

Enjoy! Big Grin | :-D

Graeme.

Re: What use is this?

phil_the

23:34 16 Aug '07

Name '_BorderWidth' is not declared.
Sign In·View Thread·Permalink

Re: What use is this?

Triston J. Taylor

16:23 21 Nov '08

_BorderWidth Is Pen.Width Trying to modify the source to keep the border in the rectangle is very difficult to say the least. Odd Numbers and Even numbers totally throw the proportions out of sync.
Sign In·View Thread·Permalink	2.00/5 (1 vote)

Re: What use is this?

JBenhart

21:33 13 Nov '11

Hey Graeme, I have to say, you rock. I didn't even know you could create a gradient linear brush from a center point. I am using this (slightly modified). THANK YOU!!!!
Sign In·View Thread·Permalink	5.00/5 (1 vote)

Re: What use is this?

Anonymous

13:22 24 Feb '05

You can always use it to reshape the Region of a control to create a rounded button. Of couse it might be better to use the GraphicsPath class. Its just for cosmetic purposes really.
Sign In·View Thread·Permalink	3.50/5 (6 votes)