Piece by Piece Rounded Rectangle

Hello, All. I hate doing this but I’ve fiddled with it for some time with no luck. It’s been 57 years since my last geometry class, and I’m stumped.
I am trying to create a GraphicsPath that is very similar to what I would get if I used AddRoundRectangle and added it to the margins of my DesktopContainer. Think of the border around a DesktopButton. In paint I will be selecting one of 3 versions.

All three versions will have a horizontal line, to width (or arc), top and bottom.

  •   Rounded on the left, no border on the right side.
  •   No border on the left, rounded on the right.
  •   Square on the left, nothing on the right.

Can anyone give me some sample code?

1 Like

What have you tried so far? Can you show us the code you wrote that doesn’t work?

​Tom Dixon via Xojo Programming Forum noreply-forum@xojo.com

Mon 6/10/2024 4:03 PM

I’ve just been using the examples. The main one is from Top-Rounded Rectangle – Xojo Programming Blog The code shown there is:

Const Pi = 3.14159
Const x = 50
Const y = 00
Const rectHeight = 100
Const rectWidth = 100
Const arcRadius = 20

Var topRoundRect As New GraphicsPath
topRoundRect.AddArc(x, y, arcRadius, Pi, 1.5 * Pi, False)
topRoundRect.AddArc(x + rectWidth, y, arcRadius, 1.5 * Pi, 0, False)
topRoundRect.AddLineToPoint(x + rectWidth + arcRadius, rectHeight)
topRoundRect.AddLineToPoint(x - arcRadius, rectHeight)
topRoundRect.AddLineToPoint(x - arcRadius, y)


It is supposed to draw a box with the top rounded. But no matter how much I fool with things, I can’t get it sideways to start.

That example doesn’t work as is (in the latest version of Xojo) - the top gets cut off.

Change Const y to equal 50 instead of 0.

1 Like

Here is an example with one of the shapes you need, I believe (no border on left, rounded on right):

Const Pi = 3.14159
Const x = 50
Const y = 50
Const rectHeight = 100
Const rectWidth = 100
Const arcRadius = 20

Var topRoundRect As New GraphicsPath
topRoundRect.MoveToPoint(x, y)
topRoundRect.AddLineToPoint(x+rectWidth-arcRadius, y)
topRoundRect.AddArc(x+rectWidth-arcRadius, y+arcRadius, arcRadius, 1.5*Pi, 0, False)
topRoundRect.AddArc(x+rectWidth-arcRadius, y+rectHeight-arcRadius, arcRadius, 0, 0.5*Pi, False)
topRoundRect.AddLineToPoint(x, y+rectHeight)

1 Like

Excellent, Indy G! That does it. And if I can’t get the other two out of that, I should get a new profession!!!

One additional note - I discovered after my post that the first ‘AddLineToPoint’ on line 10 is not needed because of the way GraphicPath works. The first AddArc call on line 11 adds the line from the initial point to the arc.


I am so sorry. When I try to change it to be rounded on the left side, I can’t seem to get the StartRadian and EndRadian to do anything but draw pretty much a whole circle with a line through it. I just don’t understand Radians.

It may help you to not use the constant names (except Pi), and think about the area that you are writing with the top left at 0,0 instead bottom left 0,0 as we learned in school.

Then you write your code with specific numbers to understand what happens when you add a line or add an arc. This may help you understand how things work.

Here’s a reference for the startRadian and endRadian:


In my example the first arc starts at the top of the circle, so 1.5 * Pi and ends on the right side, so 0. The second arc starts on the right side, so 0 and ends on the bottom, so 0.5 * Pi.

Hope that helps.


The diagram made all the difference. Here’s the code for the left curve. Note that the final argument, counterClockWise, has to be changed to True.
I also just used the Width and Height of the DesktopContainer rather than making them constants.

#pragma unused areas

Const Pi = 3.14159
Const x = 0
Const y = 0
Const arcRadius = 10

// Left Rounded
Var gPath As New GraphicsPath
gPath.MoveToPoint(x+Width, y)
gPath.AddLineToPoint(x+arcRadius, y)
gPath.AddArc(x+arcRadius, y+arcRadius, arcRadius, 1.5Pi, Pi, True)
gPath.AddArc(x+arcRadius, y+Height-arcRadius, arcRadius, Pi, 0.5
Pi, True)
gPath.AddLineToPoint(x + Width, y+Height)

Again, thanks so much for your help!

1 Like

Looks like the * changed your text to italics, here is between code tags:

for those that will copy/paste and see an error.

When posting code:

  1. add the code to your post

  2. select it all with the mouse

  3. Click </>

You did (1) but not (2) and (3).

You can improve your value for pi by entering Pi = 4.0 * Atan(1.0) . This will generate pi to the precision of your math library.

1 Like