How To Get Mouse Click Coordinates Of An Image Inside A Picture Box(Not Picture Box Mouse Click Coordinates But Image Pixel Coordinates) - winforms

I have been trying to place a marker at the mouse location on an image when the user clicks on the image box, the problem is that the marker has a certain offset which is exponential, and I think it's because the image size is not equal to the image box size. I also want to place the marker after zooming in on the image.
This is a windows forms project and it uses emgucv, OpenCV, and c++/cli.
Note I place the marker using an OpenCV function by passing the mouse click coordinates.
Can anyone please help?.

I found the solution in this article https://www.codeproject.com/Articles/20923/Mouse-Position-over-Image-in-a-PictureBox you need to translate the PictureBox coordinates to image coordinates however, it depends on the size mode of the PictureBox.

I found a simple way to get mouse click coordinates with respect to a image coordinate when using ImageBox (add Emgu.CV.UI via Nuget). Add MouseClick event to your ImageBox and put that subroutine as below
private void imageBox1_MouseClick(object sender, MouseEventArgs e)
{
var ib = (ImageBox)sender;
var x_offset = ib.HorizontalScrollBar.Value;
var y_offset = ib.VerticalScrollBar.Value;
var x = e.Location.X;
var y = e.Location.Y;
var zoom = ib.ZoomScale;
int X = (int)((x / zoom) + x_offset);
int Y = (int)((y / zoom) + y_offset);
//MessageBox.Show(String.Format("{0}, {1}", X, Y));
}

Related

How To Draw clickable Polygons

I am developing a winforms project. What I need is, draw a clickable polygon on picturebox. Or draw a polygon and detect click if mouse is in polygon. I can draw a polygon but however I can't discover the click part.
Basically, take coordinates and add to array when I click on panel which has picturebox with image. And draw the polygon when clicked 7 times.
But I don't have a idea how to detect if mouse click is in polygon? Or we can say, how to convert these polygons to buttons?
private void panelPictureBoxBuilding_MouseUp(object sender, MouseEventArgs e)
{
if (startMoving)
{
Point coord = new Point(e.Location.X, e.Location.Y);
coordinates.Add(coord);
if (coordinates.Count == 7)
{
Graphics g = pbBuilding.CreateGraphics();
g.DrawPolygon(Pens.Black, coordinates.ToArray());
}
}
}
EDIT : Also how can i start drawing polygon since first mouse click? Current code is drawing polygon when clicked 7 times.
EDIT2 : I got it. Solution is in the below:
GraphicsPath path = new GraphicsPath(FillMode.Winding);
path.AddPolygon(coordinates.ToArray());
// Its mouse click event, after here
if(path.IsVisible(e.Location.X, e.Location.Y))
{
//Do something
}

How to create a "rubber rectangle selection" in the bing maps

I am using Bing maps WPF control to render maps. My requirement is allow user to create a rectangle and based on the co-ordinates of the rectangle drawn I need to fetch the lat, long information.
I achieved by the following way.
private MapPolygon boundingRectangle;
My mouse_leftButtonDown code looks like
Point point = e.GetPosition(this);
this.mouseCordinates = new PointCollection();
this.mouseCordinates.Add(point);
mouse_leftButtonUp code looks like
var point = e.GetPosition(this);
this.mouseCordinates.Add(point);
var pt1 = this.mouseCordinates[0];
var pt3 = this.mouseCordinates[1];
var pt2 = new System.Windows.Point(pt3.X, pt1.Y);
var pt4 = new System.Windows.Point(pt1.X, pt3.Y);
var loc1 = this.ViewportPointToLocation(pt1);
var loc2 = this.ViewportPointToLocation(pt2);
var loc3 = this.ViewportPointToLocation(pt3);
var loc4 = this.ViewportPointToLocation(pt4);
this.Children.Remove(this.boundingRectangle);
this.boundingRectangle = new MapPolygon
{
Stroke = new SolidColorBrush(Colors.Chocolate),
StrokeThickness = 2,
Locations = new LocationCollection()
{
loc1,
loc2,
loc3,
loc4
}
};
this.BoundingBoxCoordinates = this.boundingRectangle.Locations;
this.Children.Add(this.boundingRectangle);
So on mouse up I got a shape which user drawn. But while drawing (I mean while dragging the mouse since no mouse movement event is handled) user is not able to see anything on the map. Only on the mouse up user can see the shape they drawn because the layer children is added after mouse up.
What I want is "rubber selection" rectangle meaning while drawing the shape using mouse drag user should see the shape. It should be lively.
As I am new to WPF and map I am still struggling to figure this out.
Please help me.
I've done a lot of work with the Bing Maps and the WPF control. I've put together a code sample that shows how to draw rectangles on the map using both the mouse and touch. The sample is a bit too long for a forum post. I've uploaded it to MSDN here: https://code.msdn.microsoft.com/Draw-Rectangles-on-Bing-ce083d0e

