We Keep Coding

How to draw a Rectangle in any direction after MouseDown using C#?

How can I draw a rectangle in all directions? Current code:
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
// Starting point of the selection:
if (e.Button == MouseButtons.Left)
{
_selecting = true;
_selection = new Rectangle(new Point(e.X, e.Y), new Size());
}
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
// Update the actual size of the selection:
if (_selecting)
{
_selection.Width = e.X - _selection.X;
_selection.Height = e.Y - _selection.Y;
pictureBox1.Refresh(); // redraw picturebox
}
}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left && _selecting)
{
_selecting = false;
}
}
This allows me to MouseDown and then draw down and to the right, but I am unable to draw in any other direction beyond the anchor point. How can I draw a rectangle in any direction like e.g. Microsoft Paint?
I first tried:
_selection.Width = Math.Abs(e.X - _selection.X);
_selection.Height = Math.Abs(e.Y - _selection.Y);
But this creates a funny mirror effect (which is not what I want). I then tried a simple shift:
_selection.X = _selection.Left - 5;
This did what I expected and moved a static rectangle 5 units left, so I thought it would be a simple matter of continuously shifting the anchor point during the Paint event:
private void UpdateRectange(Point newPos)
{
var width = newPos.X - _selection.X;
var height = newPos.Y - _selection.Y;
_selection.Width = Math.Abs(width);
_selection.Height = Math.Abs(height);
if (width < 0 && height > 0) // move down (+) and left (-)
{
//_selection.X = _selection.Left + width;
_selection.Offset(width, 0);
}
uxScreenGrab.Refresh(); // redraw picturebox
}
But this resulted in pushing a vertical line across the screen towards the left, when moving to the left of the original anchor point.The width does not properly update for some reason.

Here's another snippet to draw a selection rectangle on a PictureBox:
//...
private Point startPoint;
private Point endPoint;
private readonly Pen P1 = new Pen(Color.SteelBlue, 2) {
Alignment = PenAlignment.Center, DashStyle = DashStyle.Dash};
//...
Set the startPoint in the MouseDown event and reset the endPoint variables:
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
startPoint = new Point(e.X, e.Y);
endPoint = Point.Empty;
}
}
Set the endPoint and call Invalidate() method in the MouseMove event:
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
var p = new Point(e.X, e.Y);
if (e.Button == MouseButtons.Left &&
!p.Equals(startPoint))
{
endPoint = p;
pictureBox1.Invalidate();
}
}
Also call Invalidate() in the MouseUp event to remove the selection rectangle:
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
pictureBox1.Invalidate();
}
Draw the selection rectangle:
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
if(MouseButtons == MouseButtons.Left &&
!startPoint.Equals(endPoint) &&
!endPoint.Equals(Point.Empty))
{
var g = e.Graphics;
var rect = Rectangle.Empty;
if(startPoint.X < endPoint.X)
{
rect.X = startPoint.X;
rect.Width = endPoint.X - startPoint.X;
}
else
{
rect.X = endPoint.X;
rect.Width = startPoint.X - endPoint.X;
}
if(startPoint.Y < endPoint.Y)
{
rect.Y = startPoint.Y;
rect.Height = endPoint.Y - startPoint.Y;
}
else
{
rect.Y = endPoint.Y;
rect.Height = startPoint.Y - endPoint.Y;
}
g.DrawRectangle(P1, rect);
}
}
And don't forget to clean up:
private void YourForm_FormClosing(object sender, FormClosingEventArgs e)
{
P1.Dispose();
}
Keep it simple.
Related Posts
How to call a method that uses PaintEventArgs and coordinates variables

The solution proposed in the question looks good:
_selection.Width = Math.Abs(e.X - initiallySelectedX);
_selection.Height = Math.Abs(e.Y - initiallySelectedY);
...but You have to move the origin of the rectangle when (e.X - initiallySelectedX) < 0
So probably You want to add something like this to Your code:
var diffX = e.x - initiallySelectedX;
if (diffX < 0) _selection.X = initiallySelectedX - diffX;
var diffY = e.y - initiallySelectedY;
if (diffY < 0) _selection.Y = initiallySelectedY - diffY;
Where initiallySelectedX and initiallySelectedY are variables set onMouseDown.
this is only a rough idea.
The idea behind is that the Width and Height of the Rectangle cannot be NEGATIVE !!

