Results 1 to 8 of 8

Thread: Relating mouse position to graphic in picture box

  1. #1

    Thread Starter
    Lively Member
    Join Date
    Sep 2018
    Posts
    111

    Relating mouse position to graphic in picture box

    Hi

    I've drawn a grid on top of an image in a picture box. I'd like to be able to tell which 'square' the mouse cursor is in when it's clicked.

    The picture will need to be zoomed in and out, so the code will need to be able to adjust the co-ordinates as required.

    I've done some googling and cobbled together some code as below to draw the grid - 'PB_Back' is the Picturebox:

    Code:
    Sub draw_grid()
    
            Dim Canvas As Graphics
    
            Canvas = Graphics.FromImage(PB_Back.Image)
    
            Dim GridCol As Color = Color.Black
            Dim GridBrush As New SolidBrush(GridCol)
            Dim GridPen As New Pen(GridCol)
    
            Dim imgwidth As Integer = PB_Back.Image.Width
            Dim imgheight As Integer = PB_Back.Image.Height
    
            Dim x As Integer = 0
            Dim y As Integer = 0
    
            GridPen.Width = 1
    
            For x = 100 To imgwidth Step 100
                Canvas.DrawLine(GridPen, x, 0, x, imgheight)
                x_boxes += 1
            Next
    
            For y = 100 To imgheight Step 100
                Canvas.DrawLine(GridPen, 0, y, imgwidth, y)
                y_boxes += 1
            Next
    
            PB_Back.Invalidate()
    
        End Sub

    What I need is a conversion between the co-ords of the mouse position when it's clicked over the picture and the units used in the image height/width, which I'm having difficulties understanding. I grab the mouse co-ords with the following:

    Code:
    Dim p As Point = PointToClient(MousePosition)
            txt_mousex.Text = (p.X - panel_preview.Left - PB_Back.Left) * _scale
            txt_mousey.Text = (p.Y - panel_preview.Top - PB_Back.Top) * _scale
    Where _scale is the current zoom level of the picture (starts at 1, goes up/down in 0.25 steps). Mouse X and Y are adjusted so they start from the end of the picturebox which is inside a panel.


    At _scale=1 the Picturebox Image width is 5310 wide x 3846 high. The mouse position at the bottom/right edges is (approximately) x=1182, y=836

    I want to work out which square a click is made in and then the plan is to position a graphic at this point and snap it to the top/left of the grid box that was clicked in.

    How can I translate the mouse co-ords so they use the same scale as the image?

    Thanks

  2. #2
    Super Moderator Shaggy Hiker's Avatar
    Join Date
    Aug 2002
    Location
    Idaho
    Posts
    36,246

    Re: Relating mouse position to graphic in picture box

    As long as it's a grid, that will make your life easier, because the grid coordinates of the mouse click will be a simple function. I'm not clear on one point, though. If the PB is zoomed in, is the grid zoomed in, or does it remain the same. For example, if the PB is divided into 9 squares by the grid, and then you zoom in, will there still be 9 squares visible, or will you see just a few squares because the grid zoomed in along with the PB?
    My usual boring signature: Nothing

  3. #3

    Thread Starter
    Lively Member
    Join Date
    Sep 2018
    Posts
    111

    Re: Relating mouse position to graphic in picture box

    Quote Originally Posted by Shaggy Hiker View Post
    As long as it's a grid, that will make your life easier, because the grid coordinates of the mouse click will be a simple function. I'm not clear on one point, though. If the PB is zoomed in, is the grid zoomed in, or does it remain the same. For example, if the PB is divided into 9 squares by the grid, and then you zoom in, will there still be 9 squares visible, or will you see just a few squares because the grid zoomed in along with the PB?
    Hi - thanks for replying.

    The grid is drawn over the image, so when you zoom in the grid will zoom as well.

  4. #4
    Super Moderator Shaggy Hiker's Avatar
    Join Date
    Aug 2002
    Location
    Idaho
    Posts
    36,246

    Re: Relating mouse position to graphic in picture box

    I was thinking that would be easier, but it actually isn't quite.

    One thing to note is that you can find the coordinates of the upper left corner of each grid cell. I suspect that keeping track of that might be convenient. It might not, too, because you can calculate it on the fly (you are calculating where the lines are on the fly, so calculating the upper left coordinate wouldn't be too hard, either), so there might not be any real advantage to holding those coordinates.

    Beyond that, it's a matter of math, and I tend to get that stuff wrong the first time, so I'd want to be playing around with it. For one thing, you have this:
    Code:
    Dim p As Point = PointToClient(MousePosition)
    txt_mousex.Text = (p.X - panel_preview.Left - PB_Back.Left) * _scale
    txt_mousey.Text = (p.Y - panel_preview.Top - PB_Back.Top) * _scale
    What's the client that you are getting the mouse to? You want the point to be in PB coordinates, and I'm not sure what the panel is doing in there. That seems wrong, to me, but are the coordinates in Panel coordinates, not PB coordinates?

    Because I'm never fully clear which coordinates I'm looking at, I'd first want to put a breakpoint in the second line of that, then click in the upper left corner of the PB. The point should be really close to 0,0. If it is not, then you have the coordinates from the wrong context.

    If you can calculate where PB 0,0 will be in the image (it would be image 0,0 at fully zoomed out, then somewhere else as you zoomed in), then you can calculate where any point will be in the image.
    My usual boring signature: Nothing

  5. #5

    Thread Starter
    Lively Member
    Join Date
    Sep 2018
    Posts
    111

    Re: Relating mouse position to graphic in picture box

    Quote Originally Posted by Shaggy Hiker View Post
    I was thinking that would be easier, but it actually isn't quite.

    One thing to note is that you can find the coordinates of the upper left corner of each grid cell. I suspect that keeping track of that might be convenient. It might not, too, because you can calculate it on the fly (you are calculating where the lines are on the fly, so calculating the upper left coordinate wouldn't be too hard, either), so there might not be any real advantage to holding those coordinates.

    Beyond that, it's a matter of math, and I tend to get that stuff wrong the first time, so I'd want to be playing around with it. For one thing, you have this:
    Code:
    Dim p As Point = PointToClient(MousePosition)
    txt_mousex.Text = (p.X - panel_preview.Left - PB_Back.Left) * _scale
    txt_mousey.Text = (p.Y - panel_preview.Top - PB_Back.Top) * _scale
    What's the client that you are getting the mouse to? You want the point to be in PB coordinates, and I'm not sure what the panel is doing in there. That seems wrong, to me, but are the coordinates in Panel coordinates, not PB coordinates?

    Because I'm never fully clear which coordinates I'm looking at, I'd first want to put a breakpoint in the second line of that, then click in the upper left corner of the PB. The point should be really close to 0,0. If it is not, then you have the coordinates from the wrong context.

    If you can calculate where PB 0,0 will be in the image (it would be image 0,0 at fully zoomed out, then somewhere else as you zoomed in), then you can calculate where any point will be in the image.
    Sorry for the late reply - got distracted with somew urgent stuff that came in.

    Thanks for your detailed response.

    Regarding the panel, that's there because it seemed the best way when I was panning the image around. I can try it without this to see if it makes things easier. That may be why I'm getting confused between coords if I'm looking at the panel and PB.

    I'll have another play with it.

  6. #6
    Super Moderator Shaggy Hiker's Avatar
    Join Date
    Aug 2002
    Location
    Idaho
    Posts
    36,246

    Re: Relating mouse position to graphic in picture box

    I always have to play around with some known point when it comes to coordinates. Different methods give you mouse coordinates in different coordinate systems, either for the control or for the screen, and I never remember which it will be, even if I think I know. So, the first thing I do when I have an issue is click somewhere close to the upper left corner, and see whether the coordinates are pretty close to (0,0).
    My usual boring signature: Nothing

  7. #7

    Thread Starter
    Lively Member
    Join Date
    Sep 2018
    Posts
    111

    Re: Relating mouse position to graphic in picture box

    Quote Originally Posted by Shaggy Hiker View Post
    I always have to play around with some known point when it comes to coordinates. Different methods give you mouse coordinates in different coordinate systems, either for the control or for the screen, and I never remember which it will be, even if I think I know. So, the first thing I do when I have an issue is click somewhere close to the upper left corner, and see whether the coordinates are pretty close to (0,0).
    I think you are spot-on with taking a 'getting the basics right first' approach.

    I've just started again and am testing each bit as I go and I'm making a bit of progress now. Long way to go!

  8. #8
    Super Moderator Shaggy Hiker's Avatar
    Join Date
    Aug 2002
    Location
    Idaho
    Posts
    36,246

    Re: Relating mouse position to graphic in picture box

    That's the only way I know how to do it. Graphics are not my thing, though I've ended up doing a fair amount with them. I generally start by having things draw incorrectly, or in the wrong place, or both, or not at all, at which point I have to find a way to get SOMETHING to draw where I can see it, and do a fair amount of stepping through the code, before I get around to understanding what is going on.
    My usual boring signature: Nothing

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width