471,355 Members | 1,641 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,355 software developers and data experts.

Draw rounded rectangle inside a specific area

Hi, how can i draw a rounded rectange, with a border within a specified
area?

i.e. if i have a Rectangle with width and height of 100, how can i draw
a rectange with 2 pixel border inside of the original one? (the current
attempts all draw the border just outside of the original rectangle).

At the moment im using the following code, but it allows the rectangle
to grow - which i definately dont want!

m_edgePath = new GraphicsPath();

Point topLeft = new Point(this.ClientRectangle.Left +
m_borderWidth, this.ClientRectangle.Top + m_borderWidth);
Point topRight = new Point(this.ClientRectangle.Right -
m_curveSize.Width - m_borderWidth, this.ClientRectangle.Top +
m_borderWidth);
Point bottomRight = new Point(this.ClientRectangle.Right -
m_curveSize.Width - m_borderWidth, this.ClientRectangle.Bottom -
m_curveSize.Height - m_borderWidth);
Point bottomLeft = new Point(this.ClientRectangle.Left +
m_borderWidth, this.ClientRectangle.Bottom - m_curveSize.Height -
m_borderWidth);

m_edgePath.AddArc(topLeft.X, topLeft.Y, m_curveSize.Width,
m_curveSize.Height, 180, 90);
m_edgePath.AddArc(topRight.X, topRight.Y, m_curveSize.Width,
m_curveSize.Height, 270, 90);
m_edgePath.AddArc(bottomRight.X, bottomRight.Y, m_curveSize.Width,
m_curveSize.Height, 0, 90);
m_edgePath.AddArc(bottomLeft.X, bottomLeft.Y, m_curveSize.Width,
m_curveSize.Height, 90, 90);
m_edgePath.CloseFigure();

Region preWidenRegion = new Region(m_edgePath);

m_edgePath.Widen(new Pen(Color.Black, m_borderWidth));

Region postWidenRegion = new Region(m_edgePath);

m_edgeRegion = new Region();
m_edgeRegion.MakeEmpty();

m_edgeRegion.Union(preWidenRegion);
m_edgeRegion.Union(postWidenRegion);


Thanks,
Jan 18 '06 #1
7 10528
Hi Mark,
Not sure if there is no direct way of doing it, but it should be simple
doing something like:

1- Draw the 4 lines that will conform the rectangle , you do it 4 pixels
short to leave space for the corners. like :
DrawLine( thePen, startX+2 , startY, endX-2 , startY ) // the top
horizontal
DrawLine( thePen, startX , startY + 2, startX , startY-2 ) //the
left vertical
2- using DrawArc you draw the corners ,
DrawArc( thePen, new Rectangle( startX, startY, 2, 2) , 270, 360 )
//top left corner
it should work

--
Ignacio Machin,
ignacio.machin AT dot.state.fl.us
Florida Department Of Transportation
"Mark Ingram" <no****@nowhere.com> wrote in message
news:Ok*************@tk2msftngp13.phx.gbl...
Hi, how can i draw a rounded rectange, with a border within a specified
area?

i.e. if i have a Rectangle with width and height of 100, how can i draw a
rectange with 2 pixel border inside of the original one? (the current
attempts all draw the border just outside of the original rectangle).

At the moment im using the following code, but it allows the rectangle to
grow - which i definately dont want!

m_edgePath = new GraphicsPath();

Point topLeft = new Point(this.ClientRectangle.Left + m_borderWidth,
this.ClientRectangle.Top + m_borderWidth);
Point topRight = new Point(this.ClientRectangle.Right -
m_curveSize.Width - m_borderWidth, this.ClientRectangle.Top +
m_borderWidth);
Point bottomRight = new Point(this.ClientRectangle.Right -
m_curveSize.Width - m_borderWidth, this.ClientRectangle.Bottom -
m_curveSize.Height - m_borderWidth);
Point bottomLeft = new Point(this.ClientRectangle.Left + m_borderWidth,
this.ClientRectangle.Bottom - m_curveSize.Height - m_borderWidth);

m_edgePath.AddArc(topLeft.X, topLeft.Y, m_curveSize.Width,
m_curveSize.Height, 180, 90);
m_edgePath.AddArc(topRight.X, topRight.Y, m_curveSize.Width,
m_curveSize.Height, 270, 90);
m_edgePath.AddArc(bottomRight.X, bottomRight.Y, m_curveSize.Width,
m_curveSize.Height, 0, 90);
m_edgePath.AddArc(bottomLeft.X, bottomLeft.Y, m_curveSize.Width,
m_curveSize.Height, 90, 90);
m_edgePath.CloseFigure();

