Click here to Skip to main content
Click here to Skip to main content

Mouse Position over Image in a PictureBox

, 18 Mar 2008
Rate this:
Please Sign up or sign in to vote.
A custom control derived from the PictureBox control that demonstrates how to obtain the position of the mouse relative to the Image

Introduction

When using the default PictureBox in a Windows.Forms, it is often helpful to know what relative pixel of the image the mouse is currently over. Since the position returned in mouse events for the control are relative to the control's base, the position over the image can be vastly different, depending on how the SizeMode property is set. This class helps resolve these differences.

Background

In one of my applications, I needed to be able to find out the location of the mouse relative to the image, but my SizeMode was set to Zoom. In this mode, the image constantly rescales itself to maintain the proper aspect ratio that will fit into the area of the control. As such, I needed to be able to safely translate the point.

Determining the Position

There are five different size modes that the PictureBox control can be set to:

  • Normal
  • AutoSize
  • CenterImage
  • StretchImage
  • Zoom

In the Normal mode, the image is located at the top left corner and is not scaled or skewed, so we can simply return the point relative to the control.

In the AutoSize mode, the control itself is resized to fit the image (if possible), and the resulting image is not scaled or skewed, so we can simply return the point relative to the control again.

In the CenterImage mode, the image is displayed in the center of the control. If the image is smaller than the control, it is padded equally to center it. If the image is larger than the control, the image is cropped equally. The following shows how to determine the location relative to the image:

/// <span class="code-SummaryComment"><summary></span>
/// Gets the mouse position over the image when the <span class="code-SummaryComment"><see cref="PictureBox">PictureBox's</span>
/// <span class="code-SummaryComment"></see> <see cref="PictureBox.SizeMode">SizeMode</see> is set to Center</span>
/// <span class="code-SummaryComment"></summary></span>
/// <span class="code-SummaryComment"><param name="coordinates">Point to translate</param></span>
/// <span class="code-SummaryComment"><returns>A point relative to the top left corner of the </span>
/// <span class="code-SummaryComment"><see cref="PictureBox.Image">Image</see></span>
/// If the Image is null, no translation is performed
/// <span class="code-SummaryComment"></returns></span>
protected Point TranslateCenterImageMousePosition(Point coordinates)
{
    // Test to make sure our image is not null
    if(Image==null) return coordinates;
    // First, get the top location (relative to the top left of the control) 
    // of the image itself
    // To do this, we know that the image is centered, so we get the difference in size 
    // (width and height) of the image to the control
    int diffWidth = Width - Image.Width;
    int diffHeight = Height - Image.Height;
    // We now divide in half to accommodate each side of the image
    diffWidth /= 2;
    diffHeight /= 2;
    // Finally, we subtract this number from the original coordinates
    // In the case that the image is larger than the picture box, this still works
    coordinates.X -= diffWidth;
    coordinates.Y -= diffHeight;
    return coordinates;
}  

In the StretchImage mode, the image is stretched or compressed, independently across axis, to take up the entire area of the control. To accommodate this, we must determine the ratio of the skew and apply it to the point:

/// <span class="code-SummaryComment"><summary></span>
/// Gets the mouse position over the image when the <span class="code-SummaryComment"><see cref="PictureBox">PictureBox's</span>
/// <span class="code-SummaryComment"></see> <see cref="PictureBox.SizeMode">SizeMode</see> is set to StretchImage</span>
/// <span class="code-SummaryComment"></summary></span>
/// <span class="code-SummaryComment"><param name="coordinates">Point to translate</param></span>
/// <span class="code-SummaryComment"><returns>A point relative to the top left corner of the </span>
/// <span class="code-SummaryComment"><see cref="PictureBox.Image">Image</see></span>
/// If the Image is null, no translation is performed
/// <span class="code-SummaryComment"></returns></span>
protected Point TranslateStretchImageMousePosition(Point coordinates)
{
    // test to make sure our image is not null
    if (Image == null) return coordinates;
    // Make sure our control width and height are not 0
    if (Width == 0 || Height == 0) return coordinates;
    // First, get the ratio (image to control) the height and width
    float ratioWidth = (float)Image.Width/Width;
    float ratioHeight = (float)Image.Height / Height;
    // Scale the points by our ratio
    float newX = coordinates.X;
    float newY = coordinates.Y;
    newX *= ratioWidth;
    newY *= ratioHeight;
    return new Point((int)newX, (int)newY);
}

In the last mode, Zoom, the image is scaled evenly across axis in such a way that the entire image is displayed in the control, centered when appropriate. To manage this method, we first need to determine what our limiting dimension is (height or width). After that, we need to determine the padding and the scaling to be applied to the point:

/// <span class="code-SummaryComment"><summary></span>
/// Gets the mouse position over the image when the <span class="code-SummaryComment"><see cref="PictureBox">PictureBox's</span>
/// <span class="code-SummaryComment"></see> <see cref="PictureBox.SizeMode">SizeMode</see> is set to Zoom</span>
/// <span class="code-SummaryComment"></summary></span>
/// <span class="code-SummaryComment"><param name="coordinates">Point to translate</param></span>
/// <span class="code-SummaryComment"><returns>A point relative to the top left corner of the </span>
/// <span class="code-SummaryComment"><see cref="PictureBox.Image">Image</see></span>
/// If the Image is null, no translation is performed
/// <span class="code-SummaryComment"></returns></span>
protected Point TranslateZoomMousePosition(Point coordinates)
{
    // test to make sure our image is not null
    if (Image == null) return coordinates;
    // Make sure our control width and height are not 0 and our 
    // image width and height are not 0
    if (Width == 0 || Height == 0|| Image.Width==0||Image.Height==0) return coordinates;
    // This is the one that gets a little tricky. Essentially, need to check 
    // the aspect ratio of the image to the aspect ratio of the control
    // to determine how it is being rendered
    float imageAspect = (float)Image.Width / Image.Height;
    float controlAspect = (float)Width / Height;
    float newX = coordinates.X;
    float newY = coordinates.Y;
    if(imageAspect>controlAspect)
    { 
        // This means that we are limited by width, 
        // meaning the image fills up the entire control from left to right
        float ratioWidth = (float)Image.Width / Width;
        newX *= ratioWidth;
        float scale = (float)Width / Image.Width;
        float displayHeight = scale * Image.Height;
        float diffHeight = Height - displayHeight;
        diffHeight /= 2;
        newY -= diffHeight;
        newY /= scale;
    }
    else
    {
        // This means that we are limited by height, 
        // meaning the image fills up the entire control from top to bottom
        float ratioHeight = (float)Image.Height / Height;
        newY *= ratioHeight;
        float scale = (float)Height / Image.Height;
        float displayWidth = scale * Image.Width;
        float diffWidth = Width - displayWidth;
        diffWidth /= 2;
        newX -= diffWidth;
        newX /= scale;
    }
    return new Point((int)newX, (int)newY);
}

Using the Code

The attached class utilizes these methods to determine the location of the point within the image. Additionally, the class supplies a couple methods and properties to obtain the Point regardless of the display mode (by checking the mode and calling the appropriate method) and an event that is called if the mouse is moved over the image.

License

This article, along with any associated source code and files, is licensed under The MIT License

About the Author

bambitlaw
CEO Bambit Technolgoies
United States United States
No Biography provided

Comments and Discussions

 
GeneralDoes not work for me PinmemberBuggingMe23-Mar-10 9:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 18 Mar 2008
Article Copyright 2007 by bambitlaw
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid