Draw rounded rectangle inside a specific area

  • Thread starter Thread starter Mark Ingram
  • Start date Start date
M

Mark Ingram

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,
 
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 said:
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
Click to expand...
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).
 
Hi,

Mark Ingram said:
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).
Click to expand...

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 said:
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?
Click to expand...

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.
 
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.
 
Hi,

Chris Dunaway said:
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.
Click to expand...

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)
 
Chris said:
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.
Click to expand...

Thats great, should do the trick nicely :)
 
Back
Top