Draw lines on a picturebox using mouse clicks in C# - c#

I'm trying to make a program that will draw lines over a picturebox using mouse clicks for the locations of where the line is to be drawn from and to. This is my current code:
public partial class Form1 : Form
{
int Drawshape;
private Point p1, p2;
List<Point> p1List = new List<Point>();
List<Point> p2List = new List<Point>();
public Form1()
{
InitializeComponent();
pictureBox1.Image = new Bitmap(pictureBox1.Width, pictureBox1.Height);
}
private void button1_Click(object sender, EventArgs e)
{
Drawshape = 1;
}
private void button2_Click(object sender, EventArgs e)
{
Drawshape = 2;
}
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
if (Drawshape == 1)
{
if (p1.X == 0)
{
p1.X = e.X;
p1.Y = e.Y;
}
else
{
p2.X = e.X;
p2.Y = e.Y;
p1List.Add(p1);
p2List.Add(p2);
Invalidate();
p1.X = 0;
}
}
}
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
Graphics G = Graphics.FromImage(pictureBox1.Image);
if (Drawshape == 1)
{
using (var p = new Pen(Color.Blue, 4))
{
for (int x = 0; x < p1List.Count; x++)
{
G.DrawLine(p, p1List[x], p2List[x]);
}
}
}
}
At the moment it doesn't allow me to draw on the picturebox at all. How would that be possible?

Change Invalidate(); to pictureBox1.Invalidate();

You need to draw each line on the Image object (using Graphics.FromImage) after creating the line.
You also need to dispose the Graphics object in a using block.

Related

How to copy from screen 9 different Images using C#?

I'm doing a school project using C# in which I designed a Form in C# that I can draw on and now I need to copy what I draw into a 9 different Images and save them. So far, I tried using the copy from screen function like that:
Size s = this.Size;
Bitmap memoryImage = new Bitmap(s.Width, s.Height, this.CreateGraphics());
Graphics.FromImage(memoryImage).CopyFromScreen(this.Location.X, this.Location.Y, 0, 0, s);
memoryImage.Save(#"C:\Users\omerm\Desktop\projectFinals\ProjectFiles\C-Sharp\Drawing\WinFormsApp1\Digits\1.jpg");
My problem is that the image I get from this code includes parts of my screen that aren't part of my Form. And I also need to copy 9 different images who are fractions of this one instead of just the one and make sure those 9 are around the same shape(squares). does anyone know how to do that?
I'm terrible at explaining this so think that I need to take the original image and cut into 9 like in a tic tac toe board and save each one of them as a different image in the shape of squares instead of the original.
full code:
namespace WinFormsApp1
{
public partial class Form1 : Form
{
Pen Pen = new Pen(Color.Black, 2);
int pX, pY;
Graphics g;
public object MemoryImage { get; private set; }
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
}
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
pX = e.X;
pY = e.Y;
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
Graphics g = pictureBox1.CreateGraphics();
g.DrawLine(Pen, pX, pY, e.X, e.Y);
pX = e.X;
pY = e.Y;
}
}
private void button1_Click(object sender, EventArgs e)
{
Size s = this.Size;
Bitmap memoryImage = new Bitmap(s.Width, s.Height, this.CreateGraphics());
Graphics.FromImage(memoryImage).CopyFromScreen(this.Location.X, this.Location.Y, 0, 0, s);
memoryImage.Save(#"C:\Users\omerm\Desktop\projectFinals\ProjectFiles\C-Sharp\Drawing\WinFormsApp1\Digits\1.jpg");
}
private void ChooseColor(object sender, EventArgs e)
{
Pen.Color = ((PictureBox)sender).BackColor;
}
}
}
Tried looking online but what I look for is really specific.
Here's an example of persisting the data in a structure and drawing it in the Paint() event. Additionally, I've demonstrated how to tell the PictureBox to draw itself instead of copying the screen:
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private List<Point> curSquiggle;
private List<List<Point>> Squiggles = new List<List<Point>>();
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
curSquiggle = new List<Point>();
curSquiggle.Add(e.Location);
Squiggles.Add(curSquiggle);
}
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
curSquiggle.Add(e.Location);
pictureBox1.Invalidate();
}
}
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
foreach(List<Point> squiggle in Squiggles)
{
e.Graphics.DrawLines(Pens.Black, squiggle.ToArray());
}
}
private void button1_Click_1(object sender, EventArgs e)
{
Bitmap bmp = new Bitmap(pictureBox1.ClientRectangle.Width, pictureBox1.ClientRectangle.Height);
pictureBox1.DrawToBitmap(bmp, pictureBox1.ClientRectangle);
// Do something with the bmp, like display it in another form:
Form frm = new Form();
frm.AutoSize = true;
PictureBox pb = new PictureBox();
pb.SizeMode = PictureBoxSizeMode.AutoSize;
pb.Image = bmp;
pb.Location = new Point(0, 0);
frm.Controls.Add(pb);
frm.Show();
}
}
Example run:
Here's a different version of the save code which splits the main picture into 9 pieces:
private void button1_Click_1(object sender, EventArgs e)
{
Bitmap bmp = new Bitmap(pictureBox1.ClientRectangle.Width, pictureBox1.ClientRectangle.Height);
pictureBox1.DrawToBitmap(bmp, pictureBox1.ClientRectangle);
int cols = 3;
int rows = 3;
int cellWidth = bmp.Width / cols;
int cellHeight = bmp.Height / rows;
Rectangle destRect = new Rectangle(0, 0, cellWidth, cellHeight);
List<Bitmap> cells = new List<Bitmap>();
for(int r=0; r<rows; r++)
{
for(int c=0; c<cols; c++)
{
Bitmap cell = new Bitmap(cellWidth, cellHeight);
Rectangle srcRect = new Rectangle(c * cellWidth, r * cellHeight, cellWidth, cellHeight);
using (Graphics g = Graphics.FromImage(cell))
{
g.DrawImage(bmp, destRect, srcRect, GraphicsUnit.Pixel);
}
cells.Add(cell);
}
}
foreach(Bitmap cell in cells)
{
Form frm = new Form();
frm.AutoSize = true;
frm.AutoSizeMode = AutoSizeMode.GrowAndShrink;
PictureBox pb = new PictureBox();
pb.SizeMode = PictureBoxSizeMode.AutoSize;
pb.Image = cell;
pb.Location = new Point(0, 0);
frm.Controls.Add(pb);
frm.Show();
}
}
Splitting into nine pieces:

