Problem Drawing concentric circles

[Punchy]

J drew a small circle on a picture box and then drew another larger on it using the same X and Y coordinates. However the second circle is near but not surrounding the first circle. I thought they would be exactly concentric. Does the second circle start at a different point? I am confused.

Can you help me make concentric circles?

[Evil_Giraffe]

Well you'll have to show your code to let us know which method you are using to draw the circle, however assuming it is this method:
https://msdn.microsoft.com/en-us/lib...code-snippet-1
then you should note that the x, y arguments are not the centre of the circle, but the upper left corner, so if you want a circle with the same centre but a different size, then you will need a different x, y.

[Sitten Spynne]

My psychic guess:

The X and Y coordinates aren't the center of the circle. They're the top-left corner of a box that circumscribes it. So drawing a larger circle with the same coordinates means it pokes out on the right and bottom sides, but is more or less the same on the top and left (depending on the radial difference.) So if you make it a little bigger and want it concentric, you have to shift your coordinates so the bigger circle's center is in the same place as the smaller circle's.

[Punchy]

Thank you heaps!! I did not realise that. I will check and see - but thanks heaps!!

[Punchy]

OK, I checked and that is what is happening. I also looked at my old VB6 manuals and the Circle command there uses the X and Y co-ordinates as the centre of the circle. Bill Gates seems to have changed the rules!!

So, back to my original question. How do I draw concentric circles? How do I change the co-ordinates for the top left hand corner to make them the centre?

[dday9]

If you're using Graphics.DrawEllispe, the method takes a Rectangle as a parameter. You could simply inflate(or deflate passing negative values) the rectangle and move the location by 1/2 the inflation(or deflation) value:

Using g As Graphics = Graphics.FromImage(MyPicturebox.Image)
    Dim startingRectangle As Rectangle = New Rectangle(0, 0, MyPicturebox.Width, MyPicturebox.Height)
    g.DrawEllipse(New Pen(Color.Black), startingRectangle)

    Dim secondRectangle As Rectangle = Rectangle.Inflate(startingRectangle, -10, -10)
    secondRectangle.Left += 5
    secondRectangle.Top += 5
    g.DrawEllipse(New Pen(Color.Black), secondRectangle)

    Dim thirdRectangle As Rectangle = Rectangle.Inflate(secondRectangle, -10, -10)
    thirdRectangle.Left += 5
    thirdRectangle.Top += 5
    g.DrawEllipse(New Pen(Color.Black), thirdRectangle)

    'etc...
End Using

Of course this could be done in a loop too:

'Draw 6 concentric circles from largest to smallest
Using g As Graphics = Graphics.FromImage(MyPicturebox.Image)
    Dim rect As Rectangle = New Rectangle(0, 0, MyPicturebox.Width, MyPicturebox.Height)
    g.DrawEllipse(New Pen(Color.Black), rect)

    For x As Integer = 1 To 5
        rect = Rectangle.Inflate(rect, -10, -10)
        rect.Left += 5
        rect.Top += 5
        g.DrawEllipse(New Pen(Color.Black), rect)
    Next
End Using

[Sitten Spynne]

Well.

Let's say (x, y) is the center, and we'll name it C. And r is the radius. The top-left corner is (x1, y1), we'll call it TL, because only suckers stick to single-letter variables.

If we draw a line from C to TL, it'll be some length we don't know. If we knew it, we could calculate C from TL.

If we draw a line of length r from C that is horizontal to the left, it should reach (x - r, y) and just touch the left edge of the circle. Incidentally, that should be vertically beneath TL. We'll call this point ML for "middle left". We could argue that this implies TL's x coordinate is x - r.

If we draw a line of length r from C that is vertical upwards, it will reach (x, y - r). (Remember, negative Y is upwards on the screen!) This should touch the circle, and be vertically horizontal from TL. So we can say this implies TL's y coordinate is y - r.

So from that, we know that if we want a center C, and we have (xC, yC), we can find the TL point by calculating (xC - r, yC - r). I wanted to use trigonometry for this, because you can certainly make a 45/45/90 triangle here, but this seems too easy to go looking up distance formula for the line. It's a slope of 1 so it seems to check out. If I'm wrong, I'm sure someone will document why. But I bet the translation would look like this:

Public Function GetTopLeft(ByVal center As Point, ByVal radius As Integer) As Point
  Dim x As Integer = center.X - radius
  Dim y As Integer = center.Y - radius
  Return New Point(x, y)
End Function

[passel]

You could always just replicate the x,y, radius call as well, just offset x,y by the radius, and the width and height (otherwise known as the diameter) are twice the radius.

Public Class Form1
  Private Sub DrawCircle(g As Graphics, x As Single, y As Single, r As Single)
    g.DrawEllipse(Pens.Red, x - r, y - r, 2 * r, 2 * r)
  End Sub

  Private Sub Form1_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
    For i As Single = 25 To 250 Step 25
      DrawCircle(e.Graphics, 300, 300, i)  'draw concentric circles at 300,300
    Next
  End Sub

p.s. posted over Sitten Spynne, I see.

[boops boops]

If you're using Graphics.DrawEllispe, the method takes a Rectangle as a parameter. You could simply inflate(or deflate passing negative values) the rectangle and move the location by 1/2 the inflation(or deflation) value:

Using g As Graphics = Graphics.FromImage(MyPicturebox.Image)
    Dim startingRectangle As Rectangle = New Rectangle(0, 0, MyPicturebox.Width, MyPicturebox.Height)
    g.DrawEllipse(New Pen(Color.Black), startingRectangle)

    Dim secondRectangle As Rectangle = Rectangle.Inflate(startingRectangle, -10, -10)
    secondRectangle.Left += 5
    secondRectangle.Top += 5
    g.DrawEllipse(New Pen(Color.Black), secondRectangle)

    Dim thirdRectangle As Rectangle = Rectangle.Inflate(secondRectangle, -10, -10)
    thirdRectangle.Left += 5
    thirdRectangle.Top += 5
    g.DrawEllipse(New Pen(Color.Black), thirdRectangle)

    'etc...
End Using

There is no need to shift the rectangle after inflating because it stays centred: that's the whole point of Inflate. And there's no need to create a new rectangle each time because Rectangle is a Structure: you can change its value the same way an integer variable. So the above code boils down to this::

Using g As Graphics = Graphics.FromImage(MyPicturebox.Image)
    Dim startingRectangle As Rectangle = New Rectangle(0, 0, MyPicturebox.Width, MyPicturebox.Height)
    g.DrawEllipse(New Pen(Color.Black), startingRectangle)

    StartingRectangle.Inflate(-10, -10)
    g.DrawEllipse(New Pen(Color.Black), startingRectangle)

    startingRectangle.Inflate(-10, -10)
    g.DrawEllipse(New Pen(Color.Black), Rectangle)

    'etc...
End Using

BB

[Punchy]

Thank you! Thank you! It works well.

Problem Solved!!!