[RESOLVED] mouse hover in zooming picturebox in vb.net

[frangine]

hello guy's ... !!! (^________^)

please help me....

my form will have 2 picture boxes. The first will be the original image. The second will have the zoomed image. Once I move my mouse over the first image, it must display a zoomed image in picturebox 2. I want my first picturebox to be smaller than my second one. And the attached example shows that the first picturebox is bigger than the second one. I've never tried something like this, or drawing images etc. Just resize the 1st picturebox to be smaller that the second one, move with your mouse over the first one, and will see what I mean. I don't want to click on the image to have it zoomed or use the mouse wheel. Just want to hover over the image and display the zoomed version..

i hope you guy's help me....begging you guy's please.....

[jmcilhinney]

Firstly, there's no attached example.

Secondly, let's establish exactly what "hover" means in this context and whether that's actually what you mean. In this context, "hover" means to place the mouse pointer over something and hold it still. For instance, if you move the mouse pointer into a control, over and then out again without stopping, you'll never see a MouseHover event. You'll see one MouseEnter, probably multiple MouseMove events and then one MouseLeave. Only if you stop the mouse pointer moving will you see a MouseHover event. So, is it MouseHover you're interested in or MouseMove?

As for the issue, what you need to do is fairly simple. You start by adding your two PictureBoxes and making them whatever size is appropriate. You then handle the appropriate event of the first PictureBox, i.e. MouseMove or MouseHover. You would then call Refresh on your second PictureBox to raise its Paint event. In the Paint event handler, call Graphics.DrawImage to draw the appropriate part of the Image in the first PictureBox. That part will be a Rectangle whose bounds can be calculated based on the mouse pointer using Control.MousePosition. Check the documentation for DrawImage to find the appropriate overload to use.

[jmcilhinney]

Here's some code I just tested and appears to work:

Public Class Form1
 
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Me.destPictureBox.Image = New Bitmap(Me.destPictureBox.Width, Me.destPictureBox.Height)
    End Sub
 
    Private Sub srcPictureBox_MouseMove(sender As Object, e As MouseEventArgs) Handles srcPictureBox.MouseMove
        Dim srcImage = Me.srcPictureBox.Image
        Dim destImage = Me.destPictureBox.Image
 
        'Get the mouse position in the source image.
        Dim mousePos = Me.srcPictureBox.PointToClient(Control.MousePosition)
 
        'Zoom in on a 20x20 square centred on the mouse pointer.
        Dim srcBounds As New Rectangle(mousePos.X - 10,
                                       mousePos.Y - 10,
                                       20,
                                       20)
 
        'Fill the destination image.
        Dim destBounds As New Rectangle(Point.Empty, destImage.Size)
 
        Using g = Graphics.FromImage(destImage)
            'Clear the existing image.
            g.Clear(SystemColors.Control)
 
            'Draw the new image.
            g.DrawImage(srcImage, destBounds, srcBounds, GraphicsUnit.Pixel)
        End Using
 
        Me.destPictureBox.Refresh()
    End Sub
 
End Class

It's slightly different to what I suggested earlier but basically the same. Note that the source PictureBox was set to AutoSize, otherwise the Image coordinates and PictureBox coordinates don't coincide and determining where on the source Image the mouse pointer is becomes harder.

[frangine]

thanks (^________^) I'm gonna try this

[frangine]

i have some issue in your code :

1.the picturebox2 is blurd
2.when i set the picturebox1 in to sizemode = zoom the picturebox2 didn't show right position/location of the mouse

[frangine]

i need to set the sizemode = zoom of the picturebox1 ,... in that i can display the whole picture ,i want the picturebox2 can show exact location when the picturebox1 is set to sizemode = zoom.......

please help me.....

[passel]

