We Keep Coding

Zoom and translate an Image from the mouse location

Issue: Attempting to zoom (scale) an Image from (or at the) mouse location using transforms in the Paint event to translate bitmap origin to mouse location, then scale the Image and translate its origin back.
The Image jumps and fails to scale from the relocated origin when translating the mouse location.
Rotate, scale, and pan function correctly without translating to the the mouse location.
Running on .Net 4.7.2, using Visual Studio in Windows 10 1909
v18363.778
The relevant code blocks:
private void trackBar1_Scroll(object sender, EventArgs e)
{
// Get rotation angle
ang = trackBar1.Value;
pnl1.Invalidate();
}
private void pnl1_MouseWheel(object sender, MouseEventArgs e)
{
// Get mouse location
mouse = e.location;
// Get new scale (zoom) factor
zoom = (float)(e.Delta > 0 ? zoom * 1.05 : zoom / 1.05);
pnl1.Invalidate();
}
private void pnl1_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button != MouseButtons.Left) return;
pan = true;
mouX = e.X;
mouY = e.Y;
oldX = imgX;
oldY = imgY;
}
private void pnl1_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button != MouseButtons.Left || !pan) return;
// Coordinates of panned image
imgX = oldX + e.X - mouX;
imgY = oldY + e.Y - mouY;
pnl1.Invalidate();
}
private void pnl1_MouseUp(object sender, MouseEventArgs e)
{
pan = false;
}
private void pnl1_Paint(object sender, PaintEventArgs e)
{
// Apply rotation angle # center of bitmap
e.Graphics.TranslateTransform(img.Width / 2, img.Height / 2);
e.Graphics.RotateTransform(ang);
e.Graphics.TranslateTransform(-img.Width / 2, -img.Height / 2);
// Apply scaling factor - focused # mouse location
e.Graphics.TranslateTransform(mouse.X, mouse.Y, MatrixOrder.Append);
e.Graphics.ScaleTransform(zoom, zoom, MatrixOrder.Append);
e.Graphics.TranslateTransform(-mouse.X, -mouse.Y, MatrixOrder.Append);
// Apply drag (pan) location
e.Graphics.TranslateTransform(imgX, imgY, MatrixOrder.Append);
// Draw "bmp" # location
e.Graphics.DrawImage(img, 0, 0);
}

