What is the proper way to draw a line with mouse in C#

Question

This is my drawing code to draw a custom line with mouse onto a Chart. Can you please help me to do it proper way ?

namespace Grafi
    {
        public partial class Form1 : Form
        {

            bool isDrawing = false;
            Point prevPoint;

            public Form1()
            {
                InitializeComponent();
            }

            private void chartTemperature_MouseDown(object sender, MouseEventArgs e)
            {
                isDrawing = true;
                prevPoint = e.Location;
            }

            private void chartTemperature_MouseMove(object sender, MouseEventArgs e)
            {
                Pen p = new Pen(Color.Red, 2); 
                if (isDrawing)
                {
                    Graphics g = chartTemperature.CreateGraphics();    
                    g.DrawLine(p, prevPoint, e.Location);
                    prevPoint = e.Location;

                    numOfMouseEvents = 0;              
                }
                p.Dispose();
            }

            private void chartTemperature_MouseUp(object sender, MouseEventArgs e)
            {
                isDrawing = false;
            }
        }
    }

Problem is that when I resize form my line disappers. It disappers whenever onPaint event is raised.

Answer 1

Try this... It is a stroke drawing method, implemented very simply and as close to your own code as possible. Stokes are individual collections of mouse movements. Every mouse move between down and up is recorded as a stroke, all the strokes are collected and then redrawn whenever the paint event is fired. This example is simple but could be a good starting point.

Note that you will have to add the paint handler for your chart object.

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Windows.Forms;
using System.Drawing.Drawing2D;

namespace Grafi
{
    public partial class Form1 : Form
    {
        bool isDrawing;
        // our collection of strokes for drawing
        List<List<Point>> _strokes = new List<List<Point>>();
        // the current stroke being drawn
        List<Point> _currStroke;
        // our pen
        Pen _pen = new Pen(Color.Red, 2); 

        public Form1()
        {
            InitializeComponent();
        }

        private void chartTemperature_MouseDown(object sender, MouseEventArgs e)
        {
            isDrawing = true;
            // mouse is down, starting new stroke
            _currStroke = new List<Point>();
            // add the initial point to the new stroke
            _currStroke.Add(e.Location);
            // add the new stroke collection to our strokes collection
            _strokes.Add(_currStroke);
        }

        private void chartTemperature_MouseMove(object sender, MouseEventArgs e)
        {
            if (isDrawing)
            {
                // record stroke point if we're in drawing mode
                _currStroke.Add(e.Location);
                Refresh(); // refresh the drawing to see the latest section
            }
        }

        private void chartTemperature_MouseUp(object sender, MouseEventArgs e)
        {
            isDrawing = false;
        }

        private void chartTemperature_Paint(object sender, PaintEventArgs e)
        {
            // now handle and redraw our strokes on the paint event
            e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
            foreach (List<Point> stroke in _strokes.Where(x => x.Count > 1))
                e.Graphics.DrawLines(_pen, stroke.ToArray());
        }
    }
}

Answer 2

Do you have any problems with your current implementation? Does it work, or do you just want to make the code better for an already working function.

I think you logic looks just fine. However, I would add a using clause to the Pen like this:

private void chartTemperature_MouseMove(object sender, MouseEventArgs e)
{
  using( Pen p = new Pen(Color.Red, 2)){
    if (isDrawing)
    {
      Graphics g = chartTemperature.CreateGraphics();    
      g.DrawLine(p, prevPoint, e.Location);
      prevPoint = e.Location;

      numOfMouseEvents = 0;              
    }
  }
}

This way your Pen will be disposed even in case of any exceptions occuring after it's creation and your call to Dispose.

However, you can also think of making the Pen a class variable so you don't have to create and dispose it each time you move the mouse.

Answer 3

You need to store your line somewhere.

The steps you need to take are:

1. Create somewhere to store your points in the main class, e.g . an ArrayList<ArrayList<Point>> - where each ArrayList<Point> contains the list of points in one line.
2. wait for mousedown events, and create an array for a new line (e.g a new ArrayList<Point>) at the end of the list of lines
3. wait for mousemoved events, and add a point to the last line in your list, whenever the mouse is dragged. ask to update your window here.
4. in your paint, iterate through all lines, and draw each point of each line in the array.
5. to clear the drawing, simply replace array with a blank list, and update the window.

If you don't store your lines somewhere, they will be lost. Does this make sense?

The other way of storing lines is by using a Canvas object, where the pixel-map of what is drawn is remembered and automatically drawn. If you don't mind not having your line data as vector points, and you might also want to use images or colours, then this might be a better approach.

Answer 4

I posted a solution a while back on how to draw a line using mouse movements. This should work for you.

  Point mAnchorPoint = new Point(200, 200);
  Point mPreviousPoint = Point.Empty;

  private void panel1_MouseMove(object sender, MouseEventArgs e)
  {
     if (mPreviousPoint != Point.Empty)
     {
        // Clear last line drawn
        ControlPaint.DrawReversibleLine(PointToScreen(mAnchorPoint), PointToScreen(mPreviousPoint), Color.Pink);
     }

     // Update previous point
     mPreviousPoint = e.Location;
     mPreviousPoint.Offset(myPanel1.Location);

     // Draw the new line
     ControlPaint.DrawReversibleLine(PointToScreen(mAnchorPoint), PointToScreen(mPreviousPoint), Color.Pink);
  }

Basically what you can do is draw a line every time the mouse moves. If there was a previous line and youre still moving the mouse, erase the line and draw the new one. Note that this example offsets based on a specific Panel (myPanel1 in this example). Adjust accordingly. If you resize the control, you will need to redraw the line using the anchor point previous point.