I made a rectangle how do I check if the mouse clicked on it?

How do I check if a mouse clicked a rectangle?
Graphics gfx;
Rectangle hitbox;
hitbox = new hitbox(50,50,10,10);
//TIMER AT THE BOTTOM
gfx.Draw(System.Drawing.Pens.Black,hitbox);
Just a sample quick and dirty, if your "gfx" is a "e.Graphics..." from a Form:
public partial class Form1 : Form
{
private readonly Rectangle hitbox = new Rectangle(50, 50, 10, 10);
private readonly Pen pen = new Pen(Brushes.Black);
public Form1()
{
InitializeComponent();
}
private void Form1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawRectangle(pen, hitbox);
}
private void Form1_MouseDown(object sender, MouseEventArgs e)
{
if ((e.X > hitbox.X) && (e.X < hitbox.X + hitbox.Width) &&
(e.Y > hitbox.Y) && (e.Y < hitbox.Y + hitbox.Height))
{
Text = "HIT";
}
else
{
Text = "NO";
}
}
}
Rectangle has several handy but often overlooked functions. In this case using the Rectangle.Contains(Point) function is the best solution:
private void Form1_MouseDown(object sender, MouseEventArgs e)
{
if (hitbox.Contains(e.Location)) .. // clicked inside
}
To determine if you clicked on the outline you will want to decide on a width, since the user can't easily hit a single pixel.
For this you can use either GraphicsPath.IsOutlineVisible(Point)..
private void Form1_MouseDown(object sender, MouseEventArgs e)
{
GraphicsPath gp = new GraphicsPath();
gp.AddRectanle(hitbox);
using (Pen pen = new Pen(Color.Black, 2f))
if (gp.IsOutlineVisible(e.location), pen) .. // clicked on outline
}
..or stick to rectangles..:
private void Form1_MouseDown(object sender, MouseEventArgs e)
{
Rectangle inner = hitbox;
Rectangle outer = hitbox;
inner.Inflate(-1, -1); // a two pixel
outer.Inflate(1, 1); // ..outline
if (outer.Contains(e.Location) && !innerContains(e.Location)) .. // clicked on outline
}

How to draw a rectangle by holding down mouse button in a PictureBox inside a windows form?

