Relating mouse position to graphic in picture box

[Precision999]

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:

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:

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

[Shaggy Hiker]

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?

[Precision999]

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.

[Shaggy Hiker]

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:

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.

[Precision999]

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:

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.

[Shaggy Hiker]

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).

[Precision999]

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!

[Shaggy Hiker]

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.