UPDATE:
Keeping track of the starting point on the MouseDown event allows the anchor point to correctly update:
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
// Starting point of the selection:
if (e.Button == MouseButtons.Left)
{
_selecting = true;
_selection = new Rectangle(new Point(e.X, e.Y), new Size());
_startingPoint = e.Location;
}
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
// Update the actual size of the selection:
if (_selecting)
{
UpdateRectange(e.Location);
}
}
private void UpdateRectange(Point newPos)
{
var diffX = newPos.X - _startingPoint.X;
var diffY = newPos.Y - _startingPoint.Y;
var newSize = new Size(Math.Abs(diffX), Math.Abs(diffY));
if (diffX > 0 && diffY > 0)
{
_selection = new Rectangle(_startingPoint, newSize);
}
else if (diffX < 0 && diffY < 0)
{
_selection = new Rectangle(newPos, newSize);
}
else if (diffX > 0 && diffY < 0)
{
_selection = new Rectangle(new Point(_startingPoint.X, _startingPoint.Y + diffY), newSize);
}
else
{
_selection = new Rectangle(new Point(_startingPoint.X + diffX, _startingPoint.Y), newSize);
}
uxScreenGrab.Invalidate();
}
UPDATE 2:
Re-wrote UpdateRectangle to simply move the anchor point, instead of instantiating at every call:
private void UpdateRectange(Point newPos)
{
var diffX = newPos.X - _startingPoint.X;
var diffY = newPos.Y - _startingPoint.Y;
var newSize = new Size(Math.Abs(diffX), Math.Abs(diffY));
if (diffX > 0 && diffY > 0)
{
_selection.Size = newSize;
}
else if (diffX < 0 && diffY < 0)
{
_selection.Location = newPos;
_selection.Size = newSize;
}
else if (diffX > 0 && diffY < 0)
{
_selection.Y = _startingPoint.Y + diffY;
_selection.Size = newSize;
}
else
{
_selection.X = _startingPoint.X + diffX;
_selection.Size = newSize;
}
uxScreenGrab.Invalidate();
}

How do I move the Image inside the picturebox?

I want an Image to move inside the picturebox. It shouldn't be possible that you can drag it out. I found an answer with the Padding and tried it out but it drags in the opposite direction. So I tried out to switch it with Right and down, but it is not getting dragged. Also I found an answer where the picturebox get moved but then it can be moved out of the form and isn't there anymore. So I need something that can just move the picture inside the picturebox or something that moves the picturebox but not out of the form.
private bool Dragging;
private Point lastLocation;
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
Dragging = true;
lastLocation = e.Location;
}
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if (Dragging == true)
{
int dx = e.X - lastLocation.X;
int dy = e.Y - lastLocation.Y;
pictureBox1.Padding = new Padding(0, 0, Padding.Right - dx, Padding.Bottom - dy);
pictureBox1.Invalidate();
}
}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
Dragging = false;
}

Do this
pictureBox1.Padding = new Padding(Padding.Left + dx, Padding.Top + dy, Padding.Right - dx, Padding.Bottom - dy);
instead of this
pictureBox1.Padding = new Padding(0, 0, Padding.Right - dx, Padding.Bottom - dy);

I have done it by creating a panel and inserted image box inside of it.It's working in my side.Please find the code blow .
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
if (e.Button == System.Windows.Forms.MouseButtons.Left)
{
int moveLeftRight = e.X + pictureBox1.Left - MouseDownLocation.X;
int moveUpDown = e.Y + pictureBox1.Top - MouseDownLocation.Y;
int panlTopLocation = panel1.Location.Y;
int panlbottomLocation = panel1.Location.Y + panel1.Height - pictureBox1.Height;
int panlLeftLocation = panel1.Location.X;
int panlRightLocation = panel1.Location.X + panel1.Width - pictureBox1.Width ;
if (panlLeftLocation < moveLeftRight)
{
if (panlRightLocation > moveLeftRight)
{
pictureBox1.Left = moveLeftRight;
}
else
{
pictureBox1.Left = panlRightLocation;
}
}
else
{
pictureBox1.Left = panlLeftLocation;
}
if (panlTopLocation < moveUpDown)
{
if (panlbottomLocation > moveUpDown)
{
pictureBox1.Top = moveUpDown;
}
else
{
pictureBox1.Top = panlbottomLocation;
}
}
else
{
pictureBox1.Top = panlTopLocation;
}
}
}

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.

Why does making the text move in marquee style to the left dosent get to the end of the left side?