In my application I want to draw a rectangle on a picture box by holding down a mouse button, the 2 points defining the rectangle must be retrieved from the moment the mousbutton was pressed down and when it was released. The problem is, the coordinate points of the rectangle are with respect to windows form but I need coordinate points with respect to picture box that means the picture box should use separate coordinate points and here is my code snippets...
public partial class Form1 : Form
{
Boolean bHaveMouse;
Point ptOriginal = new Point();
Point ptLast = new Point();
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
bHaveMouse = false;
}
private void MyDrawReversibleRectangle(Point p1, Point p2)
{
Rectangle rc = new Rectangle();
p1 = PointToScreen(p1);
p2 = PointToScreen(p2);
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;
}
ControlPaint.DrawReversibleFrame(rc,
Color.DarkGreen, FrameStyle.Thick);
textBox2.Text = (rc.Width).ToString();
textBox3.Text = (rc.Height).ToString();
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
Point ptCurrent = new Point(e.X, e.Y);
if (bHaveMouse)
{
if (ptLast.X != -1)
{
MyDrawReversibleRectangle(ptOriginal, ptLast);
}
ptLast = ptCurrent;
MyDrawReversibleRectangle(ptOriginal, ptCurrent);
textBox1.Text = (ptOriginal).ToString();
textBox4.Text = (ptLast).ToString();
}
}
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
bHaveMouse = true;
ptOriginal.X = e.X;
ptOriginal.Y = e.Y;
ptLast.X = -1;
ptLast.Y = -1;
}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
bHaveMouse = false;
if (ptLast.X != -1)
{
Point ptCurrent = new Point(e.X, e.Y);
MyDrawReversibleRectangle(ptOriginal, ptLast);
}
ptLast.X = -1;
ptLast.Y = -1;
ptOriginal.X = -1;
ptOriginal.Y = -1;
}
I think you are overcomplicating things.
Instead of using ControlPaint you can simply get a Graphics-Object "on" your picture box, that way, inside that graphics object you have to use coordinates relative to itself and not to the control containing it, a little example:
public Form1()
{
InitializeComponent();
Bitmap myBitmap = new Bitmap(this.pictureBox1.Width, this.pictureBox1.Height);
using (Graphics g = Graphics.FromImage(myBitmap))
{
g.Clear(Color.Aqua);
g.DrawRectangle(new Pen(Brushes.Black), 10, 10, 100, 100);
}
this.pictureBox1.Image = myBitmap;
}
Output of that looks like this for me (form was: 284x262 here and the picture box: 156x124 and positioned at (47, 35) relative to the form origin)
Using most parts of your code you can use the coordinates relative to the pictue box pretty easily (I did not use the output of coordinates into a textbox and replaced your MyDrawReversibleRectangle with a simple one of mine, now you can just span a rectangle by holding down a mousebutton inside the picture box:
public partial class Form1 : Form
{
Boolean bHaveMouse;
Point ptOriginal = new Point();
Point ptLast = new Point();
public Form1()
{
InitializeComponent();
this.pictureBox1.MouseMove += new System.Windows.Forms.MouseEventHandler(this.pictureBox1_MouseMove);
this.pictureBox1.MouseDown += new System.Windows.Forms.MouseEventHandler(this.pictureBox1_MouseDown);
this.pictureBox1.MouseUp += new System.Windows.Forms.MouseEventHandler(this.pictureBox1_MouseUp);
}
private void MyDrawReversibleRectangle(Point p1, Point p2)
{
Bitmap myBitmap = new Bitmap(this.pictureBox1.Width, this.pictureBox1.Height);
using (Graphics g = Graphics.FromImage(myBitmap))
{
g.Clear(Color.Aqua);
g.DrawRectangle(new Pen(Brushes.Black), p1.X, p1.Y, p2.X - p1.X, p2.Y - p1.Y);
}
this.pictureBox1.Image = myBitmap;
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
Point ptCurrent = new Point(e.X, e.Y);
if (bHaveMouse)
{
if (ptLast.X != -1)
{
MyDrawReversibleRectangle(ptOriginal, ptLast);
}
ptLast = ptCurrent;
MyDrawReversibleRectangle(ptOriginal, ptCurrent);
}
}
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
bHaveMouse = true;
ptOriginal.X = e.X;
ptOriginal.Y = e.Y;
ptLast.X = -1;
ptLast.Y = -1;
}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
bHaveMouse = false;
if (ptLast.X != -1)
{
Point ptCurrent = new Point(e.X, e.Y);
MyDrawReversibleRectangle(ptOriginal, ptLast);
}
ptLast.X = -1;
ptLast.Y = -1;
ptOriginal.X = -1;
ptOriginal.Y = -1;
}
}
EDIT: You did not include that part of the code, but as I do it in the Form1-constructor I thought I could also mention it explicitly: You need to define your mouse event handlers on the picture box or this code won't work.

I have two pictureBoxes in other sizes how can i make that when i click on one pictureBox it will draw a point on the smaller pictureBox?

