How to draw rectangle on picture box at mouse click coordinates

Question

I'm trying to create a windows forms application in which, when the user clicks anywhere on a picture box, a rectangle appears at the position where the image was clicked.

However, if I click anywhere on the image, the rectangle will appear at some random position regardless of where I clicked. It can appear either near or far away from the mouse click, and in some cases it never goes beyond the left half of the picture box.

May I have some guidance on how to resolve this issue? Specifically, I want the position where I clicked to be the center of the rectangle.

Thank you!

This is my code for reference:

private void pbImage_Click(object sender, EventArgs e)
    {
        //Note: pbImage is the name of the picture box used here.
        var mouseEventArgs = e as MouseEventArgs;
        int x = mouseEventArgs.Location.X;
        int y = mouseEventArgs.Location.Y;

        // We first cast the "Image" property of the pbImage picture box control
        // into a Bitmap object.
        Bitmap pbImageBitmap = (Bitmap)(pbImage.Image);
        // Obtain a Graphics object from the Bitmap object.
        Graphics graphics = Graphics.FromImage((Image)pbImageBitmap);

        Pen whitePen = new Pen(Color.White, 1);
        // Show the coordinates of the mouse click on the label, label1.
        label1.Text = "X: " + x + " Y: " + y;
        Rectangle rect = new Rectangle(x, y, 200, 200);

        // Draw the rectangle, starting with the given coordinates, on the picture box.
        graphics.DrawRectangle(whitePen, rect);

        // Refresh the picture box control in order that
        // our graphics operation can be rendered.
        pbImage.Refresh();

        // Calling Dispose() is like calling the destructor of the respective object.
        // Dispose() clears all resources associated with the object, but the object still remains in memory
        // until the system garbage-collects it.
        graphics.Dispose();
    }

UPDATE 12.55am, 16/8/2015 - I know why! The SizeMode property of the pictureBox was set to StretchImage. Changed it back to Normal mode and it worked fine. Not exactly sure why this is so, I'll definitely look into it.

To those who have replied, thank you so much for your help! :)

score 2 · Accepted Answer · answered Aug 15 '15 at 15:33

The first two arguments to the Rectangle constructor are the top-left (not center) coordinates.

And handle the mouse and paint events separately:

int mouseX, mouseY;

private void pbImage_MouseDown(object sender, MouseEventArgs e)
{
  mouseX = e.X;
  mouseY = e.Y;
  pbImage.Refresh();
}

private void pbImage_Paint(object sender, PaintEventArgs e)
{
  //... your other stuff
  Rectangle rect = new Rectangle(mouseX - 100, mouseY - 100, 200, 200);
  e.Graphics.DrawRectangle(whitePen, rect);
}

score 0 · Answer 2 · answered Aug 15 '15 at 15:28

0

You are casting EventArgs to MouseEventArgs, I think that is incorrect. Are you tried with MouseDown or MouseUp events of the picture control? Those events provides you the information you need.

answered Aug 15 '15 at 15:28

mnieto

3,744
4
21
37

How to draw rectangle on picture box at mouse click coordinates

2 Answers2