Comments are in the code. Added offset and scaling calculations for the Zoom mode, which centers and scales an image's drawing to fit.
The original image is not modified so is still full size, so we scale the mouse coordinates up to match the full size image.
Also added a line to set InterpolationMode to NearestNeighbor, so the nearest source pixel is blown up to fill the destination, rather then smoothing the color transition between blown up pixels (if you really don't like the blurring).
Just added the code to the MouseMove event, so you can replace the MouseMove event code with this.

  Private Sub srcPictureBox_MouseMove(sender As Object, e As MouseEventArgs) Handles srcPictureBox.MouseMove
    Dim srcImage = Me.srcPictureBox.Image
    Dim destImage = Me.destPictureBox.Image
    Dim sfx, sfy As Single  'scalefactor of Image width to Picturebox Width, and image height to Picturebox height
    Dim xl, yt As Single    'Where the top left x,y ooordinate of the image is in the picturebox when zoomed
    Dim sf As Single        'What the scalefactor is to keep the image in proportion (zoomed)

    With srcPictureBox
      sfx = CSng(.Image.Size.Width / .ClientSize.Width)               'determine X ratio
      sfy = CSng(.Image.Size.Height / .ClientSize.Height)             'determine Y ratio
      If sfx > sfy Then                                               'if X ratio is larger Then use it
        sf = sfx                                                      '  Scale factor is X ratio
        yt = (.ClientSize.Height - (.Image.Size.Height / sf)) / 2     '  calculate Y offset to top of centered image
      Else                                                            'else (Y is larger or equal to X)
        sf = sfy                                                      '  Scale factor is Y ratio
        xl = (.ClientSize.Width - .Image.Size.Width / sf) / 2         '  calculate X offset to left side of centered image
      End If
    End With
    'Get the mouse position in the source image.
    ' Dim mousePos = Me.srcPictureBox.PointToClient(Control.MousePosition)
    Dim mousePos As Point
    mousePos.X = CInt((e.X - xl) * sf)                             'Adjust Mouse X to account for center offset and scaling
    mousePos.Y = CInt((e.Y - yt) * sf)                             'Adjust mouse Y to account for center offset and scaling
    'Zoom in on a 20x20 square centred on the mouse pointer.
    Dim srcBounds As New Rectangle(mousePos.X - 10,
                                   mousePos.Y - 10,
                                   20,
                                   20)

    'Fill the destination image.
    Dim destBounds As New Rectangle(Point.Empty, destImage.Size)

    Using g = Graphics.FromImage(destImage)
      'Clear the existing image.
      g.Clear(SystemColors.Control)
      g.InterpolationMode = Drawing2D.InterpolationMode.NearestNeighbor  'If we don't want smooth interpolation of color between zoomed pixels
      'Draw the new image.
      g.DrawImage(srcImage, destBounds, srcBounds, GraphicsUnit.Pixel)
    End Using

    Me.destPictureBox.Refresh()
  End Sub

Regarding ' Dim mousePos = Me.srcPictureBox.PointToClient(Control.MousePosition)
Not sure why the Mouse Position in the control was gotten that way since the mouse position within the client area is passed in the mouse events parameters, so you don't have to poll the MousePosition within the desktop coordinates and convert it to client.

e.Location is the point of where the mouse is, and e.X and e.Y are the X and Y values independently.

[frangine]

thanks it works !!!!! (^_____^)


but how can i adjust the picturebox2 to be smooth ....

[passel]

i have some issue in your code :
1.the picturebox2 is blurd...

Well, based on the "issue" you mentioned above, it seemed like you didn't care for the smoothing of colors to fill the gaps when you zoom the image because of the blurred look.
So, to see what it looked like if the nearest source pixel was just expanded to fill the gaps between pixels when zoomed, as I said in the last post, and in the comments on the added line below, you can see a "sharp", non-blurred view of each pixel, which results in each pixel being a clear rectangle of some size.

g.InterpolationMode = Drawing2D.InterpolationMode.NearestNeighbor  'If we don't want smooth interpolation of color between zoomed pixels

Now, you have the choice of trying different InterpolationModes to see if there is one you prefer, or just comment it out or remove it to use the default, which I assume Microsoft's considers the best balance between speed and smoothness.

[frangine]

Well, based on the "issue" you mentioned above, it seemed like you didn't care for the smoothing of colors to fill the gaps when you zoom the image because of the blurred look.
So, to see what it looked like if the nearest source pixel was just expanded to fill the gaps between pixels when zoomed, as I said in the last post, and in the comments on the added line below, you can see a "sharp", non-blurred view of each pixel, which results in each pixel being a clear rectangle of some size.

g.InterpolationMode = Drawing2D.InterpolationMode.NearestNeighbor  'If we don't want smooth interpolation of color between zoomed pixels

Now, you have the choice of trying different InterpolationModes to see if there is one you prefer, or just comment it out or remove it to use the default, which I assume Microsoft's considers the best balance between speed and smoothness.

THANK YOU for your code ...now i use your code for my project

i have more favor .. how can i adjust the picturebox2 its too much close up ...

[frangine]

picturebox2 is too much close up ,.. how can i minus its closeness

[passel]

    Dim srcBounds As New Rectangle(mousePos.X - 10,
                                   mousePos.Y - 10,
                                   20,
                                   20)

The 20,20 is selecting the size of the source. If you don't want that small of an area to be zoomed, make the srcBounds larger, i.e. change 20,20 to 40,40 to zoom 1/2 as much.

[passel]

Since it looks like you started a new thread to rephrase the goal once again, I've updated the above code to not Zoom the image, but to display it in its original size in the second picturebox.
Go to this thread http://www.vbforums.com/showthread.p...45#post4727045 to see that and mark this one resolved, so you don't have two threads trying to accomplish the same goal.

[frangine]

Comments are in the code. Added offset and scaling calculations for the Zoom mode, which centers and scales an image's drawing to fit.
The original image is not modified so is still full size, so we scale the mouse coordinates up to match the full size image.
Also added a line to set InterpolationMode to NearestNeighbor, so the nearest source pixel is blown up to fill the destination, rather then smoothing the color transition between blown up pixels (if you really don't like the blurring).
Just added the code to the MouseMove event, so you can replace the MouseMove event code with this.

  Private Sub srcPictureBox_MouseMove(sender As Object, e As MouseEventArgs) Handles srcPictureBox.MouseMove
    Dim srcImage = Me.srcPictureBox.Image
    Dim destImage = Me.destPictureBox.Image
    Dim sfx, sfy As Single  'scalefactor of Image width to Picturebox Width, and image height to Picturebox height
    Dim xl, yt As Single    'Where the top left x,y ooordinate of the image is in the picturebox when zoomed
    Dim sf As Single        'What the scalefactor is to keep the image in proportion (zoomed)

    With srcPictureBox
      sfx = CSng(.Image.Size.Width / .ClientSize.Width)               'determine X ratio
      sfy = CSng(.Image.Size.Height / .ClientSize.Height)             'determine Y ratio
      If sfx > sfy Then                                               'if X ratio is larger Then use it
        sf = sfx                                                      '  Scale factor is X ratio
        yt = (.ClientSize.Height - (.Image.Size.Height / sf)) / 2     '  calculate Y offset to top of centered image
      Else                                                            'else (Y is larger or equal to X)
        sf = sfy                                                      '  Scale factor is Y ratio
        xl = (.ClientSize.Width - .Image.Size.Width / sf) / 2         '  calculate X offset to left side of centered image
      End If
    End With
    'Get the mouse position in the source image.
    ' Dim mousePos = Me.srcPictureBox.PointToClient(Control.MousePosition)
    Dim mousePos As Point
    mousePos.X = CInt((e.X - xl) * sf)                             'Adjust Mouse X to account for center offset and scaling
    mousePos.Y = CInt((e.Y - yt) * sf)                             'Adjust mouse Y to account for center offset and scaling
    'Zoom in on a 20x20 square centred on the mouse pointer.
    Dim srcBounds As New Rectangle(mousePos.X - 10,
                                   mousePos.Y - 10,
                                   20,
                                   20)

    'Fill the destination image.
    Dim destBounds As New Rectangle(Point.Empty, destImage.Size)

    Using g = Graphics.FromImage(destImage)
      'Clear the existing image.
      g.Clear(SystemColors.Control)
      g.InterpolationMode = Drawing2D.InterpolationMode.NearestNeighbor  'If we don't want smooth interpolation of color between zoomed pixels
      'Draw the new image.
      g.DrawImage(srcImage, destBounds, srcBounds, GraphicsUnit.Pixel)
    End Using

    Me.destPictureBox.Refresh()
  End Sub

Regarding ' Dim mousePos = Me.srcPictureBox.PointToClient(Control.MousePosition)
Not sure why the Mouse Position in the control was gotten that way since the mouse position within the client area is passed in the mouse events parameters, so you don't have to poll the MousePosition within the desktop coordinates and convert it to client.

e.Location is the point of where the mouse is, and e.X and e.Y are the X and Y values independently.

how about in scaling calculations for the StretchImage mode...
how can i use your code if the Picturebox1.PictureBoxSizeMode.StretchImage

[passel]

I don't have time to test anything, pretty busy at the moment, but I would assume my first try would be to use sfx and sfy (non-proportional scaling) instead of sf (proportional scaling), and probably not use xl and yt (offsets for proportional scaling).
mousePos.X = CInt(e.X * sfx) 'Adjust Mouse X to account for scaling
mousePos.Y = CInt(e.Y * sfy) 'Adjust mouse Y to account for scaling

If that doesn't work, I would have to revisit at some future date.

[frangine]

I don't have time to test anything, pretty busy at the moment, but I would assume my first try would be to use sfx and sfy (non-proportional scaling) instead of sf (proportional scaling), and probably not use xl and yt (offsets for proportional scaling).
mousePos.X = CInt(e.X * sfx) 'Adjust Mouse X to account for scaling
mousePos.Y = CInt(e.Y * sfy) 'Adjust mouse Y to account for scaling

If that doesn't work, I would have to revisit at some future date.

thank you so much..it's really help (^_____________^)

LOVE YOU GUY'S ..... hehe