We Keep Coding

How to measure length of line which is drawn on image? C#

I would like to write an application that will measure fragments of a specimen examined under a microscope. I thought that the best way would be to capture the image and draw on selected parts of the specimen then count the value of the drawn line in pixels (and later to convert this value into the appropriate unit).
Is there anything that helps solve such issue already implemented or any tool/package or something that allows such calculations?
I will also willingly learn about solutions in other programming languages if they allow to solve this problem in a easier way or just in some way.

This is a very basic example of measuring a segmented line drawn onto an image in winforms.
It uses a PictureBox to display the image, a Label to display the current result and for good measure I added two Buttons the clear all points and to undo/remove the last one.
I collect to pixel positions in a List<Point> :
List<Point> points = new List<Point>();
The two edit buttons are rather simple:
private void btn_Clear_Click(object sender, EventArgs e)
{
points.Clear();
pictureBox1.Invalidate();
show_Length();
}
private void btn_Undo_Click(object sender, EventArgs e)
{
if (points.Any())points.Remove(points.Last());
pictureBox1.Invalidate();
show_Length();
}
Note how I trigger the Paint event by invalidating the image whenever the points collection changes..
The rest of the code is also simple; I call a function to calculate and display the sum of all segment lengths. Note that I need at least two points before I can do that or display the first line..
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
points.Add(e.Location);
pictureBox1.Invalidate();
show_Length();
}
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
if (points.Count > 1) e.Graphics.DrawLines(Pens.Red, points.ToArray());
}
void show_Length()
{
lbl_len.Text = (pointsF.Count) + " point(s), no segments. " ;
if (!(points.Count > 1)) return;
double len = 0;
for (int i = 1; i < points.Count; i++)
{
len += Math.Sqrt((points[i-1].X - points[i].X) * (points[i-1].X - points[i].X)
+ (points[i-1].Y - points[i].Y) * (points[i-1].Y - points[i].Y));
}
lbl_len.Text = (points.Count-1) + " segments, " + (int) len + " pixels";
}
A few notes:
The image is displayed without any zooming. PictureBox has a SizeMode property to make zoomed display simple. In such a case I recommend to store not the direct pixel locations of the mouse but 'unzoomed' values and to use a 'rezoomed' list of values for the display. This way you can zoom in and out and still have the points stick to the right spots.
For this you ought to use a List<PointF> to keep precision.
When zooming e.g. by enlarging the PictureBox, maybe after nesting it in a Panel, make sure to either keep the aspect ratio equal to that of the Image or to do a full calculation to include the extra space left or top; in SizeMode.Normal the image will always sit flush TopLeft but in other modes it will not always do so.
For the calculation of actual i.e. physical distances simply divide by the actual dpi value.
Let's see what we have in action:
Update:
To get a chance to create cloers fits and better precision we obviously need to zoom in on the image.
Here are the necessary changes:
We add a list of 'floating points':
List<PointF> pointsF = new List<PointF>();
And use it to store the un-zoomed mouse positions in the mouse down:
pointsF.Add( scaled( e.Location, false));
We replace all other occurances of points with pointsF.
The Paint event always calculates the scaled points to the current zoom level:
if (pointsF.Count > 1)
{
points = pointsF.Select(x => Point.Round(scaled(x, true))).ToList();
e.Graphics.DrawLines(Pens.Red, points.ToArray());
}
And the function to do the scaling looks like this:
PointF scaled(PointF p, bool scaled)
{
float z = scaled ? 1f * zoom : 1f / zoom;
return new PointF(p.X * z, p.Y * z);
}
It uses a class level variable float zoom = 1f; which gets set along with the picturebox's Clientsize in the Scroll event of a trackbar:
private void trackBar1_Scroll(object sender, EventArgs e)
{
List<float> zooms = new List<float>()
{ 0.1f, 0.2f, 0.5f, 0.75f, 1f, 2, 3, 4, 6, 8, 10};
zoom = zooms[trackBar1.Value];
int w = (int)(pictureBox2.Image.Width * zoom);
int h = (int)(pictureBox2.Image.Height * zoom);
pictureBox2.ClientSize = new Size(w, h);
lbl_zoom.Text = "zoom: " + (zoom*100).ToString("0.0");
}
The picturebox is nested inside a Panel with AutoScroll on. Now we can zoom and scroll while adding segments:

How to draw rectangle on picture box at mouse click coordinates [duplicate]

This question already has answers here:
How to draw rectangle on MouseDown/Move c#
(4 answers)
Closed 7 years ago.
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! :)

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);
}

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.

C# WPF RenderTransform resets on mousedown