A few suggestions and a couple of tricks.
Not exactly tricks, just some methods to speed up the calculations when more than one graphic transformation is in place.
Divide and conquer: split the different graphics effects and transformations in different, specialized, methods that do one thing. Then design in a way that makes it possible for these methods to work together when needed.
Keep it simple: when Graphics objects need to accumulate more than a couple of transformations, the order in which Matrices are stacked can cause misunderstandings. It's simpler (and less prone to generate weird outcomes) to calculate some generic transformations (translate and scale, mostly) beforehand, then let GDI+ render already pre-cooked objects and shapes.
Here, only Matrix.RotateAt and Matrix.Multiply are used.
Some notes about Matrix transformations here: Flip the GraphicsPath
Use the right tools: for example, a Panel used as canvas is not exactly the best choice. This Control is not double-buffered; this feature can be enabled, but the Panel class is not meant for drawing, while a PictureBox (or a non-System flat Label) supports it on its own.
Some more notes here: How to apply a fade transition effect to Images
The sample code shows 4 zoom methods, plus generates rotation transformations (which work side-by-side, don't accumulate).
The Zoom modes are selected using an enumerator (private enum ZoomMode):
Zoom modes:
ImageLocation: Image scaling is performed in-place, keeping the current Location on the canvas in a fixed position.
CenterCanvas: while the Image is scaled, it remains centered on the Canvas.
CenterMouse: the Image is scaled and translated to center itself on the current Mouse location on the Canvas.
MouseOffset: the Image is scaled and translated to maintain a relative position determined by the initial location of the Mouse pointer on the Image itself.
You can notice that the code simplifies all the calculations, applying translations exclusively relative to the Rectangle that defines the current Image bounds and only in relation to the Location of this shape.
The Rectangle is only scaled when the calculation needs to preemptively determine what the Image size will be after the Mouse Wheel has generated the next Zoom factor.
Visual sample of the implemented functionalities:
Sample code:
canvas is the Custom Control, derived from PictureBox (you can find its definition at the bottom). This control is added to the Form in code, here. Modify as needed.
trkRotationAngle is the TrackBar used to define the current rotation of the Image. Add this control to the Form in the designer.
radZoom_CheckedChanged is the event handler of all the RadioButtons used to set the current Zoom Mode. The value these Controls set is assigned in their Tag property. Add these controls to the Form in the designer.
using System.Drawing;
using System.Drawing.Drawing2D;
using System.IO;
using System.Windows.Forms;
public partial class frmZoomPaint : Form
{
private float rotationAngle = 0.0f;
private float zoomFactor = 1.0f;
private float zoomStep = .05f;
private RectangleF imageRect = RectangleF.Empty;
private PointF imageLocation = PointF.Empty;
private PointF mouseLocation = PointF.Empty;
private Bitmap drawingImage = null;
private PictureBoxEx canvas = null;
private ZoomMode zoomMode = ZoomMode.ImageLocation;
private enum ZoomMode
{
ImageLocation,
CenterCanvas,
CenterMouse,
MouseOffset
}
public frmZoomPaint()
{
InitializeComponent();
string imagePath = [Path of the Image];
drawingImage = (Bitmap)Image.FromStream(new MemoryStream(File.ReadAllBytes(imagePath)));
imageRect = new RectangleF(Point.Empty, drawingImage.Size);
canvas = new PictureBoxEx(new Size(555, 300));
canvas.Location = new Point(10, 10);
canvas.MouseWheel += canvas_MouseWheel;
canvas.MouseMove += canvas_MouseMove;
canvas.MouseDown += canvas_MouseDown;
canvas.MouseUp += canvas_MouseUp;
canvas.Paint += canvas_Paint;
Controls.Add(canvas);
}
private void canvas_MouseWheel(object sender, MouseEventArgs e)
{
mouseLocation = e.Location;
float zoomCurrent = zoomFactor;
zoomFactor += e.Delta > 0 ? zoomStep : -zoomStep;
if (zoomFactor < .10f) zoomStep = .01f;
if (zoomFactor >= .10f) zoomStep = .05f;
if (zoomFactor < .0f) zoomFactor = zoomStep;
switch (zoomMode) {
case ZoomMode.CenterCanvas:
imageRect = CenterScaledRectangleOnCanvas(imageRect, canvas.ClientRectangle);
break;
case ZoomMode.CenterMouse:
imageRect = CenterScaledRectangleOnMousePosition(imageRect, e.Location);
break;
case ZoomMode.MouseOffset:
imageRect = OffsetScaledRectangleOnMousePosition(imageRect, zoomCurrent, e.Location);
break;
default:
break;
}
canvas.Invalidate();
}
private void canvas_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button != MouseButtons.Left) return;
mouseLocation = e.Location;
imageLocation = imageRect.Location;
canvas.Cursor = Cursors.NoMove2D;
}
private void canvas_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button != MouseButtons.Left) return;
imageRect.Location =
new PointF(imageLocation.X + (e.Location.X - mouseLocation.X),
imageLocation.Y + (e.Location.Y - mouseLocation.Y));
canvas.Invalidate();
}
private void canvas_MouseUp(object sender, MouseEventArgs e) =>
canvas.Cursor = Cursors.Default;
private void canvas_Paint(object sender, PaintEventArgs e)
{
var drawingRect = GetDrawingImageRect(imageRect);
using (var mxRotation = new Matrix())
using (var mxTransform = new Matrix()) {
e.Graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
e.Graphics.PixelOffsetMode = PixelOffsetMode.Half;
mxRotation.RotateAt(rotationAngle, GetDrawingImageCenterPoint(drawingRect));
mxTransform.Multiply(mxRotation);
e.Graphics.Transform = mxTransform;
e.Graphics.DrawImage(drawingImage, drawingRect);
}
}
private void trkRotationAngle_ValueChanged(object sender, EventArgs e)
{
rotationAngle = trkAngle.Value;
canvas.Invalidate();
canvas.Focus();
}
private void radZoom_CheckedChanged(object sender, EventArgs e)
{
var rad = sender as RadioButton;
if (rad.Checked) {
zoomMode = (ZoomMode)int.Parse(rad.Tag.ToString());
}
canvas.Focus();
}
#region Drawing Methods
public RectangleF GetScaledRect(RectangleF rect, float scaleFactor) =>
new RectangleF(rect.Location,
new SizeF(rect.Width * scaleFactor, rect.Height * scaleFactor));
public RectangleF GetDrawingImageRect(RectangleF rect) =>
GetScaledRect(rect, zoomFactor);
public PointF GetDrawingImageCenterPoint(RectangleF rect) =>
new PointF(rect.X + rect.Width / 2, rect.Y + rect.Height / 2);
public RectangleF CenterScaledRectangleOnCanvas(RectangleF rect, RectangleF canvas)
{
var scaled = GetScaledRect(rect, zoomFactor);
rect.Location = new PointF((canvas.Width - scaled.Width) / 2,
(canvas.Height - scaled.Height) / 2);
return rect;
}
public RectangleF CenterScaledRectangleOnMousePosition(RectangleF rect, PointF mousePosition)
{
var scaled = GetScaledRect(rect, zoomFactor);
rect.Location = new PointF(mousePosition.X - (scaled.Width / 2),
mousePosition.Y - (scaled.Height / 2));
return rect;
}
public RectangleF OffsetScaledRectangleOnMousePosition(RectangleF rect, float currentZoom, PointF mousePosition)
{
var currentRect = GetScaledRect(imageRect, currentZoom);
if (!currentRect.Contains(mousePosition)) return rect;
float scaleRatio = currentRect.Width / GetScaledRect(rect, zoomFactor).Width;
PointF mouseOffset = new PointF(mousePosition.X - rect.X, mousePosition.Y - rect.Y);
PointF scaledOffset = new PointF(mouseOffset.X / scaleRatio, mouseOffset.Y / scaleRatio);
PointF position = new PointF(rect.X - (scaledOffset.X - mouseOffset.X),
rect.Y - (scaledOffset.Y - mouseOffset.Y));
rect.Location = position;
return rect;
}
#endregion
}
The simple PictureBoxEx custom control (modify and extend as needed):
This PictureBox is selectable, so it can be focused, with a Mouse click
using System.ComponentModel;
using System.Drawing;
using System.Windows.Forms;
[DesignerCategory("Code")]
public class PictureBoxEx : PictureBox
{
public PictureBoxEx() : this (new Size(200, 200)){ }
public PictureBoxEx(Size size) {
SetStyle(ControlStyles.Selectable | ControlStyles.UserMouse, true);
BorderStyle = BorderStyle.FixedSingle;
Size = size;
}
}

