Mouse Position over Image in a PictureBox

• Download source - 2.46 KB

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.