question

blinkor12-6317 avatar image
0 Votes"
blinkor12-6317 asked Viorel-1 commented

Image Zooming in VB.NET with previously drawn graphics.

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?

dotnet-visual-basic
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.


If you know how to use Graphics.FromImage, you can draw the ellipse onto the picture rather than control. Then assign the changed image to picturebox.Image. No redrawing are required after zooming.

1 Vote 1 ·

1 Answer

Castorix31 avatar image
0 Votes"
Castorix31 answered Castorix31 edited

You must scale your data too :

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

64811-piczoom.gif



piczoom.gif (1.8 MiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.