#Jimi: Thank you for the detailed information - very useful for visualizing the concepts involved in the graphics manipulations. I had arrived at a functioning solution (see code below) however, your code utilizes steps with greater efficiency. Admittedly, my code is developed with more of an intent to learn the mechanics of image manipulation - as I am still at the early part of the learning curve. Nonetheless, your illustration of the mechanics and techniques is extremely helpful.
using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
namespace ZoomImage
{
public partial class Form1 : Form
{
Image img;
Bitmap bmp;
float ang = 0;
float zoom = 1;
bool pan;
bool? ctr = false;
Point mcurrent;
PointF mouse;
PointF image;
PointF _image;
PointF rotate;
public Form1()
{
InitializeComponent();
MouseWheel += mouseWheel;
img = Image.FromFile(#"C:\testimage.jpg");
bmp = new Bitmap(img);
// Set initial scale to fit canvas window
float wRatio = (float)pbx.Width / (float)img.Width;
float hRatio = (float)pbx.Height / (float)img.Height;
zoom = Math.Min(wRatio, hRatio);
image.X = (pbx.Width - zoom * img.Width) / 2;
image.Y = (pbx.Height - zoom * img.Height) / 2;
}
private void label()
{
string _imgX = string.Format("{0:000}", image.X);
string _imgY = string.Format("{0:000}", image.Y);
lbl1.Text = "Location: " + _imgX + ", " + _imgY + "\r\nRotation: " + ang + "\r\nZoom: " + zoom + "\r\nMouse: " + mcurrent.X + ", " + mcurrent.Y;
}
private void btnRotate_Click(object sender, EventArgs e)
{
if (ModifierKeys == Keys.Control)
{
string msg = "Set center of rotation point:\r\n\nMove mouse to desired center ";
msg += "of rotation then hold \"Alt\" and left-click.\r\n\n";
msg += "To restore center of rotation to center of image:\r\n\nHold \"Shift\" and";
msg += " click \"Rotate\".";
MessageBox.Show(msg,"Change center of rotation");
ctr = null;
pbx.Focus();
return;
}
else if (ModifierKeys == Keys.Shift)
{
ctr = false;
return;
}
ang = ang == 270 ? 0 : ang += 90;
if (ang > 360) ang -= 360;
trackBar1.Value = (int)ang;
ctr = ctr == null ? false : ctr;
if (ctr == false) rotate = new PointF(img.Width / 2, img.Height / 2);
pbx.Invalidate();
}
private void trackBar1_Scroll(object sender, EventArgs e)
{
ang = trackBar1.Value;
if (ctr == false) rotate = new PointF(img.Width / 2, img.Height / 2);
pbx.Invalidate();
}
private void mouseWheel(object sender, MouseEventArgs e)
{
mouse = new PointF(e.X - image.X, e.Y - image.Y);
float zinc = 0.05f;
float zfac = 1 + zinc;
zoom = (float)(e.Delta > 0 ? zoom * (zfac) : zoom / (zfac));
// Adjust "img" (bitmap) orgin to maintain fixed focus # mouse location
if (e.Delta > 0)
{
image.X -= zinc * mouse.X;
image.Y -= zinc * mouse.Y;
}
else
{
image.X += (1 - 1 / (zfac)) * mouse.X;
image.Y += (1 - 1 / (zfac)) * mouse.Y;
}
image = new PointF(image.X, image.Y);
pbx.Invalidate();
}
private void mouseDown(object sender, MouseEventArgs e)
{
if (e.Button != MouseButtons.Left) return;
if (ModifierKeys == Keys.Alt && ctr == null)
{
ctr = true;
rotate = new PointF((e.X - image.X) / zoom, (e.Y - image.Y) / zoom);
return;
}
pan = true;
mouse = e.Location;
_image = image;
}
private void mouseMove(object sender, MouseEventArgs e)
{
mcurrent = e.Location;
label();
if (e.Button != MouseButtons.Left || !pan) return;
image.X = _image.X + e.X - mouse.X;
image.Y = _image.Y + e.Y - mouse.Y;
image = new PointF(image.X, image.Y);
pbx.Invalidate();
}
private void mouseUp(object sender, MouseEventArgs e)
{
pan = false;
}
private void pbx_Paint(object sender, PaintEventArgs e)
{
label();
// Generate bitmap "bmp" - this can be saved as drawn...if deisred
bmp = new Bitmap(img.Width, img.Height);
using (Graphics g = Graphics.FromImage(bmp))
{
Matrix transform = new Matrix();
transform.Scale(zoom, zoom, MatrixOrder.Append);
transform.RotateAt(ang, rotate);
transform.Translate(image.X, image.Y, MatrixOrder.Append);
g.Transform = transform;
g.DrawImage(img, 0, 0);
}
e.Graphics.DrawImage(bmp, 0, 0);
}
}
}

How to get exact pixel count between two points on jpeg image which is rendered with WPF. My solution differs from GIMP

I'm trying to get exact pixel count between two points on jpeg image. To do so i use user drawn line in WPF application using Line class. My solution is to calculate distance between two end points of this line seems to be pretty off and it returns fractional number which obviously not pixel count. Here is the code for drawing line:
// The "size" of an object for mouse over purposes.
private const int ObjectRadius = 3;
// We're over an object if the distance squared
// between the mouse and the object is less than this.
private const int OverDistSquared = ObjectRadius * ObjectRadius;
// The line we're drawing or moving.
private Line _selectedLine;
private List<Line> _lines = new List<Line>();
// True if we're moving the line's first starting end point.
private bool _movingStartEndPoint = false;
// The offset from the mouse to the object being moved.
private double _offsetX, _offsetY;
// Save the trash can dimensions.
private double _trashWidth, _trashHeight;
// The mouse is up. See whether we're over an end point or segment.
private void canDrawing_MouseMove_NotDown(object sender, MouseEventArgs e)
{
Cursor newCursor = Cursors.Cross;
// See what we're over.
Point location = e.MouseDevice.GetPosition(canDrawing);
if (MouseIsOverEndpoint(location, out _selectedLine, out _movingStartEndPoint))
newCursor = Cursors.Arrow;
else if (MouseIsOverLine(location, out _selectedLine))
newCursor = Cursors.Hand;
// Set the new cursor.
if (canDrawing.Cursor != newCursor)
canDrawing.Cursor = newCursor;
}
// See what we're over and start doing whatever is appropriate.
private void canDrawing_MouseDown(object sender, MouseButtonEventArgs e)
{
// See what we're over.
Point location = e.MouseDevice.GetPosition(canDrawing);
if (MouseIsOverEndpoint(location, out _selectedLine, out _movingStartEndPoint))
{
// Start moving this end point.
canDrawing.MouseMove -= canDrawing_MouseMove_NotDown;
canDrawing.MouseMove += canDrawing_MouseMove_MovingEndPoint;
canDrawing.MouseUp += canDrawing_MouseUp_MovingEndPoint;
// Remember the offset from the mouse to the point.
Point hitPoint;
if (_movingStartEndPoint)
hitPoint = new Point(_selectedLine.X1, _selectedLine.Y1);
else
hitPoint = new Point(_selectedLine.X2, _selectedLine.Y2);
_offsetX = hitPoint.X - location.X;
_offsetY = hitPoint.Y - location.Y;
}
else if (MouseIsOverLine(location, out _selectedLine))
{
// Start moving this segment.
canDrawing.MouseMove -= canDrawing_MouseMove_NotDown;
canDrawing.MouseMove += canDrawing_MouseMove_MovingSegment;
canDrawing.MouseUp += canDrawing_MouseUp_MovingSegment;
// Remember the offset from the mouse
// to the segment's first end point.
_offsetX = _selectedLine.X1 - location.X;
_offsetY = _selectedLine.Y1 - location.Y;
}
else
{
// Start drawing a new segment.
canDrawing.MouseMove -= canDrawing_MouseMove_NotDown;
canDrawing.MouseMove += canDrawing_MouseMove_Drawing;
canDrawing.MouseUp += canDrawing_MouseUp_Drawing;
_selectedLine = new Line
{
Stroke = Brushes.Red,
X1 = location.X,
Y1 = location.Y,
X2 = location.X,
Y2 = location.Y
};
canDrawing.Children.Add(_selectedLine);
}
}
#region Distance Methods
// See if the mouse is over an end point.
private bool MouseIsOverEndpoint(Point mousePt, out Line hitLine, out bool startEndpoint)
{
foreach (object obj in canDrawing.Children)
{
// Only process Lines.
if (obj is Line)
{
Line line = obj as Line;
// Check the starting point.
Point point = new Point(line.X1, line.Y1);
if (FindDistanceToPointSquared(mousePt, point) < OverDistSquared)
{
// We're over this point.
hitLine = line;
startEndpoint = true;
return true;
}
// Check the end point.
point = new Point(line.X2, line.Y2);
if (FindDistanceToPointSquared(mousePt, point) < OverDistSquared)
{
// We're over this point.
hitLine = line;
startEndpoint = false;
return true;
}
}
}
hitLine = null;
startEndpoint = false;
return false;
}
// See if the mouse is over a line segment.
private bool MouseIsOverLine(Point mousePt, out Line hitLine)
{
foreach (object obj in canDrawing.Children)
{
// Only process Lines.
if (obj is Line)
{
Line line = obj as Line;
// See if we're over this line.
Point closest;
Point pt1 = new Point(line.X1, line.Y1);
Point pt2 = new Point(line.X2, line.Y2);
if (FindDistanceToSegmentSquared(
mousePt, pt1, pt2, out closest)
< OverDistSquared)
{
// We're over this segment.
hitLine = line;
return true;
}
}
}
hitLine = null;
return false;
}
// Calculate the distance squared between two points.
private double FindDistanceToPointSquared(Point pt1, Point pt2)
{
double dx = pt1.X - pt2.X;
double dy = pt1.Y - pt2.Y;
return dx * dx + dy * dy;
}
// Calculate the distance squared between
// point pt and the segment p1 --> p2.
private double FindDistanceToSegmentSquared(Point pt, Point p1, Point p2, out Point closest)
{
double dx = p2.X - p1.X;
double dy = p2.Y - p1.Y;
if ((dx == 0) && (dy == 0))
{
// It's a point not a line segment.
closest = p1;
dx = pt.X - p1.X;
dy = pt.Y - p1.Y;
return dx * dx + dy * dy;
}
// Calculate the t that minimizes the distance.
double t = ((pt.X - p1.X) * dx + (pt.Y - p1.Y) * dy) / (dx * dx + dy * dy);
// See if this represents one of the segment's
// end points or a point in the middle.
if (t < 0)
{
closest = new Point(p1.X, p1.Y);
dx = pt.X - p1.X;
dy = pt.Y - p1.Y;
}
else if (t > 1)
{
closest = new Point(p2.X, p2.Y);
dx = pt.X - p2.X;
dy = pt.Y - p2.Y;
}
else
{
closest = new Point(p1.X + t * dx, p1.Y + t * dy);
dx = pt.X - closest.X;
dy = pt.Y - closest.Y;
}
return dx * dx + dy * dy;
}
private double FindDistanceToPoint(Point pt1, Point pt2)
{
double dx = pt1.X - pt2.X;
double dy = pt1.Y - pt2.Y;
return Math.Sqrt(dx * dx + dy * dy);
}
#endregion Distance Methods
#region Moving End Point
// We're moving an end point.
private void canDrawing_MouseMove_MovingEndPoint(object sender, MouseEventArgs e)
{
// Move the point to its new location.
Point location = e.MouseDevice.GetPosition(canDrawing);
if (_movingStartEndPoint)
{
_selectedLine.X1 = location.X + _offsetX;
_selectedLine.Y1 = location.Y + _offsetY;
}
else
{
_selectedLine.X2 = location.X + _offsetX;
_selectedLine.Y2 = location.Y + _offsetY;
}
}
// Stop moving the end point.
private void canDrawing_MouseUp_MovingEndPoint(object sender, MouseEventArgs e)
{
// Reset the event handlers.
canDrawing.MouseMove += canDrawing_MouseMove_NotDown;
canDrawing.MouseMove -= canDrawing_MouseMove_MovingEndPoint;
canDrawing.MouseUp -= canDrawing_MouseUp_MovingEndPoint;
}
#endregion Moving End Point
#region Drawing
// We're drawing a new segment.
private void canDrawing_MouseMove_Drawing(object sender, MouseEventArgs e)
{
// Update the new line's end point.
Point location = e.MouseDevice.GetPosition(canDrawing);
_selectedLine.X2 = location.X;
_selectedLine.Y2 = location.Y;
}
// Stop drawing.
private void canDrawing_MouseUp_Drawing(object sender, MouseEventArgs e)
{
_selectedLine.Stroke = Brushes.DeepPink;
// Reset the event handlers.
canDrawing.MouseMove -= canDrawing_MouseMove_Drawing;
canDrawing.MouseMove += canDrawing_MouseMove_NotDown;
canDrawing.MouseUp -= canDrawing_MouseUp_Drawing;
// If the new segment has no length, delete it.
if ((_selectedLine.X1 == _selectedLine.X2) && (_selectedLine.Y1 == _selectedLine.Y2))
canDrawing.Children.Remove(_selectedLine);
else
{
_lines.Add(_selectedLine);
var point1 = new Point(_selectedLine.X1, _selectedLine.Y1);
var point2 = new Point(_selectedLine.X2, _selectedLine.Y2);
PixelsInMillimeterTextBox.Text = FindDistanceToPoint(point1, point2).ToString(CultureInfo.InvariantCulture);
}
}
#endregion Drawing
#region "Moving Segment"
// We're moving a segment.
private void canDrawing_MouseMove_MovingSegment(object sender, MouseEventArgs e)
{
// Find the new location for the first end point.
Point location = e.MouseDevice.GetPosition(canDrawing);
double newX1 = location.X + _offsetX;
double newY1 = location.Y + _offsetY;
// See how far we are moving that point.
double dx = newX1 - _selectedLine.X1;
double dy = newY1 - _selectedLine.Y1;
// Move the line.
_selectedLine.X1 = newX1;
_selectedLine.Y1 = newY1;
_selectedLine.X2 += dx;
_selectedLine.Y2 += dy;
}
// Stop moving the segment.
private void canDrawing_MouseUp_MovingSegment(object sender, MouseEventArgs e)
{
// Reset the event handlers.
canDrawing.MouseMove += canDrawing_MouseMove_NotDown;
canDrawing.MouseMove -= canDrawing_MouseMove_MovingSegment;
canDrawing.MouseUp -= canDrawing_MouseUp_MovingSegment;
// See if the mouse is over the trash can.
Point location = e.MouseDevice.GetPosition(canDrawing);
if ((location.X >= 0) && (location.X < _trashWidth) &&
(location.Y >= 0) && (location.Y < _trashHeight))
{
if (MessageBox.Show("Delete this segment?",
"Delete Segment?", MessageBoxButton.YesNo)
== MessageBoxResult.Yes)
{
// Delete the segment.
canDrawing.Children.Remove(_selectedLine);
}
}
}
#endregion // Moving End Point
And here is the XAML for the control containing image:
<Grid>
<Border Name="Border" BorderThickness="1" BorderBrush="#34558b" Margin="10,44,10,10">
<utility:ZoomBorder x:Name="border" ClipToBounds="True" Background="Gray">
<Canvas Name="canDrawing"
MouseMove="canDrawing_MouseMove_NotDown"
MouseDown="canDrawing_MouseDown">
<Image Stretch="None" Name="ReferenceImage" Canvas.Left="0" Canvas.Top="0"/>
</Canvas>
</utility:ZoomBorder>
</Border>
</Grid>

There is a Win32 GDI call (LineDDA) that will enumerate the points (pixels) between two points.
Getting the count of points will give you the length of the line in pixels.
This answer has C# code that you can use. I tried it with your sample code and was able to get a proper pixel length.
Here is the code for reference:
public static List<Point> GetPointsOnLine(System.Drawing.Point point1, System.Drawing.Point point2)
{
var points = new List<Point>();
var handle = GCHandle.Alloc(points);
try
{
LineDDA(point1.X, point1.Y, point2.X, point2.Y, GetPointsOnLineCallback, GCHandle.ToIntPtr(handle));
}
finally
{
handle.Free();
}
return points;
}
private static void GetPointsOnLineCallback(int x, int y, IntPtr lpData)
{
var handle = GCHandle.FromIntPtr(lpData);
var points = (List<Point>)handle.Target;
points.Add(new Point(x, y));
}
[DllImport("gdi32.dll")]
private static extern bool LineDDA(int nXStart, int nYStart, int nXEnd, int nYEnd, LineDDAProc lpLineFunc, IntPtr lpData);
// The signature for the callback method
private delegate void LineDDAProc(int x, int y, IntPtr lpData);
Note, that the GetPointsOnLine method using System.Drawing.Point instead of System.Windows.Point.

WPF Snake game following the mouse cursor

I am trying to create a simple snake game where the snake follows the mouse. My snake body have to be a polyline. And my problem is that when I move the mouse too fast or too slow the body of my snake is getting longer/shorter and I know that is happening because of the fact that I am adding new point with the mouse coordinates and after that when I am connecting the lines the problem occurs.But I can't think of any smarter solutions.
public partial class MainWindow : Window
{
Point mousePos;
Polyline polyline;
public MainWindow()
{
InitializeComponent();
polyline = new Polyline();
polyline.Stroke = Brushes.Black;
polyline.StrokeThickness = 4;
var points = new PointCollection();
for (int i = 0; i < 50; i++)
{
points.Add(new Point(i, i));
}
polyline.Points = points;
canvas.Children.Add(polyline);
}
protected override void OnMouseMove(MouseEventArgs e)
{
base.OnMouseMove(e);
mousePos = e.GetPosition(canvas);
polyline.Points.Add(mousePos);
for (int i = 0; i < polyline.Points.Count - 1; i++)
{
polyline.Points[i] = new Point(polyline.Points[i + 1].X, polyline.Points[i + 1].Y);
}
polyline.Points.RemoveAt(0);
}
}

I propose these few modifications, commented in the code below.
The principle is to create a new point only if the distance of the mouse to the last point is great enough and to limit the displacement if the distance is far.
Point mousePos;
Polyline polyline;
double stepSize = 10; // Square size
double stepSize2; // For precalculation (see below)
public MainWindow()
{
InitializeComponent();
polyline = new Polyline();
polyline.Stroke = Brushes.Black;
polyline.StrokeThickness = 4;
polyline.Points = new PointCollection(); // Starts with an empty snake
canvas.Children.Add( polyline );
stepSize2 = stepSize * stepSize; // Precalculates the square (to avoid to repeat it each time)
}
protected override void OnMouseMove( MouseEventArgs e )
{
base.OnMouseMove( e );
var newMousePos = e.GetPosition( canvas ); // Store the position to test
if ( Dist2( newMousePos, mousePos ) > stepSize2 ) // Check if the distance is far enough
{
var dx = newMousePos.X - mousePos.X;
var dy = newMousePos.Y - mousePos.Y;
if ( Math.Abs( dx ) > Math.Abs( dy ) ) // Test in which direction the snake is going
mousePos.X += Math.Sign( dx ) * stepSize;
else
mousePos.Y += Math.Sign( dy ) * stepSize;
polyline.Points.Add( mousePos );
if ( polyline.Points.Count > 50 ) // Keep the snake lenght under 50
polyline.Points.RemoveAt( 0 );
}
}
double Dist2( Point p1, Point p2 ) // The square of the distance between two points (avoids to calculate square root)
{
var dx = p1.X - p2.X;
var dy = p1.Y - p2.Y;
return dx * dx + dy * dy;
}

Losing correct position by zooming in c#

I have a image in a picture box.it contains a Triangle.
I have a another picture box that contain a little Circle. i should put Circle on top of Triangle . i Zoom first image(Triangle ) to find top of it and then put Circle there.i do it correctly . but when i reset zoom , top of Triangle will be lose and Circle will be on a wrong position.
my code for zoom:
protected override void OnMouseWheel(MouseEventArgs e)
{
this.Cursor = Cursors.Default;
float oldzoom = zoom;
if (e.Delta > 0)
{
zoom += 0.625f;
zoomPerectNum += 50;
_txt_precentZoom.Text = zoomPerectNum.ToString() + "%";
}
else if (e.Delta < 0)
{
// zoom = Math.Max(zoom - 1F, 1F);
zoom = zoom - 0.625F;
if (zoom < 0.2503874F)
{
zoom = 0.2503874F;
}
else
{
zoomPerectNum -= 50;
_txt_precentZoom.Text = zoomPerectNum.ToString() + "%";
}
}
MouseEventArgs mouse = e as MouseEventArgs;
Point mousePosNow = mouse.Location;
int x = mousePosNow.X - _pic_image.Location.X; // Where location of the mouse in the pictureframe
int y = mousePosNow.Y - _pic_image.Location.Y;
int oldimagex = (int)(x / oldzoom); // Where in the IMAGE is it now
int oldimagey = (int)(y / oldzoom);
int newimagex = (int)(x / zoom); // Where in the IMAGE will it be when the new zoom i made
int newimagey = (int)(y / zoom);
imgx = newimagex - oldimagex + imgx; // Where to move image to keep focus on one point
imgy = newimagey - oldimagey + imgy;
_pic_image.Refresh(); // calls imageBox_Paint
}
private void imageBox_Paint(object sender, PaintEventArgs e)
{
e.Graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
e.Graphics.ScaleTransform(zoom, zoom);
if (img != null)
{
e.Graphics.DrawImage(img, imgx, imgy);
}
}
_pic_Circle:
private void _pic_Circle_MouseDown(object sender, MouseEventArgs e)
{
dragging = true;
dragPoint = new Point(e.X, e.Y);
}
private void _pic_Circle_MouseMove(object sender, MouseEventArgs e)
{
if (dragging)
{
_pic_Circle.Location = new Point(_pic_Circle.Location.X + e.X - dragPoint.X, _pic_Circle.Location.Y + e.Y - dragPoint.Y);
}
}
private void _pic_Circle_MouseUp(object sender, MouseEventArgs e)
{
dragging = false;
}

Drawing reversible rectangle

I got code from http://support.microsoft.com/kb/314945 to draw a reversible/rubber band rectangle. I added code to it so that when i leave the left mouse button a rectangle is also created on the image and then i use that for cropping the image.
This works superb. the only problem is that the rubberband rectangle doesnot start or end from where the mouse is... there is very little diference but still it is quite notable. i use the same co-ords to draw the rectangle afterwards which is drawn exactly where my mouse started and where is ended. help would be appreciated.
Here is the code: (Got issue fixed - adding code that others can benefit from it)
I have made it a control and i use it wherever i need it!
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows.Forms;
namespace CroppingControl
{
public partial class CroppingImage : UserControl
{
Rectangle rc = new Rectangle();
Boolean bHaveMouse;
Point ptOriginal = new Point();
Point ptLast = new Point();
Image Pic;
public CroppingImage()
{
InitializeComponent();
pictureBox1.MouseDown += new MouseEventHandler(MyMouseDown);
pictureBox1.MouseUp += new MouseEventHandler(MyMouseUp);
pictureBox1.MouseMove += new MouseEventHandler(MyMouseMove);
bHaveMouse = false;
}
public Image Image
{
set
{
pictureBox1.Image = value;
Pic = value;
}
get
{
return pictureBox1.Image;
}
}
public void MyMouseDown(Object sender, MouseEventArgs e)
{
pictureBox1.Image = Pic;
// Make a note that we "have the mouse".
bHaveMouse = true;
// Store the "starting point" for this rubber-band rectangle.
ptOriginal.X = e.X;
ptOriginal.Y = e.Y;
// Special value lets us know that no previous
// rectangle needs to be erased.
ptLast.X = -1;
ptLast.Y = -1;
}
// Convert and normalize the points and draw the reversible frame.
private void MyDrawReversibleRectangle(Point p1, Point p2)
{
Point px = p1;
Point py = p2;
// Convert the points to screen coordinates.
p1 = PointToScreen(p1);
p2 = PointToScreen(p2);
// Normalize the rectangle.
if (p1.X < p2.X)
{
rc.X = p1.X;
rc.Width = p2.X - p1.X;
}
else
{
rc.X = p2.X;
rc.Width = p1.X - p2.X;
}
if (p1.Y < p2.Y)
{
rc.Y = p1.Y;
rc.Height = p2.Y - p1.Y;
}
else
{
rc.Y = p2.Y;
rc.Height = p1.Y - p2.Y;
}
// Draw the reversible frame.
ControlPaint.DrawReversibleFrame(rc, Color.Black, FrameStyle.Dashed);
rc.X = px.X;
rc.Y = px.Y;
}
// Called when the left mouse button is released.
public void MyMouseUp(Object sender, MouseEventArgs e)
{
// Set internal flag to know we no longer "have the mouse".
bHaveMouse = false;
// If we have drawn previously, draw again in that spot
// to remove the lines.
if (ptLast.X != -1)
{
Point ptCurrent = new Point(e.X, e.Y);
MyDrawReversibleRectangle(ptOriginal, ptLast);
Graphics graphics = pictureBox1.CreateGraphics();
Pen pen = new Pen(Color.Gray, 2);
pen.DashStyle = System.Drawing.Drawing2D.DashStyle.DashDot;
graphics.DrawRectangle(pen, rc);
}
// Set flags to know that there is no "previous" line to reverse.
ptLast.X = -1;
ptLast.Y = -1;
ptOriginal.X = -1;
ptOriginal.Y = -1;
}
// Called when the mouse is moved.
public void MyMouseMove(Object sender, MouseEventArgs e)
{
Point ptCurrent = new Point(e.X, e.Y);
// If we "have the mouse", then we draw our lines.
if (bHaveMouse)
{
// If we have drawn previously, draw again in
// that spot to remove the lines.
if (ptLast.X != -1)
{
MyDrawReversibleRectangle(ptOriginal, ptLast);
}
// Update last point.
ptLast = ptCurrent;
// Draw new lines.
MyDrawReversibleRectangle(ptOriginal, ptCurrent);
}
}
}
}

ControlPaint.DrawReversibleFrame uses screen co-ordinates to draw a rectangle on the screen (i.e. without respect to your application's windows) which is useful when acting upon drag mouse actions as the mouse may move outside of the application window. If you are using these very same co-ordinates raw to paint in your application, then they will be out as the co-ordinates on the control upon which you are painting are with respect to the control's origin (usually its top-left corner).
To use the screen co-ordinates, you first need to convert them into control co-ordinates using the PointToClient() or RectangleToClient() methods on the control upon which you are painting, e.g.
// panel`s OnPaint
Rectangle screenRectangle = ...
Rectangle clientRectangle = panel.RectangleToClient(screenRectangle);
graphics.DrawRectangle(Pens.Red, clientRectangle);