Region preWidenRegion = new Region(m_edgePath);

m_edgePath.Widen(new Pen(Color.Black, m_borderWidth));

Region postWidenRegion = new Region(m_edgePath);

m_edgeRegion = new Region();
m_edgeRegion.MakeEmpty();

m_edgeRegion.Union(preWidenRegion);
m_edgeRegion.Union(postWidenRegion);


Thanks,

Jan 18 '06 #2
Ignacio Machin ( .NET/ C# MVP ) wrote:
Hi Mark,
Not sure if there is no direct way of doing it, but it should be simple
doing something like:

1- Draw the 4 lines that will conform the rectangle , you do it 4 pixels
short to leave space for the corners. like :
DrawLine( thePen, startX+2 , startY, endX-2 , startY ) // the top
horizontal
DrawLine( thePen, startX , startY + 2, startX , startY-2 ) //the
left vertical
2- using DrawArc you draw the corners ,
DrawArc( thePen, new Rectangle( startX, startY, 2, 2) , 270, 360 )
//top left corner
it should work

Its not the actual arcs or lines that are causing the problems, its the
drawing with the pen, if you use anything bigger than width 1, it starts
growing outside of the rectangle.

i.e. if you use PenWidth of 2, the rectangle will increase in size to
102x102 (extra 1 pixel on each side).
Jan 18 '06 #3
Hi,

"Mark Ingram" <no****@nowhere.com> wrote in message
news:Ol**************@TK2MSFTNGP10.phx.gbl...
Ignacio Machin ( .NET/ C# MVP ) wrote:
Hi Mark,
Not sure if there is no direct way of doing it, but it should be simple
doing something like:

1- Draw the 4 lines that will conform the rectangle , you do it 4 pixels
short to leave space for the corners. like :
DrawLine( thePen, startX+2 , startY, endX-2 , startY ) // the top
horizontal
DrawLine( thePen, startX , startY + 2, startX , startY-2 ) //the
left vertical
2- using DrawArc you draw the corners ,
DrawArc( thePen, new Rectangle( startX, startY, 2, 2) , 270,
360 ) //top left corner
it should work

Its not the actual arcs or lines that are causing the problems, its the
drawing with the pen, if you use anything bigger than width 1, it starts
growing outside of the rectangle.

i.e. if you use PenWidth of 2, the rectangle will increase in size to
102x102 (extra 1 pixel on each side).


Well, what do you expect? if the pen is bigger than 1 you should calculate
accordingly ,

Another question, if this is the same pen used to draw the lines you should
have the same problem no? or it start at the selected X and takes 2 pixels
to the right?
What happens in the right side?
--
Ignacio Machin,
ignacio.machin AT dot.state.fl.us
Florida Department Of Transportation
Jan 18 '06 #4
Ignacio Machin ( .NET/ C# MVP ) wrote:

Well, what do you expect? if the pen is bigger than 1 you should calculate
accordingly ,

Another question, if this is the same pen used to draw the lines you should
have the same problem no? or it start at the selected X and takes 2 pixels
to the right?
What happens in the right side?


If i draw with a 2 pixel width pen, there is a 1 pixel border all the
way around the outside of the rectangle, i want the 2 pixel border to be
inside the rectangle. normally this wouldnt be a problem, but with the
rounded edges its being a right pain. any help is much appreciated.
Jan 18 '06 #5
Take a look at the Pen.Alignment property and the PenAlignment
enumeration. Have you tried setting the Alignment property to Inset?
The default is Center.

Perhaps this will help you.

Jan 18 '06 #6
Hi,

"Chris Dunaway" <du******@gmail.com> wrote in message
news:11*********************@g49g2000cwa.googlegro ups.com...
Take a look at the Pen.Alignment property and the PenAlignment
enumeration. Have you tried setting the Alignment property to Inset?
The default is Center.


I think this is the solution :)

Also note that with a little math he could had solve this before, if you see
that the draw is centered in the pen, well then just shrink it accordingly ,
(1/2 the width of the pen)
--
Ignacio Machin,
ignacio.machin AT dot.state.fl.us
Florida Department Of Transportation
Jan 18 '06 #7
Chris Dunaway wrote:
Take a look at the Pen.Alignment property and the PenAlignment
enumeration. Have you tried setting the Alignment property to Inset?
The default is Center.

Perhaps this will help you.


Thats great, should do the trick nicely :)
Jan 19 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by dunkonu | last post: by
2 posts views Thread by Starlite | last post: by
15 posts views Thread by Steven T. Hatton | last post: by
reply views Thread by XIAOLAOHU | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.