Image Zooming in VB.NET with previously drawn graphics.

Question

I'm using VB.NET to make a zoomable PictureBox using the Scroll Wheel. This code works fine when zooming in a static image. There is already an image inside the PictureBox (From https://stackoverflow.com/questions/13496706/how-to-zoom-in-a-picturebox-with-scrollwheel-in-vb-net)

Public Class Form1
    Private _originalSize As Size = Nothing
    Private _scale As Single = 1
    Private _scaleDelta As Single = 0.0005
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage


        If PictureBox1.Image IsNot Nothing Then
            PictureBox1.Size = Panel1.Size
            _originalSize = Panel1.Size
        End If

    End Sub

Private Sub Form1_MouseWheel(sender As Object, e As MouseEventArgs) Handles Me.MouseWheel


        _scaleDelta = Math.Sqrt(PictureBox1.Width * PictureBox1.Height) * 0.00005

        If e.Delta < 0 Then
            _scale -= _scaleDelta
        ElseIf e.Delta > 0 Then
            _scale += _scaleDelta
        End If

        If e.Delta <> 0 Then _
        PictureBox1.Size = New Size(CInt(Math.Round(_originalSize.Width * _scale)),
                                    CInt(Math.Round(_originalSize.Height * _scale)))
    End Sub
End Class

The problem is when I'm drawing graphics in the PictureBox, when the image is zoomed the graphics don't draw in relation to the zoomed image. For example, if the graphic is drawn on the top left corner and the image is zoomed somewhere else such as the bottom left, then the graphic is still visible on the top left corner. This seems like the graphic is not drawn on the picture itself, but on the PictureBox.

As some may know, this code was used to draw the image on the PictureBox on the PictureBox's Paint event.

Dim centreX As Single
        Dim centreY As Single
        Dim diameter As Single

        If Single.TryParse(TextBox1.Text, centreX) AndAlso
           Single.TryParse(TextBox2.Text, centreY) AndAlso
           Single.TryParse(TextBox3.Text, diameter) Then
            Dim radius = diameter / 2.0F
            Dim bounds = New RectangleF(centreX - radius,
                                        centreY - radius,
                                        diameter,
                                        diameter)

            Using path As New GraphicsPath
                path.AddEllipse(bounds)

                Using brush As New PathGradientBrush(path)
                    brush.CenterPoint = New PointF(centreX, centreY)
                    brush.CenterColor = Color.FromArgb(0, Color.Orange)
                    brush.SurroundColors = {Color.Orange}
                    brush.FocusScales = PointF.Empty

                    e.Graphics.FillRectangle(brush, bounds)
                End Using
            End Using
        End If

Here are some supplementary images to help understanding:

Where the circle is expected to be at when image is normal:
https://i.stack.imgur.com/LDFn3.png

What actually happens after zooming.
https://i.stack.imgur.com/Y1KcL.png

I would just prefer to have the graphic drawn onto the Picture to be zoomed WITH the picture, not zooming the picture only. How can I do this?

Answer 1

You must scale your data too :

  diameter *= _scale  
  centreX *= _scale  
  centreY *= _scale  
  radius *= _scale