I am having a problem with this code. When I start the program Ruler is in the center of the page. When I mousemove when MouseDown is true, the Rectangle (Ruler) is dragable as I want. However, this only works on the first drag. The next time I go to drag it the Ruler jumps back to it's original position, then when you mouse over it the distance from where it was to where it jumped back is calculated and it jumps off the screen as the mouseup event doesn't fire as the rectangle has moved. I basically want to be able to drag the object around the screen however many times I want, but the XStart and YStart need to take the new rendered values on each click.
I think the reason has to do with the e.GetPosition(this).X; as 'this' refers to the Grid that is the rulers parent.
Do I need to commit the RenderTransform to the program? or is there an error in my logic?
It would honestly make more sense if it didn't work at all, but to work perfectly once, then screw up makes no sense.
Here is the code:
private void Rectangle_MouseDown(object sender, MouseButtonEventArgs e)
{
XStart = e.GetPosition(this).X;
YStart = e.GetPosition(this).Y;
Console.WriteLine("X: " + XStart + ", Y: " + YStart);
MouseDown = true;
}
private void Rectangle_MouseMove(object sender, MouseEventArgs e)
{
if(MouseDown)
{
X = e.GetPosition(this).X - XStart;
Y = e.GetPosition(this).Y - YStart;
Ruler.RenderTransform = new TranslateTransform(X, Y);
}
}
private void Ruler_MouseUp(object sender, MouseButtonEventArgs e)
{
MouseDown = false;
}

Looks like Mouse.GetPosition doesn't work when dragging like you would expect.
This example seems relevant, but he uses the DragOver event instead of MouseMove, so I'm not entirely sure if it's the same situation.

How can I convert the mouse cursor coordinates when click on pictureBox are to the screen relative mouse cursor coordinates?

In my program I added this code so when I move my mouse all over the screen I will get the mouse cursor coordinates in real time:
Form1 Load:
private void Form1_Load(object sender, EventArgs e)
{
System.Windows.Forms.Timer t1 = new System.Windows.Forms.Timer();
t1.Interval = 50;
t1.Tick += new EventHandler(timer1_Tick);
t1.Enabled = true;;
}
Then the method that get the mouse position:
public static Point GetMousePosition()
{
var position = System.Windows.Forms.Cursor.Position;
return new Point(position.X, position.Y);
}
Then the timer1 tick event:
private void timer1_Tick(object sender, EventArgs e)
{
label1.Text = string.Format("X={0}, Y={1}", GetMousePosition().X, GetMousePosition().Y);
}
Then I ran some application and moved the mouse over a specific location on the screen where the application window is and I found this coordinates:
358, 913
Now I have in my program a listBox with items each item present application screenshot. And if I click on the pictureBox for example in this case on the BATTLEFIELD 3 area I get the mouse cursor coordinates according to the pictureBox area.
So I did:
Point screenCoordinates;
Point pictureBoxSnapCoordinates;
private void pictureBoxSnap_MouseDown(object sender, MouseEventArgs e)
{
screenCoordinates = pictureBoxSnap.PointToScreen(e.Location);
pictureBoxSnapCoordinates = e.Location;
}
Now when I click in the pictureBox at the same location as I found the coordinates 358, 913 but on the pictureBox so the results are:
screenCoordinates 435, 724
pictureBoxSnapCoordinates 23,423
The screenCoordinates isn't the same coordinates as I found with the mouse move 358, 913 it's not even close. There is a big difference between 358,913 and 437,724

e.Location is relative to the Control's top left corner. If you want to use e.Location to get the screen coordinates, then you have to first do pictureBoxSnap.PointToScreen(Point.Empty); and then offset by the e.Location.
Also, Cursor.Position returns a Point object, so making a new Point(...) is pointless.

I must add, if you are dealing with images, and you need to interact with mouse, and do any task related with offset, scroll, etc, I recommend you that library, it is open source and have a lot of examples and methods that will help you
https://github.com/cyotek/Cyotek.Windows.Forms.ImageBox

Windows Forms calculating delta mouse movement negative values

I'm trying to create a simple app to send mouse input over the network to remotely control another machine, using C# and .NET Framework 4.5
I'm having a weird issue when I try to calculate the mouse cursor delta movement in the MouseMove event: below is a sample code I made to isolate this issue:
public partial class Form1 : Form
{
private Point previousPosition;
public Form1()
{
InitializeComponent();
previousPosition = MousePosition;
}
private void Form1_MouseMove(object sender, MouseEventArgs e)
{
Point mousePos = MousePosition;
int deltaX = (mousePos.X - previousPosition.X);
int deltaY = (mousePos.Y - previousPosition.Y);
label1.Text = "X: " + deltaX.ToString() + " Y: " + deltaY.ToString();
label2.Text = "previousX: " + previousPosition.X + " currentX: " + mousePos.X;
previousPosition = MousePosition;
}
}
I'm storing the previous cursor position in a class variable and on the MouseMove event I calculate the difference in positions and update the previousPosition variable.
Now the weird thing is that this is working only for positive deltas (when I move the mouse to the right).
I put some labels in the form to show in real time the coordinates and, to my surprise, when i move the cursor left, the previous coordinate and the current one always stays the same, resulting in a zero delta!
Am I missing something stupid and obvious here? Why is the previousPosition variable equal to the MousePosition when I move the cursor left, but when moved right it works as expected?

I replicated your issue, and fixed it by adding a check for duplicate move events to the code:
private void Form1_MouseMove(object sender, MouseEventArgs e)
{
Point mousePos = MousePosition;
if (mousePos == previousPosition)
return;
// .. your other code here
previousPosition = mousePos;
}
I'm not sure why there are multiple mouse-move events for the same position only when moving left.