I have in my form two button and a label and a timer control.
In the timer tick event i did:
private void timer2_Tick(object sender, EventArgs e)
{
if (mode == "Left-to-Right")
{
if (this.Width == xpos)
{
this.label1.Location = new System.Drawing.Point(0, ypos);
xpos = 0;
}
else
{
this.label1.Location = new System.Drawing.Point(xpos, ypos);
xpos += 2;
}
}
else if (mode == "Right-to-Left")
{
if (xpos == 0)
{
this.label1.Location = new System.Drawing.Point(this.Width, ypos);
xpos = this.Width;
}
else
{
this.label1.Location = new System.Drawing.Point(xpos, ypos);
xpos -= 2;
}
}
}
Then a button click event:
private void button2_Click_1(object sender, EventArgs e)
{
xpos = label2.Location.X;
ypos = label2.Location.Y;
mode = "Left-to-Right";
timer2.Start();
}
And a button click event:
private void button3_Click_1(object sender, EventArgs e)
{
xpos = label2.Location.X;
ypos = label2.Location.Y;
mode = "Right-to-Left";
timer2.Start();
}
When i click on button2 to make it move left to right it's working good when the text get to the end of the right side the text is like moving inside out of the bound/border then return from the left side.
But when i click the button right to left once the text get to the end on the left bound/border the text is vanish/disapear for second and then start to mvoe from the original position it was. Why it's not acting like it does on button2 left to right ?
EDIT**
This is what i changed:
private void timer2_Tick(object sender, EventArgs e)
{
if (mode == "Left-to-Right")
{
if (this.Width == xpos)
{
this.label1.Location = new System.Drawing.Point(0, ypos);
xpos = 0;
}
else
{
this.label1.Location = new System.Drawing.Point(xpos, ypos);
xpos += 2;
}
}
else if (mode == "Right-to-Left")
{
if (xpos < -label2.Width)
{
this.label1.Location = new System.Drawing.Point(this.Width, ypos);
xpos = this.ClientSize.Width - label2.Width;
}
else
{
this.label1.Location = new System.Drawing.Point(xpos, ypos);
xpos -= 2;
}
}
}

This will not work if this.Width is an odd number. Try changing this
if (this.Width == xpos)
to this:
if (this.Width >= xpos)
It is generally a good idea not to test changing numbers for equality. Test for greater than or for less than or for greater or equal.. This is called defensive programming, doesn't cost you anything and makes your code more robust.

How can i make that when i move the mouse ober pictureBox1 it will draw points automatic on pictureBox2?

private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
points.Add(new PointF(e.X * xFactor, e.Y * yFactor));
pictureBox2.Invalidate();
label5.Visible = true;
label5.Text = String.Format("X: {0}; Y: {1}", e.X, e.Y);
counter += 1;
label6.Visible = true;
label6.Text = counter.ToString();
}
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
label4.Visible = true;
label4.Text = String.Format("X: {0}; Y: {1}", e.X, e.Y);
if (panning)
{
movingPoint = new Point(e.Location.X - startingPoint.X,
e.Location.Y - startingPoint.Y);
pictureBox1.Invalidate();
}
}
private void pictureBox2_Paint(object sender, PaintEventArgs e)
{
Pen p;
p = new Pen(Brushes.Green);
foreach (PointF pt in points)
{
e.Graphics.FillEllipse(Brushes.Red, pt.X, pt.Y, 3f, 3f);
}
for (int i = 0; i < points.Count - 1; i++)
{
if (points.Count > 1)
{
e.Graphics.DrawLine(p, points[i].X, points[i].Y, points[i+1].X, points[i+1].Y);
}
}
if (checkBox2.Checked)
{
}
}
I added a new checkBox2 and in the paint event of checkBox2 i want to make that if its checked if i just move the mouse over the pictureBox1 area without clicking anything it will draw a line on pictureBox2 a route of where the mouse is moving in pictureBox1.
And ever X pixels i move the mouse it will create a point in Green color on this line.

You can use a GraphicsPath to save all the points mouse is over, that's way the drawing can be better than using some List or Array to store the points (and loop through that drawing everytime paint is raised):
GraphicsPath gp = new GraphicsPath();
Point p;
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if(!label4.Visible) label4.Visible = true;
label4.Text = String.Format("X: {0}; Y: {1}", e.X, e.Y);
if (panning) {
if(p == Point.Empty) {
p = e.Location;
return;
}
gp.AddLine(p,e.Location);
p = e.Location;
pictureBox2.Invalidate();
}
}
private void pictureBox2_Paint(object sender, PaintEventArgs e) {
using(Pen p = new Pen(Color.Green,2f)){
p.StartCap = p.EndCap = LineCap.Round;
p.LineJoin = LineJoin.Round;
e.Graphics.DrawPath(p,gp);
}
}
Note that you should add using System.Drawing.Drawing2D; before using the code.