This is my code but its not working not drawing points at all on pictureBox2.
public partial class Form1 : Form
{
private int counter;
private int pb1mouse_x;
private int pb1mouse_y;
private int pbsize_x;
private int pbsize_y;
public Form1()
{
InitializeComponent();
pbsize_x = pictureBox2.Width / pictureBox1.Width;
pbsize_y = pictureBox2.Height / pictureBox1.Height;
label4.Visible = false;
label5.Visible = false;
label6.Visible = false;
counter = 0;
pictureBox1.Load(#"d:\radar000075.png");
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
label4.Visible = true;
label4.Text = String.Format("X: {0}; Y: {1}", e.X, e.Y);
}
private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
label5.Visible = true;
label5.Text = String.Format("X: {0}; Y: {1}", e.X, e.Y);
counter += 1;
label6.Visible = true;
label6.Text = counter.ToString();
pb1mouse_x = e.X;
pb1mouse_y = e.Y;
pb1mouse_x = pb1mouse_x * pbsize_x;
pb1mouse_y = pb1mouse_y * pbsize_y;
pictureBox2.Invalidate();
}
}
private void pictureBox2_Paint(object sender, PaintEventArgs e)
{
Pen p = new Pen(Color.Red);
var g = e.Graphics;
g.Clear(pictureBox1.BackColor);
g.DrawEllipse(p, new Rectangle(pb1mouse_x, pb1mouse_y, 10, 10));
}
}
You should be able to simply multiply by factors, i.e. smallBox.Width/largeBox.Width and smallBox.Height/largeBox.Height. Multiply the coordinates for the larger box by those factors and it will give you coordinates for the smaller box.
Edit:
This is what my code looks like:
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Windows.Forms;
namespace PBoxes
{
public partial class Form1 : Form
{
private float xFactor, yFactor;
List<PointF> points = new List<PointF>();
public Form1()
{
InitializeComponent();
xFactor = (float)pictureBox2.Width / pictureBox1.Width;
yFactor = (float)pictureBox2.Height / pictureBox1.Height;
}
private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
{
points.Add(new PointF(e.X * xFactor, e.Y * yFactor));
pictureBox2.Invalidate();
}
private void pictureBox2_Paint(object sender, PaintEventArgs e)
{
foreach (PointF pt in points)
{
e.Graphics.FillEllipse(Brushes.Red, pt.X, pt.Y, 3f, 3f);
}
}
private void pictureBox_SizeChanged(object sender, EventArgs e)
{
xFactor = (float)pictureBox2.Width / pictureBox1.Width;
yFactor = (float)pictureBox2.Height / pictureBox1.Height;
}
}
}

Move rectangle with mouse using translate/transform

I need to make a graph of lines from a csv file and draw it with GDI got a Windows form but now I want to change the scale and move.
I started with something more simple as moving a rectangle with the mouse but to start drawing the rectangle always from the origin.
Can anyone help?
My code is:
public partial class Form1 : Form {
int origenX;
int origenY;
bool transformar = false;
public Form1() {
InitializeComponent();
}
private void Form1_Paint(object sender, PaintEventArgs e) {
dibujar(e.Graphics);
}
private void Form1_MouseMove(object sender, MouseEventArgs e) {
int deltaX = e.X - origenX;
int deltaY = e.Y - origenY;
if (transformar) {
System.Drawing.Graphics g = this.CreateGraphics();
Matrix mAux = new Matrix();
mAux.Translate(deltaX, deltaY);
g.Transform = mAux;
dibujar(g);
g.Dispose();
}
this.Text = "x=" + deltaX.ToString() + ", y=" + deltaY.ToString();
}
private void Form1_MouseDown(object sender, MouseEventArgs e) {
transformar = true;
origenX = e.X;
origenY = e.Y;
}
private void Form1_MouseUp(object sender, MouseEventArgs e) {
transformar = false;
}
private void dibujar(System.Drawing.Graphics g) {
g.Clear(Color.White);
g.DrawEllipse(new Pen(Color.Blue, 2), new Rectangle(50, 50, 50, 50));
}
}
Already solved, thanks anyway, the code was as follows:
public partial class Form2 : Form {
private float dx=0;
private float dy=0;
private float X0=1;
private float Y0=1;
private bool trasladar = false;
public Form2() {
InitializeComponent();
}
private void Form2_Paint(object sender, PaintEventArgs e) {
e.Graphics.TranslateTransform(dx, dy, MatrixOrder.Append);
e.Graphics.Clear(Color.White);
e.Graphics.DrawEllipse(new Pen(Color.Blue), new Rectangle(50, 50, 50, 50));
}
private void Form2_MouseDown(object sender, MouseEventArgs e) {
Cursor = Cursors.SizeAll;
trasladar = true;
X0 = e.X;
Y0 = e.Y;
}
private void Form2_MouseUp(object sender, MouseEventArgs e) {
Cursor = Cursors.Default;
trasladar = false;
}
private void Form2_MouseMove(object sender, MouseEventArgs e) {
if (trasladar) {
dx += (e.X - X0);
dy += (e.Y - Y0);
X0 = e.X;
Y0 = e.Y;
Invalidate();
}
}
}
Use this.Invalidate(); when the form should redraw.
It will declare the form as invalid, so it will be forced to redraw. Only then the Form1_Paint will be called.
Test this behaivour by doing an Debug output in the Paint-Event.
Then you can start further debugging to get what you want.

Categories