Drawing Rectangle in a Panel using mouse

Question

So I've been trying lately to make a paint application to practice C#. My problem for the past 2 days is in the creation of rectangles.

I made a panel so all the drawing are going there. The user selects the shape he wants to draw using a menu and he can start drawing with the mouse.

I encounter 2 problems which are the following:
1) Even though my starting point was inside the panel, I moved the mouse and went outside the panel and the rectangle was drawn outside the panel as shown in the picture below.

2) After I create this rectangle and I try to draw another, the previous one is deleted. So in a way I can't draw 2 rectangles at once.

Here's a part of my source code.

Graphics mygraphics;
Pen lPen = new Pen(Color.Black); //Left Pen
Pen rPen = new Pen(Color.White); //Right pen
Point sp = new Point(0, 0);
private bool isRectangle; 
private bool isLeft, isRight; //isLeft -- Left Click, isRight -- Right Click

private void drawPanel_MouseMove(object sender, MouseEventArgs e)
{
   if (isRectangle == true)
   {
       if (e.Button == MouseButtons.Left)
       {
         isLeft = true;
         Point p = e.Location;
         int x = Math.Min(sp.X, p.X);
         int y = Math.Min(sp.Y, p.Y);
         int w = Math.Abs(p.X - sp.X);
         int h = Math.Abs(p.Y - sp.Y);
         mRect = new Rectangle(x, y, w, h);
         this.Invalidate();
       }
   }
}

private void drawPanel_MouseDown(object sender, MouseEventArgs e)
{
    sp = e.Location;           
}

private void drawPanel_MouseUp(object sender, MouseEventArgs e)
{
    isLeft = false;
}

protected override void OnPaint(PaintEventArgs e)
{
    base.OnPaint(e);

    e.Graphics.DrawRectangle(lPen, mRect);
}

What I want to accomplish is my rectangles not getting deleted after I try to draw another one and to draw them inside the panel.

What do you guys suggest?

Save the rectangles in some kind of array and manipulate your drawing method to draw all rectangles from an array. — Vollmilchbb, Nov 17 '15 at 21:36
Your `Paint` event is the `Form's` __not__ the `Panel's Paint` event. And save all `Rectangles` in a `List` or (much) better in a `List` that hold pens and colors etc.. [Here](http://stackoverflow.com/questions/27994270/photoshop-like-background-on-transparent-image/27998563?s=2|0.3407#27998563) and [here](http://stackoverflow.com/questions/30584465/use-picturebox-as-a-canvas-and-draw-text/30600471?s=4|0.2073#30600471) are posts you may want to study.. — TaW, Nov 17 '15 at 21:40
There are numerous Q&A's on Stack Overflow already discussing novice problems related to drawing of rectangles (and other shapes) based on user's mouse movements, including the marked duplicate which has sufficient discussion to address your primary concern of retaining drawn graphics. You can search for other questions that address spilling out of the control; the short version: it's up to you to draw the rectangle you want...if you don't want the rectangle's lower-right corner to be outside the control, don't specify coordinates that are outside the control. — Peter Duniho, Nov 17 '15 at 22:47
Much as I usually agree with you, this time I simply have to note that the link answers none of the OP's problems. They all are answered numerous times but certainly not there. And your last remark also is rather off, looking at the code and the image ;-) — TaW, Nov 18 '15 at 00:01

score 0 · Accepted Answer · edited May 23 '17 at 12:15

0

Here are the minimal changes I suggest:

List<Rectangle> rectangles = new List<Rectangle>();
Rectangle mRect = Rectangle.Empty;


private void drawPanel_MouseUp(object sender, MouseEventArgs e)
{
   isLeft = false;
   rectangles.Add(mRect);
   mRect = Rectangle.Empty;
   drawPanel.Invalidate();
}

private void drawPanel_Paint(object sender, PaintEventArgs e)
{
   foreach (Rectangle rect in rectangles) e.Graphics.DrawRectangle(lPen, rect );
   e.Graphics.DrawRectangle(Pens.Orange, mRect);  // or whatever..
}

Note that the Paint event now is the one of the Panel. Do make sure you hook it up with the Panel!!

Also note how I draw the current rectangle mRect in a different color than the list of the other rectangles; this is of course optional..

edited May 23 '17 at 12:15

Community

1
1

answered Nov 17 '15 at 22:37

TaW

53,122
8
69
111

I was searching whole day for a solution to this and I finally started to get disappointed. Your answers truly covered everything. I admire you, thanks a lot! :) – Divinelink Nov 17 '15 at 23:55
If I want to change the color of my pen, but not change the colors of all the other rectangles I made, what should I do? Is there a way I can add the color setting for each rectangle? – Divinelink Nov 18 '15 at 00:03
Yes, but you need to change the List to something more sophisticated. Create a class of your own that holds a rectangle property and a color or maybe a Pen and change `List` to List. Then you can store all you need to draw each rect. in its own way. Add colorpicker and maybe line width and maybe dashstyle pickers.. Have fun!! Do have a look at the post I linked to in my comment! – TaW Nov 18 '15 at 00:08

Drawing Rectangle in a Panel using mouse

1 Answers1

Linked