Drawing a consecutive line on a form like MS paint on Winforms C#

Question

I got a question about the Graphics object. I want to draw an consecutive line like MS paint. I don't know how to implement such thing. I do know how to start a line from the mouse location. This I do on a picturebox and add the new Point(eX, eY). The otherline could not be the same ofcourse else there would be no line visible. I could not make the other Point(10, 10) or something like that. Because then it would create a line always from the same point.

Does anyone know how to draw consecutive lines(with curves)

Does it has something to do with the mouse_down and mouse_up event? I am really stuck with this problem for a long time. If anyone of you have the time to explain me method that would work, that would be great!

Thanks in advance!

Answer 1

I just implemented simple paint for you. Just create a new project and copy this code below to Form1.cs file. Comments in code should explain how it works.

public partial class Form1 : Form
{
    private Bitmap bmp; // Place to store our drawings
    private List<Point> points; // Points of currently drawing line
    private Pen pen; // Pen we will use to draw

    public Form1()
    {
        InitializeComponent();
        DoubleBuffered = true; // To avoid flickering effect

        bmp = new Bitmap(640, 480); // This is our canvas that will store drawn lines
        using (Graphics g = Graphics.FromImage(bmp))
            g.Clear(Color.White); // Let's make it white, like paper

        points = new List<Point>(); // Here we will remember the whole path
        pen = new Pen(Color.Black);

        MouseDown += OnMouseDown; // Start drawing
        MouseMove += OnMouseMove; // Drawing...
        MouseUp += OnMouseUp; // Stop drawing
        Paint += OnPaint; // Show the drawing
    }

    void OnPaint(object sender, PaintEventArgs e)
    {
        e.Graphics.DrawImage(bmp, 0, 0); // Show what is drawn
        if (points.Count > 0)
            e.Graphics.DrawLines(pen, points.ToArray()); // Show what is currently being drawn
    }

    void OnMouseDown(object sender, MouseEventArgs e)
    {
        if (e.Button != MouseButtons.Left)
            return;

        points.Clear();
        points.Add(e.Location); // Remember the first point
    }

    void OnMouseMove(object sender, MouseEventArgs e)
    {
        if (e.Button != MouseButtons.Left)
            return;

        points.Add(e.Location); // Add points to path
        Invalidate(); // Force to repaint
    }

    void OnMouseUp(object sender, MouseEventArgs e)
    {
        if (e.Button != MouseButtons.Left)
            return;

        SaveToBitmap(); // Save the drawn line to bitmap
        points.Clear(); // Our drawing is saved, we can clear the list of points
    }

    private void SaveToBitmap()
    {
        if (points.Count == 0)
            return;

        using (Graphics g = Graphics.FromImage(bmp))
            g.DrawLines(pen, points.ToArray()); // Just draw current line on bitmap
    }
}

Result:

Answer 2

Broadly:

1. On MouseDown , capture the mouse and store the current location. This location is your initial Point value.
2. On MouseMove , add the current location to your list of points.
3. On MouseUp , complete your curve as appropriate, stop capturing the mouse.

When rendering, convert your list of Point values to an array and pass it to the Graphics.DrawLines() method. As a possible optimization, once the user is done drawing, permanently convert the list to an array. Alternatively, use a Bitmap instance as your rendering cache.

Note that you can configure the Pen object used to draw the lines to apply special effects, like end caps and mitered joints.

To draw curves, use the Graphics.DrawBeziers() method instead. Note that in this case, the points captured during the mouse events should be every third point in the array passed to the method. The two points between each of those points are the control points for each curve.

You should probably start with DrawLines() , as it's much simpler. Once you have that working nicely, then you can complicate your life with the DrawBeziers() method. At a minimum, you will have to automatically compute default control points for use with the method. Preferably, you will give the user a way to edit the control points, so that they can customize the curve.