How do I draw an enlarged image?
I have a Size
400X400 camera in my app . The parameter SizeMode
for the image window is set to Zoomed
. I have uploaded a 700X446 png image into a frame.
I have the following problem,
Even though I am drawing a black line along the red carpet, it is actually drawn along the loaded image from a perspective perspective.
How can I solve the problem?
PS I only want to paint on the image, not on the whole picture.
Source:
public partial class MainForm : Form
{
Bitmap _inputImage = null;
//Graphics _imageGraphics = null;
#region ctor
public MainForm()
{
InitializeComponent();
_inputImage = Bitmap.FromFile(@"E:\cracked.png") as Bitmap;
this.inputImagePictureBox.Image = _inputImage;
}
#endregion
#region Mouse Up and Down
Point _startPoint = Point.Empty;
private void left_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
_startPoint = e.Location;
Circle tempCircle = new Circle(_startPoint, 10);
Bitmap tempImage = (Bitmap)_inputImage.Clone();
Graphics g = Graphics.FromImage(tempImage);
tempCircle.Draw(g);
inputImagePictureBox.Image = tempImage;
}
}
private void pressed_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
if (_startPoint != e.Location)
{
Line tempLine = new Line(_startPoint, e.Location);
Bitmap tempImage = (Bitmap)_inputImage.Clone();
Graphics g = Graphics.FromImage(tempImage);
tempLine.Draw(g);
inputImagePictureBox.Image = tempImage;
}
}
}
Bitmap _savedImage;
private void left__MouseUp(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
if (_startPoint != e.Location)
{
Line tempLine = new Line(_startPoint, e.Location);
Bitmap tempImage = (Bitmap)_inputImage.Clone();
Graphics g = Graphics.FromImage(tempImage);
tempLine.Draw(g);
_savedImage = tempImage;
inputImagePictureBox.Image = tempImage;
}
else
{
Bitmap tempImage = (Bitmap)_inputImage.Clone();
Graphics g = Graphics.FromImage(tempImage);
inputImagePictureBox.Image = tempImage;
}
}
}
}
source to share
You need to solve two problems:
-
Clip area
Graphics
for actualImage
instead of wholePictureBox.ClientArea
-
Scale the coordinates of the mouse events to the actual image when fetching and writing them, and back when you use them to draw on the event
Paint
.
For both, we need to know the scaling factor for Image
; for clipping we also need to know ImageArea
, and for drawing I just keep two mouse locations.
Here is the class level variable I am using:
PointF mDown = Point.Empty;
PointF mLast = Point.Empty;
float zoom = 1f;
RectangleF ImgArea = RectangleF.Empty;
Note that I am using floats
for all, as we will need to do the division ..
First we calculate the scale and ImageArea
:
void SetImageScale(PictureBox pbox)
{
SizeF sp = pbox.ClientSize;
SizeF si = pbox.Image.Size;
float rp = sp.Width / sp.Height; // calculate the ratios of
float ri = si.Width / si.Height; // pbox and image
if (rp > ri)
{
zoom = sp.Height / si.Height;
float width = si.Width * zoom;
float left = (sp.Width - width) / 2;
ImgArea = new RectangleF(left, 0, width, sp.Height);
}
else
{
zoom = sp.Width / si.Width;
float height = si.Height * zoom;
float top = (sp.Height - height) / 2;
ImgArea = new RectangleF(0, top, sp.Width, height);
}
}
This routine should be called every time a new one is loaded Image
, as well as on any resizing PictureBox
:
private void pictureBox1_Resize(object sender, EventArgs e)
{
SetImageScale(pictureBox1);
}
Now you don't need to store mouse locations. Since they need to be reused after resizing , we need to convert them to image coordinates. This procedure can do it and also again:
PointF scalePoint(PointF pt, bool scale)
{
return scale ? new PointF( (pt.X - ImgArea.X) / zoom, (pt.Y - ImgArea.Y) / zoom)
: new PointF( pt.X * zoom + ImgArea.X, pt.Y * zoom + ImgArea.Y);
}
Finally, we can code the event Paint
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
using (Pen pen = new Pen(Color.Fuchsia, 2.5f) { DashStyle = DashStyle.Dot})
e.Graphics.DrawRectangle(pen, Rectangle.Round(ImgArea));
e.Graphics.SetClip(ImgArea);
e.Graphics.DrawLine(Pens.Red, scalePoint(mDown, false), scalePoint(mLast, false));
}
.. and mouse events:
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
mDown = scalePoint(e.Location, true);
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
mLast = scalePoint(e.Location, true);
pictureBox1.Invalidate();
}
}
For more complex drawing, you will store the coordinates in List<PointF>
and convert them back, almost as shown above ..:
List<PointF> points = new List<PointF>();
and then:
e.Graphics.DrawCurve(Pens.Orange, points.Select(x => scalePoint(x, false)).ToArray());
source to share