How can I hide the cursor in transparent WPF window?

How can I hide the cursor in a WPF window that is fully transparent (alpha=0).
I tried the usual
this.Cursor = System.Windows.Input.Cursors.None;
and it works on areas with content where alpha > 0 but when the cursor moves to an area - in the same window - where the background is fully transparent the cursor re-appears.
I also added
System.Windows.Input.Mouse.OverrideCursor = System.Windows.Input.Cursors.None;
but that didn't help.
I realize that setting the alpha of background to 1 might be a solution but for various reasons this creates other problems...
Maybe as a work-around you can create a tiny non-transparent area somewhere, and move the mouse there just before hiding it:
// Coordinates of your non-transparent area:
var x = 10;
var y = 10;
System.Windows.Forms.Cursor.Position = new System.Drawing.Point(x, y);
this.Cursor = System.Windows.Input.Cursors.None;

How do I get the co-ordinates of a mouse click on a transformed WPF control?

I'm playing with a simple WPF application. One part of it includes a grid containing several controls. The grid is rotated using a LayoutTransform and a RotateTransform. I need to get the co-ordinates of a mouse-click relative to the top-left of the grid, taking the rotation into account.
To be clear, let's say I have a single drawing surface within the grid and no transform had been applied. I then click at location X = 20, Y = 10 and put a dot on the drawing surface at that point. If the grid is now rotated by 30 degrees and I click on the dot (which is also moved by the rotation), the click position should still be X = 20, Y = 10.
MouseEventArgs has a GetPosition method that takes a UIElement. It returns the position of the mouse event relative to the specified element. So if you want to transform a mouse click into coordinates of a grid, pass that grid to the GetPosition method.

How to draw a rectangle in WinForm app in the correct location

I have a WinForm app that has an image displayed in a PictureBox that has the added functionality of allowing a user to draw a rectangle on the image by clicking and dragging.
The Location, Height and Width of the rectangle are saved to disk.
When the image is viewed again I would like to automatically redraw that rectangle in the same position on the image.
When I redraw it, however, the Height and Width are fine but the location is always off.
The location is being captured in the MouseDown Event like so
private void pbSample_MouseDown(object Sender, MouseEventArgs e)
{
if (SelectMode)
{
StartLocation.X = e.X;
StartLocation.Y = e.Y;
//later on these are saved as the location of the rectangle
}
}
And I am redrawing it like so
public void DrawSelectedArea(Rectangle rect)
{
Graphics g = this.pbSample.CreateGraphics();
Pen p = new Pen(Brushes.Black);
g.DrawRectangle(p, rect);
}
Given the location from the MouseEventArgs captured during the MouseDown Event how can I calculate the correct location to redraw my rectangle?
The mouse-click points you're capturing are probably relative to the Form rather than the picture box. You either need to make sure you're capturing the coordinates properly or offset them.
Could you include a screenshot as an example?

Resources